Custom Styles

pygal provides 2 ways to customize styles:

Using Style class

You can instantiate the Style class with some customizations for quick styling:

from pygal.style import Style
custom_style = Style(
  background='transparent',
  plot_background='transparent',
  foreground='#53E89B',
  foreground_strong='#53A0E8',
  foreground_subtle='#630C0D',
  opacity='.6',
  opacity_hover='.9',
  transition='400ms ease-in',
  colors=('#E853A0', '#E8537A', '#E95355', '#E87653', '#E89B53'))

chart = pygal.StackedLine(fill=True, interpolate='cubic', style=custom_style)
chart.add('A', [1, 3,  5, 16, 13, 3,  7])
chart.add('B', [5, 2,  3,  2,  5, 7, 17])
chart.add('C', [6, 10, 9,  7,  3, 1,  0])
chart.add('D', [2,  3, 5,  9, 12, 9,  5])
chart.add('E', [7,  4, 2,  1,  2, 10, 0])
chart.render()

Properties

Style objects supports the following properties:

Properties Description
plot_background The color of the chart area background
background The color of the image background
foreground The main foregrond color
foreground_strong The emphasis foreground color
foreground_subtle The subtle foreground color
font_family The main font family
label_font_family The label font family
major_label_font_family The major label font family
value_font_family The print_values font family
value_label_font_family The print_labels font family
tooltip_font_family The tooltip font family
title_font_family The title font family
legend_font_family The legend font family
no_data_font_family The no data text font family
guide_stroke_dasharray The dasharray for guide line
major_guide_stroke_dasharray The dasharray for major guide line
label_font_size The label font size
major_label_font_size The major label font size
value_font_size The print_values font size
value_label_font_size The print_labels font size
tooltip_font_size The tooltip font size
title_font_size The title font size
legend_font_size The legend font size
no_data_font_size The no data font size
opacity The opacity of chart element
opacity_hover The opacity of chart element on mouse hover
transition Define the global transition property for animation
colors The serie color list
value_colors The print_values color list

Google font

It is possible to give a google font to any font family property by specifying the googlefont: prefix:

style = Style(font_family='googlefont:Raleway')

NB: this won’t work if you include the svg directly, you have to embed it because the google stylesheet is added in the XML processing instructions. (You could also manually add the google font in your HTML.)

Using a custom css

You can also specify a file containing a custom css for more customization. The css option is an array containing included css by default (except from base.css which is always included).

It supports local file names and external stylesheet too, just append your URI in the list.

(See the default css)

NB: Now the css rules are prefixed by an unique id, to prevent collisions when including several svg directly into a web page. You can disable it with the no_prefix option.

from tempfile import NamedTemporaryFile
custom_css = '''
  {{ id }}text {
    fill: green;
    font-family: monospace;
  }
  {{ id }}.legends .legend text {
    font-size: {{ font_sizes.legend }};
  }
  {{ id }}.axis {
    stroke: #666;
  }
  {{ id }}.axis text {
    font-size: {{ font_sizes.label }};
    font-family: sans;
    stroke: none;
  }
  {{ id }}.axis.y text {
    text-anchor: end;
  }
  {{ id }}#tooltip text {
    font-size: {{ font_sizes.tooltip }};
  }
  {{ id }}.dot {
    fill: yellow;
  }
  {{ id }}.color-0 {
    stroke: #ff1100;
    fill: #ff1100;
  }
  {{ id }}.color-1 {
    stroke: #ffee00;
    fill: #ffee00;
  }
  {{ id }}.color-2 {
    stroke: #66bb44;
    fill: #66bb44;
  }
  {{ id }}.color-3 {
    stroke: #88bbdd;
    fill: #88bbdd;
  }
  {{ id }}.color-4 {
    stroke: #0000ff;
    fill: #0000ff;
  }
'''
custom_css_file = '/tmp/pygal_custom_style.css'
with open(custom_css_file, 'w') as f:
  f.write(custom_css)
config = pygal.Config(fill=True, interpolate='cubic')
config.css.append('file://' + custom_css_file)
chart = pygal.StackedLine(config)
chart.add('A', [1, 3,  5, 16, 13, 3,  7])
chart.add('B', [5, 2,  3,  2,  5, 7, 17])
chart.add('C', [6, 10, 9,  7,  3, 1,  0])
chart.add('D', [2,  3, 5,  9, 12, 9,  5])
chart.add('E', [7,  4, 2,  1,  2, 10, 0])
chart.render()