mirror of https://github.com/Kozea/pygal.git
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
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]) |
|
|
|
|
|
|