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)


Project details

Release history Release notifications | RSS feed

This version


Download files

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

Built Distribution

wagtailcharts-0.1-py3-none-any.whl (279.2 kB view hashes)

Uploaded py3

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page