Pygal

Draw SVG charts with pygal in your browser: stacked bars, line and pie charts, custom colors, value labels and SVG files.

Python
# Source: https://www.pygal.org/en/stable/documentation/types/bar.html

import pygal
from IPython.display import HTML

bar_chart = pygal.StackedBar()
bar_chart.title = 'Browser usage evolution (in %)'
bar_chart.x_labels = map(str, range(2002, 2013))
bar_chart.add('Firefox', [None, None, 0, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1])
bar_chart.add('Chrome',  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3])
bar_chart.add('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
bar_chart.add('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5])
HTML(bar_chart.render(is_unicode=True))

pygal is a Python library that draws charts as SVG, the vector image format that web browsers display directly and that stays sharp at any size. You create a chart object such as pygal.Bar() or pygal.Line(), set a title and labels, add one series of values at a time and render the chart. People use it for charts in web pages, reports and dashboards. On this page it runs in your browser, so you can try it without installing anything. Run the example first, then paste any snippet below into a new cell to try it.

What the example does

pygal.StackedBar() creates a bar chart that stacks each series on top of the ones added before it. The values are each browser's share of use in percent from 2002 to 2012, so every year adds up to 100. x_labels names the 11 bars, one per year, and each add() call adds one browser's values in the same order. None marks years with no data, such as Chrome before 2008, and a stacked chart counts them as zero. render() returns the chart as SVG bytes, and is_unicode=True makes it return a string instead. HTML() from IPython.display shows that SVG as the cell's output.

Draw a line chart

Chart options can be passed as keywords when you create the chart, like the axis titles here, or set as attributes afterwards, like title:

import pygal
from IPython.display import HTML

chart = pygal.Line(x_title="Month", y_title="Visitors")
chart.title = "Monthly visitors"
chart.x_labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
chart.add("Blog", [120, 132, 101, 134, 190, 230])
chart.add("Shop", [80, 95, 110, 105, 140, 160])
HTML(chart.render(is_unicode=True))

Make a pie or donut chart

In pygal.Pie() each series is a slice, so here each add() call gets a single value. inner_radius cuts out the middle to make a donut, and half_pie=True draws a half circle instead:

import pygal
from IPython.display import HTML

chart = pygal.Pie(inner_radius=0.4)
chart.title = "Time spent on tasks (%)"
chart.add("Coding", 45)
chart.add("Meetings", 25)
chart.add("Email", 15)
chart.add("Other", 15)
HTML(chart.render(is_unicode=True))

Change colors and show values

A Style sets the colors, background and fonts, and pygal.style has ready-made ones such as DarkStyle, NeonStyle and LightColorizedStyle. print_values=True writes each value on its bar, and value_formatter controls how values are written:

import pygal
from IPython.display import HTML
from pygal.style import Style

style = Style(colors=("#2563eb", "#f97316", "#16a34a"))
chart = pygal.HorizontalBar(style=style, print_values=True,
                            value_formatter=lambda v: f"{v:.0f}%")
chart.title = "Preferred language"
chart.add("Python", 58)
chart.add("JavaScript", 27)
chart.add("Other", 15)
HTML(chart.render(is_unicode=True))

Save the chart as an SVG file

render_to_file() writes the SVG to a file that any web browser can open. Files your code saves appear in the sidebar's Data tab:

import pygal
from IPython.display import HTML

chart = pygal.Bar(title="Tickets closed", x_labels=["Mon", "Tue", "Wed", "Thu", "Fri"])
chart.add("Team A", [12, 15, 9, 20, 17])
chart.add("Team B", [8, 11, 14, 10, 13])
chart.render_to_file("tickets.svg")
HTML(chart.render(is_unicode=True))

Good to know

  • render_to_png() does not work here. It needs CairoSVG, which installs but cannot load the Cairo graphics library in this browser version of Python. Save SVG instead.
  • To give several charts the same options, set them on a pygal.Config() object and pass it to each chart, as in pygal.Bar(config).
  • Long x labels overlap on a crowded axis. x_label_rotation=45 turns them, and show_minor_x_labels=False together with x_labels_major_every=5 shows only every fifth label.