bar_chart.png

<?xml version='1.0' encoding='utf-8'?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="chart-63980db0-f7d7-4c07-a385-d6030f0134ac" class="pygal-chart" viewBox="0 0 500 700"><!--Generated with pygal 2.4.0 (lxml) ©Kozea 2012-2016 on 2019-02-18--><!--http://pygal.org--><!--http://github.com/Kozea/pygal--><defs><style type="text/css">#chart-63980db0-f7d7-4c07-a385-d6030f0134ac{-webkit-user-select:none;-webkit-font-smoothing:antialiased;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .title{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .legends .legend text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis text.major{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .text-overlay text.value{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .text-overlay text.label{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .tooltip{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac text.no_data{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:64px}
#chart-63980db0-f7d7-4c07-a385-d6030f0134ac{background-color:white}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac path,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac line,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac rect,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac circle{-webkit-transition:150ms;-moz-transition:150ms;transition:150ms}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .graph &gt; .background{fill:white}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .plot &gt; .background{fill:rgba(0,0,255,0.1)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .graph{fill:rgba(0,0,0,0.7)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac text.no_data{fill:rgba(0,0,0,0.9)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .title{fill:rgba(0,0,0,0.9)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .legends .legend text{fill:rgba(0,0,0,0.7)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .legends .legend:hover text{fill:rgba(0,0,0,0.9)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis .line{stroke:rgba(0,0,0,0.9)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis .guide.line{stroke:rgba(0,0,0,0.5)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis .major.line{stroke:rgba(0,0,0,0.7)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis text.major{fill:rgba(0,0,0,0.9)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis.y .guides:hover .guide.line,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .line-graph .axis.x .guides:hover .guide.line,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .stackedline-graph .axis.x .guides:hover .guide.line,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .xy-graph .axis.x .guides:hover .guide.line{stroke:rgba(0,0,0,0.9)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis .guides:hover text{fill:rgba(0,0,0,0.9)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .reactive{fill-opacity:.7;stroke-opacity:.8}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .ci{stroke:rgba(0,0,0,0.7)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .reactive.active,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .active .reactive{fill-opacity:.8;stroke-opacity:.9;stroke-width:4}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .ci .reactive.active{stroke-width:1.5}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .series text{fill:rgba(0,0,0,0.9)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .tooltip rect{fill:rgba(0,0,255,0.1);stroke:rgba(0,0,0,0.9);-webkit-transition:opacity 150ms;-moz-transition:opacity 150ms;transition:opacity 150ms}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .tooltip .label{fill:rgba(0,0,0,0.7)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .tooltip .label{fill:rgba(0,0,0,0.7)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .tooltip .legend{font-size:.8em;fill:rgba(0,0,0,0.5)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .tooltip .x_label{font-size:.6em;fill:rgba(0,0,0,0.9)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .tooltip .xlink{font-size:.5em;text-decoration:underline}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .tooltip .value{font-size:1.5em}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .bound{font-size:.5em}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .max-value{font-size:.75em;fill:rgba(0,0,0,0.5)}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .map-element{fill:rgba(0,0,255,0.1);stroke:rgba(0,0,0,0.5) !important}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .map-element .reactive{fill-opacity:inherit;stroke-opacity:inherit}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .color-0,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .color-0 a:visited{stroke:#242424;fill:#242424}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .color-1,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .color-1 a:visited{stroke:#9f6767;fill:#9f6767}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .color-2,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .color-2 a:visited{stroke:#92ac68;fill:#92ac68}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .color-3,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .color-3 a:visited{stroke:#d0d293;fill:#d0d293}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .text-overlay .color-0 text{fill:white}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .text-overlay .color-1 text{fill:black}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .text-overlay .color-2 text{fill:black}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .text-overlay .color-3 text{fill:black}
#chart-63980db0-f7d7-4c07-a385-d6030f0134ac text.no_data{text-anchor:middle}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .guide.line{fill:none}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .centered{text-anchor:middle}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .title{text-anchor:middle}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .legends .legend text{fill-opacity:1}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis.x text{text-anchor:middle}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis.x:not(.web) text[transform]{text-anchor:start}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis.x:not(.web) text[transform].backwards{text-anchor:end}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis.y text{text-anchor:end}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis.y text[transform].backwards{text-anchor:start}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis.y2 text{text-anchor:start}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis.y2 text[transform].backwards{text-anchor:end}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis .guide.line{stroke-dasharray:4,4}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis .major.guide.line{stroke-dasharray:6,6}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .horizontal .axis.y .guide.line,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .horizontal .axis.y2 .guide.line,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .vertical .axis.x .guide.line{opacity:0}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .horizontal .axis.always_show .guide.line,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .vertical .axis.always_show .guide.line{opacity:1 !important}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis.y .guides:hover .guide.line,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis.y2 .guides:hover .guide.line,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis.x .guides:hover .guide.line{opacity:1}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .axis .guides:hover text{opacity:1}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .nofill{fill:none}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .subtle-fill{fill-opacity:.2}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .dot{stroke-width:1px;fill-opacity:1}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .dot.active{stroke-width:5px}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .dot.negative{fill:transparent}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac text,#chart-63980db0-f7d7-4c07-a385-d6030f0134ac tspan{stroke:none !important}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .series text.active{opacity:1}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .tooltip rect{fill-opacity:.95;stroke-width:.5}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .tooltip text{fill-opacity:1}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .showable{visibility:hidden}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .showable.shown{visibility:visible}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .gauge-background{fill:rgba(229,229,229,1);stroke:none}#chart-63980db0-f7d7-4c07-a385-d6030f0134ac .bg-lines{stroke:white;stroke-width:2px}</style><script type="text/javascript">window.pygal = window.pygal || {};window.pygal.config = window.pygal.config || {};window.pygal.config['63980db0-f7d7-4c07-a385-d6030f0134ac'] = {"allow_interruptions": false, "box_mode": "extremes", "classes": ["pygal-chart"], "css": ["file://style.css", "file://graph.css"], "defs": [], "disable_xml_declaration": false, "dots_size": 2.5, "dynamic_print_values": false, "explicit_size": false, "fill": false, "force_uri_protocol": "https", "formatter": null, "half_pie": false, "height": 700, "include_x_axis": false, "inner_radius": 0, "interpolate": null, "interpolation_parameters": {}, "interpolation_precision": 250, "inverse_y_axis": false, "js": ["//kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"], "legend_at_bottom": true, "legend_at_bottom_columns": null, "legend_box_size": 12, "logarithmic": false, "margin": 20, "margin_bottom": null, "margin_left": null, "margin_right": null, "margin_top": null, "max_scale": 16, "min_scale": 4, "missing_value_fill_truncation": "x", "no_data_text": "No data", "no_prefix": false, "order_min": null, "pretty_print": false, "print_labels": false, "print_values": false, "print_values_position": "center", "print_zeroes": true, "range": null, "rounded_bars": null, "secondary_range": null, "show_dots": true, "show_legend": true, "show_minor_x_labels": true, "show_minor_y_labels": true, "show_only_major_dots": false, "show_x_guides": false, "show_x_labels": true, "show_y_guides": true, "show_y_labels": true, "spacing": 10, "stack_from_top": false, "strict": false, "stroke": true, "stroke_style": null, "style": {"background": "white", "ci_colors": [], "colors": ["#242424", "#9f6767", "#92ac68", "#d0d293", "#9aacc3", "#bb77a4", "#77bbb5", "#777777"], "font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "foreground": "rgba(0, 0, 0, 0.7)", "foreground_strong": "rgba(0, 0, 0, 0.9)", "foreground_subtle": "rgba(0, 0, 0, 0.5)", "guide_stroke_dasharray": "4,4", "label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "label_font_size": 10, "legend_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "legend_font_size": 14, "major_guide_stroke_dasharray": "6,6", "major_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "major_label_font_size": 10, "no_data_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "no_data_font_size": 64, "opacity": ".7", "opacity_hover": ".8", "plot_background": "rgba(0, 0, 255, 0.1)", "stroke_opacity": ".8", "stroke_opacity_hover": ".9", "title_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "title_font_size": 16, "tooltip_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "tooltip_font_size": 14, "transition": "150ms", "value_background": "rgba(229, 229, 229, 1)", "value_colors": [], "value_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_font_size": 16, "value_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_label_font_size": 10}, "title": "my first chart", "tooltip_border_radius": 0, "tooltip_fancy_mode": true, "truncate_label": null, "truncate_legend": null, "width": 500, "x_label_rotation": 0, "x_labels": null, "x_labels_major": null, "x_labels_major_count": null, "x_labels_major_every": null, "x_title": null, "xrange": null, "y_label_rotation": 0, "y_labels": null, "y_labels_major": null, "y_labels_major_count": null, "y_labels_major_every": null, "y_title": null, "zero": 0, "legends": ["a", "b", "c", "d"]}</script><script type="text/javascript" xlink:href="https://kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"/></defs><title>my first chart</title><g class="graph bar-graph vertical"><rect class="background" height="700" width="500" x="0" y="0"/><g class="plot" transform="translate(42, 46)"><rect class="background" height="589.0" width="438.0" x="0" y="0"/><g class="axis y always_show"><g class="guides"><path class="axis major line" d="M0.000000 577.673077 h438.000000"/><text class="major" x="-5" y="581.1730769230769">0</text><title>0</title></g><g class="guides"><path class="guide line" d="M0.000000 474.701049 h438.000000"/><text class="" x="-5" y="478.20104895104896">10</text><title>10</title></g><g class="guides"><path class="guide line" d="M0.000000 371.729021 h438.000000"/><text class="" x="-5" y="375.22902097902096">20</text><title>20</title></g><g class="guides"><path class="guide line" d="M0.000000 268.756993 h438.000000"/><text class="" x="-5" y="272.256993006993">30</text><title>30</title></g><g class="guides"><path class="guide line" d="M0.000000 165.784965 h438.000000"/><text class="" x="-5" y="169.284965034965">40</text><title>40</title></g><g class="guides"><path class="major guide line" d="M0.000000 62.812937 h438.000000"/><text class="major" x="-5" y="66.31293706293707">50</text><title>50</title></g></g><g class="series serie-0 color-0"><g class="bars"><g class="bar"><rect class="rect reactive tooltip-trigger" height="350.1048951048951" rx="0" ry="0" width="20.383846153846154" x="16.130192307692308" y="227.5681818181818"/><desc class="value">34</desc><desc class="x centered">26.322115384615387</desc><desc class="y centered">402.62062937062933</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="226.53846153846155" rx="0" ry="0" width="20.383846153846154" x="121.41865384615386" y="351.13461538461536"/><desc class="value">22</desc><desc class="x centered">131.61057692307693</desc><desc class="y centered">464.40384615384613</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="566.3461538461538" rx="0" ry="0" width="20.383846153846154" x="226.70711538461538" y="11.326923076923094"/><desc class="value">55</desc><desc class="x centered">236.89903846153845</desc><desc class="y centered">294.5</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="123.56643356643355" rx="0" ry="0" width="20.383846153846154" x="331.99557692307684" y="454.10664335664336"/><desc class="value">12</desc><desc class="x centered">342.18749999999994</desc><desc class="y centered">515.8898601398602</desc></g></g></g><g class="series serie-1 color-1"><g class="bars"><g class="bar"><rect class="rect reactive tooltip-trigger" height="350.1048951048951" rx="0" ry="0" width="20.383846153846154" x="39.293653846153845" y="227.5681818181818"/><desc class="value">34</desc><desc class="x centered">49.48557692307692</desc><desc class="y centered">402.62062937062933</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="226.53846153846155" rx="0" ry="0" width="20.383846153846154" x="144.5821153846154" y="351.13461538461536"/><desc class="value">22</desc><desc class="x centered">154.77403846153848</desc><desc class="y centered">464.40384615384613</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="566.3461538461538" rx="0" ry="0" width="20.383846153846154" x="249.87057692307692" y="11.326923076923094"/><desc class="value">55</desc><desc class="x centered">260.0625</desc><desc class="y centered">294.5</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="123.56643356643355" rx="0" ry="0" width="20.383846153846154" x="355.1590384615384" y="454.10664335664336"/><desc class="value">12</desc><desc class="x centered">365.3509615384615</desc><desc class="y centered">515.8898601398602</desc></g></g></g><g class="series serie-2 color-2"><g class="bars"><g class="bar"><rect class="rect reactive tooltip-trigger" height="350.1048951048951" rx="0" ry="0" width="20.383846153846154" x="62.45711538461538" y="227.5681818181818"/><desc class="value">34</desc><desc class="x centered">72.64903846153845</desc><desc class="y centered">402.62062937062933</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="226.53846153846155" rx="0" ry="0" width="20.383846153846154" x="167.74557692307692" y="351.13461538461536"/><desc class="value">22</desc><desc class="x centered">177.9375</desc><desc class="y centered">464.40384615384613</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="566.3461538461538" rx="0" ry="0" width="20.383846153846154" x="273.03403846153844" y="11.326923076923094"/><desc class="value">55</desc><desc class="x centered">283.22596153846155</desc><desc class="y centered">294.5</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="123.56643356643355" rx="0" ry="0" width="20.383846153846154" x="378.32249999999993" y="454.10664335664336"/><desc class="value">12</desc><desc class="x centered">388.51442307692304</desc><desc class="y centered">515.8898601398602</desc></g></g></g><g class="series serie-3 color-3"><g class="bars"><g class="bar"><rect class="rect reactive tooltip-trigger" height="350.1048951048951" rx="0" ry="0" width="20.383846153846154" x="85.62057692307692" y="227.5681818181818"/><desc class="value">34</desc><desc class="x centered">95.8125</desc><desc class="y centered">402.62062937062933</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="226.53846153846155" rx="0" ry="0" width="20.383846153846154" x="190.90903846153847" y="351.13461538461536"/><desc class="value">22</desc><desc class="x centered">201.10096153846155</desc><desc class="y centered">464.40384615384613</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="566.3461538461538" rx="0" ry="0" width="20.383846153846154" x="296.19749999999993" y="11.326923076923094"/><desc class="value">55</desc><desc class="x centered">306.38942307692304</desc><desc class="y centered">294.5</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="123.56643356643355" rx="0" ry="0" width="20.383846153846154" x="401.4859615384615" y="454.10664335664336"/><desc class="value">12</desc><desc class="x centered">411.6778846153846</desc><desc class="y centered">515.8898601398602</desc></g></g></g></g><g class="titles"><text class="title plot_title" x="250.0" y="26">my first chart</text></g><g class="plot overlay" transform="translate(42, 46)"><g class="series serie-0 color-0"/><g class="series serie-1 color-1"/><g class="series serie-2 color-2"/><g class="series serie-3 color-3"/></g><g class="plot text-overlay" transform="translate(42, 46)"><g class="series serie-0 color-0"/><g class="series serie-1 color-1"/><g class="series serie-2 color-2"/><g class="series serie-3 color-3"/></g><g class="plot tooltip-overlay" transform="translate(42, 46)"><g class="tooltip" style="opacity: 0" transform="translate(0 0)"><rect class="tooltip-box" height="0" rx="0" ry="0" width="0"/><g class="text"/></g></g><g class="legends" transform="translate(52, 645)"><g class="legend reactive activate-serie" id="activate-serie-0"><rect class="color-0 reactive" height="12" width="12" x="0.0" y="1.0"/><text x="17.0" y="11.2">a</text></g><g class="legend reactive activate-serie" id="activate-serie-1"><rect class="color-1 reactive" height="12" width="12" x="219.0" y="1.0"/><text x="236.0" y="11.2">b</text></g><g class="legend reactive activate-serie" id="activate-serie-2"><rect class="color-2 reactive" height="12" width="12" x="0.0" y="22.0"/><text x="17.0" y="32.2">c</text></g><g class="legend reactive activate-serie" id="activate-serie-3"><rect class="color-3 reactive" height="12" width="12" x="219.0" y="22.0"/><text x="236.0" y="32.2">d</text></g></g></g></svg>