Skip to main content

Chart.js charts for Wagtail

Project description

Wagtail Charts

Chart.js charts in Wagtail, edited and customised from the Wagtail admin

Getting started

Assuming you have a Wagtail project up and running:

pip install wagtailcharts

Add wagtailcharts to your in the INSTALLED_APPS section, before the core wagtail packages:

    # ...
    # ...

Add a wagtailcharts ChartBlock to one of your StreamFields:

from wagtailcharts.blocks import ChartBlock

class ContentBlocks(StreamBlock):
    chart_block = ChartBlock()

Include your streamblock in one of your pages

class HomePage(Page):
    body = StreamField(ContentBlocks())

    content_panels = Page.content_panels + [

Add the wagtailcharts_tags templatetag to your template and call the render_charts tag just before your </body> closing tag. Please note that you must render your chart block so that the render_charts tag can detect the charts. Here is a tiny example of a page rendering template:

{% load wagtailcore_tags wagtailcharts_tags %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-6">
            <div class="excerpt">{{self.excerpt|richtext}}</div>
    {% for block in self.body %}
        {% include_block block %}
    {% endfor %}
{% endblock %}

{% block extra_js %}
{% render_charts %}
{% endblock %}


ChartBlock accepts a few extra arguments in addition to the standard StructBlock arguments.


A tuple of color tuples defining the available colors in the editor.

from wagtailcharts.blocks import ChartBlock

    ('#ff0000', 'Red'),
    ('#00ff00', 'Green'),
    ('#0000ff', 'Blue'),

class ContentBlocks(StreamBlock):
    chart_block = ChartBlock(colors=COLORS)


You can override the default chart types available for your ChartBlock instance:

from wagtailcharts.blocks import ChartBlock

    ('line', 'Custom title for line chart'),

class ContentBlocks(StreamBlock):
    chart_block = ChartBlock(chart_types=CHART_TYPES)

The default types are:

    ('line', 'Line Chart'),
    ('bar', 'Vertical Bar Chart'),
    ('bar_horizontal', 'Horizontal Bar Chart'),
    ('area', 'Area Chart'),
    ('multi', 'Combo Line/Bar/Area Chart'),
    ('pie', 'Pie Chart'),
    ('doughnut', 'Doughnut Chart'),
    ('radar', 'Radar Chart'),
    ('polar', 'Polar Chart'),
    ('waterfall', 'Waterfall Chart')


Release notes

Version 0.3

  • Added Waterfall Chart
  • Added DataLabels
  • Added options for: ** grid display ** axis display ** y tick precision ** datalabel and tooltip precision
  • Added grouping of options into multiple collapsible panels with buttons
  • Multiple bugfixes

Version 0.2

  • Added support for Wagtail 3.0

Version 0.1

  • Initial release

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

wagtailcharts-0.3.tar.gz (280.5 kB view hashes)

Uploaded source

Built Distribution

wagtailcharts-0.3-py3-none-any.whl (288.4 kB view hashes)

Uploaded py3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page