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 foreground 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()