Python to generate nice looking SVG graph http://pygal.org/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

157 lines
5.1 KiB

Custom Styles
=============
pygal provides 2 ways to customize styles:
Using Style class
-----------------
You can instantiate the ``Style`` class with some customizations for quick styling:
.. pygal-code::
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])
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:
.. code-block:: python
style = Style(font_family='googlefont:Raleway')
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 <https://github.com/Kozea/pygal/blob/master/pygal/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.
.. pygal-code::
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(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])