pygal icon indicating copy to clipboard operation
pygal copied to clipboard

pygal charts won't render. Throws up a long xml/svg message

Open shivendra90 opened this issue 6 years ago • 1 comments

I'm trying to render a simple pie chart in one of my jupyter notebooks. While installing pygal, I also installed all listed dependencies with it. But when trying to render it, I get a long message, It's not an error but raw metadata. Maybe something is missing that is not rendering completely.

pie_chart = pygal.Pie(inner_radius=0.5)
pie_chart.add("25-29", binned_age.iloc[0])
pie_chart.add("22-24", binned_age.iloc[1])
pie_chart.add("30-34", binned_age.iloc[2])
pie_chart.add("18-21", binned_age.iloc[3])
pie_chart.add("35-39", binned_age.iloc[4])
pie_chart.add("40-44", binned_age.iloc[5])
pie_chart.add("45-49", binned_age.iloc[6])
pie_chart.add("50-54", binned_age.iloc[7])
pie_chart.add("55-59", binned_age.iloc[8])
pie_chart.add("60-69", binned_age.iloc[9])
pie_chart.add("70+", binned_age.iloc[10])
pie_chart.render()

Running this returns:

b'<?xml version=\'1.0\' encoding=\'utf-8\'?>\n<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9" class="pygal-chart" viewBox="0 0 800 600"><!--Generated with pygal 2.4.0 (lxml) \xc2\xa9Kozea 2012-2016 on 2019-12-05--><!--http://pygal.org--><!--http://github.com/Kozea/pygal--><defs><style type="text/css">#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9{-webkit-user-select:none;-webkit-font-smoothing:antialiased;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .title{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .legends .legend text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis text.major{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay text.value{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay text.label{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .tooltip{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 text.no_data{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:64px}\n#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9{background-color:rgba(249,249,249,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 path,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 line,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 rect,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 circle{-webkit-transition:150ms;-moz-transition:150ms;transition:150ms}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .graph &gt; .background{fill:rgba(249,249,249,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .plot &gt; .background{fill:rgba(255,255,255,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .graph{fill:rgba(0,0,0,.87)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 text.no_data{fill:rgba(0,0,0,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .title{fill:rgba(0,0,0,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .legends .legend text{fill:rgba(0,0,0,.87)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .legends .legend:hover text{fill:rgba(0,0,0,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis .line{stroke:rgba(0,0,0,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis .guide.line{stroke:rgba(0,0,0,.54)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis .major.line{stroke:rgba(0,0,0,.87)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis text.major{fill:rgba(0,0,0,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis.y .guides:hover .guide.line,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .line-graph .axis.x .guides:hover .guide.line,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .stackedline-graph .axis.x .guides:hover .guide.line,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .xy-graph .axis.x .guides:hover .guide.line{stroke:rgba(0,0,0,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis .guides:hover text{fill:rgba(0,0,0,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .reactive{fill-opacity:.7;stroke-opacity:.8}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .ci{stroke:rgba(0,0,0,.87)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .reactive.active,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .active .reactive{fill-opacity:.8;stroke-opacity:.9;stroke-width:4}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .ci .reactive.active{stroke-width:1.5}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .series text{fill:rgba(0,0,0,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .tooltip rect{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,1);-webkit-transition:opacity 150ms;-moz-transition:opacity 150ms;transition:opacity 150ms}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .tooltip .label{fill:rgba(0,0,0,.87)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .tooltip .label{fill:rgba(0,0,0,.87)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .tooltip .legend{font-size:.8em;fill:rgba(0,0,0,.54)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .tooltip .x_label{font-size:.6em;fill:rgba(0,0,0,1)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .tooltip .xlink{font-size:.5em;text-decoration:underline}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .tooltip .value{font-size:1.5em}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .bound{font-size:.5em}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .max-value{font-size:.75em;fill:rgba(0,0,0,.54)}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .map-element{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,.54) !important}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .map-element .reactive{fill-opacity:inherit;stroke-opacity:inherit}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-0,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-0 a:visited{stroke:#F44336;fill:#F44336}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-1,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-1 a:visited{stroke:#3F51B5;fill:#3F51B5}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-2,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-2 a:visited{stroke:#009688;fill:#009688}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-3,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-3 a:visited{stroke:#FFC107;fill:#FFC107}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-4,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-4 a:visited{stroke:#FF5722;fill:#FF5722}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-5,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-5 a:visited{stroke:#9C27B0;fill:#9C27B0}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-6,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-6 a:visited{stroke:#03A9F4;fill:#03A9F4}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-7,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-7 a:visited{stroke:#8BC34A;fill:#8BC34A}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-8,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-8 a:visited{stroke:#FF9800;fill:#FF9800}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-9,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-9 a:visited{stroke:#E91E63;fill:#E91E63}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-10,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .color-10 a:visited{stroke:#2196F3;fill:#2196F3}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay .color-0 text{fill:black}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay .color-1 text{fill:black}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay .color-2 text{fill:black}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay .color-3 text{fill:black}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay .color-4 text{fill:black}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay .color-5 text{fill:black}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay .color-6 text{fill:black}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay .color-7 text{fill:black}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay .color-8 text{fill:black}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay .color-9 text{fill:black}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .text-overlay .color-10 text{fill:black}\n#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 text.no_data{text-anchor:middle}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .guide.line{fill:none}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .centered{text-anchor:middle}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .title{text-anchor:middle}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .legends .legend text{fill-opacity:1}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis.x text{text-anchor:middle}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis.x:not(.web) text[transform]{text-anchor:start}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis.x:not(.web) text[transform].backwards{text-anchor:end}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis.y text{text-anchor:end}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis.y text[transform].backwards{text-anchor:start}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis.y2 text{text-anchor:start}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis.y2 text[transform].backwards{text-anchor:end}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis .guide.line{stroke-dasharray:4,4}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis .major.guide.line{stroke-dasharray:6,6}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .horizontal .axis.y .guide.line,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .horizontal .axis.y2 .guide.line,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .vertical .axis.x .guide.line{opacity:0}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .horizontal .axis.always_show .guide.line,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .vertical .axis.always_show .guide.line{opacity:1 !important}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis.y .guides:hover .guide.line,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis.y2 .guides:hover .guide.line,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis.x .guides:hover .guide.line{opacity:1}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .axis .guides:hover text{opacity:1}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .nofill{fill:none}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .subtle-fill{fill-opacity:.2}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .dot{stroke-width:1px;fill-opacity:1}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .dot.active{stroke-width:5px}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .dot.negative{fill:transparent}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 text,#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 tspan{stroke:none !important}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .series text.active{opacity:1}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .tooltip rect{fill-opacity:.95;stroke-width:.5}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .tooltip text{fill-opacity:1}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .showable{visibility:hidden}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .showable.shown{visibility:visible}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .gauge-background{fill:rgba(229,229,229,1);stroke:none}#chart-aacf0a68-b784-4961-aafd-bfbdbdf6c4f9 .bg-lines{stroke:rgba(249,249,249,1);stroke-width:2px}</style><script type="text/javascript">window.pygal = window.pygal || {};window.pygal.config = window.pygal.config || {};window.pygal.config[\'aacf0a68-b784-4961-aafd-bfbdbdf6c4f9\'] = {"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": 600, "include_x_axis": false, "inner_radius": 0.5, "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": false, "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": "rgba(249, 249, 249, 1)", "ci_colors": [], "colors": ["#F44336", "#3F51B5", "#009688", "#FFC107", "#FF5722", "#9C27B0", "#03A9F4", "#8BC34A", "#FF9800", "#E91E63", "#2196F3", "#4CAF50", "#FFEB3B", "#673AB7", "#00BCD4", "#CDDC39", "#9E9E9E", "#607D8B"], "font_family": "Consolas, \\"Liberation Mono\\", Menlo, Courier, monospace", "foreground": "rgba(0, 0, 0, .87)", "foreground_strong": "rgba(0, 0, 0, 1)", "foreground_subtle": "rgba(0, 0, 0, .54)", "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(255, 255, 255, 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": null, "tooltip_border_radius": 0, "tooltip_fancy_mode": true, "truncate_label": null, "truncate_legend": null, "width": 800, "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": ["25-29", "22-24", "30-34", "18-21", "35-39", "40-44", "45-49", "50-54", "55-59", "60-69", "70+"]}</script><script type="text/javascript" xlink:href="https://kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"/></defs><title>Pygal</title><g class="graph pie-graph vertical"><rect x="0" y="0" width="800" height="600" class="background"/><g transform="translate(84, 20)" class="plot"><rect x="0" y="0" width="696.0" height="560" class="background"/><g class="series serie-0 color-0"><g class="slices"><g class="slice"><path d="M348.000000 28.000000 A252.000000 252.000000 0 0 1 597.163812 242.298611 L486.424340 259.054784 A140.000000 140.000000 0 0 0 348.000000 140.000000 z" class="slice reactive tooltip-trigger"/><desc class="value">4458</desc><desc class="x centered">475.80577577883696</desc><desc class="y centered">131.40092975536604</desc></g></g></g><g class="series serie-1 color-1"><g class="slices"><g class="slice"><path d="M597.163812 242.298611 A252.000000 252.000000 0 0 1 484.109418 492.080707 L423.616343 397.822615 A140.000000 140.000000 0 0 0 486.424340 259.054784 z" class="slice reactive tooltip-trigger"/><desc class="value">3610</desc><desc class="x centered">526.5616512494626</desc><desc class="y centered">360.81916049468276</desc></g></g></g><g class="series serie-2 color-2"><g class="slices"><g class="slice"><path d="M484.109418 492.080707 A252.000000 252.000000 0 0 1 244.400675 509.719785 L290.444819 407.622103 A140.000000 140.000000 0 0 0 423.616343 397.822615 z" class="slice reactive tooltip-trigger"/><desc class="value">3120</desc><desc class="x centered">362.383859557932</desc><desc class="y centered">475.4714930219179</desc></g></g></g><g class="series serie-3 color-3"><g class="slices"><g class="slice"><path d="M244.400675 509.719785 A252.000000 252.000000 0 0 1 111.262376 366.367225 L216.479098 327.981791 A140.000000 140.000000 0 0 0 290.444819 407.622103 z" class="slice reactive tooltip-trigger"/><desc class="value">2502</desc><desc class="x centered">204.3850678995124</desc><desc class="y centered">413.3819750857376</desc></g></g></g><g class="series serie-4 color-4"><g class="slices"><g class="slice"><path d="M111.262376 366.367225 A252.000000 252.000000 0 0 1 108.418271 201.868091 L214.899039 236.593384 A140.000000 140.000000 0 0 0 216.479098 327.981791 z" class="slice reactive tooltip-trigger"/><desc class="value">2087</desc><desc class="x centered">152.02928820854126</desc><desc class="y centered">283.3882325700903</desc></g></g></g><g class="series serie-5 color-5"><g class="slices"><g class="slice"><path d="M108.418271 201.868091 A252.000000 252.000000 0 0 1 167.755597 103.886527 L247.864221 182.159182 A140.000000 140.000000 0 0 0 214.899039 236.593384 z" class="slice reactive tooltip-trigger"/><desc class="value">1439</desc><desc class="x centered">180.34677156010972</desc><desc class="y centered">178.46973360774646</desc></g></g></g><g class="series serie-6 color-6"><g class="slices"><g class="slice"><path d="M167.755597 103.886527 A252.000000 252.000000 0 0 1 228.386636 58.196837 L281.548131 156.776021 A140.000000 140.000000 0 0 0 247.864221 182.159182 z" class="slice reactive tooltip-trigger"/><desc class="value">949</desc><desc class="x centered">230.04273129605332</desc><desc class="y centered">123.46858858393654</desc></g></g></g><g class="series serie-7 color-7"><g class="slices"><g class="slice"><path d="M228.386636 58.196837 A252.000000 252.000000 0 0 1 279.799432 37.404282 L310.110796 145.224601 A140.000000 140.000000 0 0 0 281.548131 156.776021 z" class="slice reactive tooltip-trigger"/><desc class="value">692</desc><desc class="x centered">274.51501853093094</desc><desc class="y centered">98.29706249350127</desc></g></g></g><g class="series serie-8 color-8"><g class="slices"><g class="slice"><path d="M279.799432 37.404282 A252.000000 252.000000 0 0 1 312.940749 30.450708 L328.522638 141.361505 A140.000000 140.000000 0 0 0 310.110796 145.224601 z" class="slice reactive tooltip-trigger"/><desc class="value">422</desc><desc class="x centered">307.7524566343045</desc><desc class="y centered">88.17681252511088</desc></g></g></g><g class="series serie-9 color-9"><g class="slices"><g class="slice"><path d="M312.940749 30.450708 A252.000000 252.000000 0 0 1 339.970915 28.127942 L343.539397 140.071079 A140.000000 140.000000 0 0 0 328.522638 141.361505 z" class="slice reactive tooltip-trigger"/><desc class="value">338</desc><desc class="x centered">331.2190953213931</desc><desc class="y centered">84.71968548220866</desc></g></g></g><g class="series serie-10 color-10"><g class="slices"><g class="slice"><path d="M339.970915 28.127942 A252.000000 252.000000 0 0 1 348.000000 28.000000 L348.000000 140.000000 A140.000000 140.000000 0 0 0 343.539397 140.071079 z" class="slice reactive tooltip-trigger"/><desc class="value">100</desc><desc class="x centered">344.8771815867889</desc><desc class="y centered">84.02487911686822</desc></g></g></g></g><g class="titles"/><g transform="translate(84, 20)" class="plot overlay"><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 class="series serie-4 color-4"/><g class="series serie-5 color-5"/><g class="series serie-6 color-6"/><g class="series serie-7 color-7"/><g class="series serie-8 color-8"/><g class="series serie-9 color-9"/><g class="series serie-10 color-10"/></g><g transform="translate(84, 20)" class="plot text-overlay"><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 class="series serie-4 color-4"/><g class="series serie-5 color-5"/><g class="series serie-6 color-6"/><g class="series serie-7 color-7"/><g class="series serie-8 color-8"/><g class="series serie-9 color-9"/><g class="series serie-10 color-10"/></g><g transform="translate(84, 20)" class="plot tooltip-overlay"><g transform="translate(0 0)" style="opacity: 0" class="tooltip"><rect rx="0" ry="0" width="0" height="0" class="tooltip-box"/><g class="text"/></g></g><g transform="translate(10, 30)" class="legends"><g id="activate-serie-0" class="legend reactive activate-serie"><rect x="0.0" y="1.0" width="12" height="12" class="color-0 reactive"/><text x="17.0" y="11.2">25-29</text></g><g id="activate-serie-1" class="legend reactive activate-serie"><rect x="0.0" y="22.0" width="12" height="12" class="color-1 reactive"/><text x="17.0" y="32.2">22-24</text></g><g id="activate-serie-2" class="legend reactive activate-serie"><rect x="0.0" y="43.0" width="12" height="12" class="color-2 reactive"/><text x="17.0" y="53.2">30-34</text></g><g id="activate-serie-3" class="legend reactive activate-serie"><rect x="0.0" y="64.0" width="12" height="12" class="color-3 reactive"/><text x="17.0" y="74.2">18-21</text></g><g id="activate-serie-4" class="legend reactive activate-serie"><rect x="0.0" y="85.0" width="12" height="12" class="color-4 reactive"/><text x="17.0" y="95.2">35-39</text></g><g id="activate-serie-5" class="legend reactive activate-serie"><rect x="0.0" y="106.0" width="12" height="12" class="color-5 reactive"/><text x="17.0" y="116.2">40-44</text></g><g id="activate-serie-6" class="legend reactive activate-serie"><rect x="0.0" y="127.0" width="12" height="12" class="color-6 reactive"/><text x="17.0" y="137.2">45-49</text></g><g id="activate-serie-7" class="legend reactive activate-serie"><rect x="0.0" y="148.0" width="12" height="12" class="color-7 reactive"/><text x="17.0" y="158.2">50-54</text></g><g id="activate-serie-8" class="legend reactive activate-serie"><rect x="0.0" y="169.0" width="12" height="12" class="color-8 reactive"/><text x="17.0" y="179.2">55-59</text></g><g id="activate-serie-9" class="legend reactive activate-serie"><rect x="0.0" y="190.0" width="12" height="12" class="color-9 reactive"/><text x="17.0" y="200.2">60-69</text></g><g id="activate-serie-10" class="legend reactive activate-serie"><rect x="0.0" y="211.0" width="12" height="12" class="color-10 reactive"/><text x="17.0" y="221.2">70+</text></g></g><g transform="translate(790, 30)" class="legends"/></g></svg>'

Can someone point me out a solution?

shivendra90 avatar Dec 05 '19 14:12 shivendra90

Take a look at this example

filak avatar Jan 26 '20 16:01 filak