Animate
Font
Stroke
| Fill | Label | |||
|---|---|---|---|---|
<?xml version="1.0" encoding="UTF-8"?>
−
<dia:diagram type="barchart" width="820" height="500" orientation="horizontal" animate="true" xmlns:ds="http://www.bootstrap-data.org" xmlns:dia="http://www.bootstrap-extensions.org">
<dia:font-default face="arial" size="14"/>
−
<dia:frame stroke-color="" stroke-weight="1" stroke-dash="">
−
<dia:spacing>
<dia:margins all="0" top="50"/>
<dia:paddings horizontal="110"/>
</dia:spacing>
[2 lines]
</dia:frame>
[3 lines]
<dia:grid type="cell" stroke-color="grey" stroke-weight="1" stroke-dash="5,2"/>
−
<dia:distribution>
−
<dia:path inner-margin="1" between-margin="2" scale="#percent" color="white">
−
<dia:axis position="left" stroke-color="blue" stroke-weight="2" stroke-dash="" color="darkgrey" face="arial" size="12" double-labels="true">
<dia:markers stroke-color="black" stroke-weight="1" length="2"/>
<dia:title face="arial" color="black" size="14">Rights</dia:title>
</dia:axis>
[2 lines]
<dia:value code="1">Education</dia:value>
<dia:value code="2">Health</dia:value>
<dia:value code="3">Cross Borders</dia:value>
<dia:value code="4">Land</dia:value>
<dia:value code="5">Justice</dia:value>
<dia:value code="6">Poverty</dia:value>
<dia:value code="7">Employment</dia:value>
<dia:value code="8">Public Life</dia:value>
<dia:value code="9">Language</dia:value>
<dia:value code="10">Self-governance</dia:value>
</dia:path>
[13 lines]
−
<dia:serie type="bar">
<dia:title face="arial" color="red" size="14">National</dia:title>
−
<dia:path select="table/row" match="@id" value="cell[1]" start-fill-color="green" fill-color="blue" stroke-color="red" stroke-weight="0">
<dia:stack select="sub" match="@id" value="text()"/>
</dia:path>
[1 lines]
<dia:double select="table/row" match="@id" value="cell"/>
</dia:serie>
[4 lines]
</dia:distribution>
[19 lines]
−
<dia:scale name="percent" min="0" max="100" step="20" substep="5" base="0" face="arial" size="10" color="white">
−
<dia:axis position="left" stroke-color="blue" stroke-weight="2" stroke-dash="" color="black" face="arial" size="10">
<dia:markers stroke-color="green" stroke-weight="1" length="3"/>
<dia:title face="arial" color="black" size="14" align="labels">%</dia:title>
</dia:axis>
[2 lines]
−
<dia:labels>
<dia:value code="0">0</dia:value>
<dia:value code="20">20</dia:value>
<dia:value code="40">40</dia:value>
<dia:value code="60">60</dia:value>
<dia:value code="80">80</dia:value>
<dia:value code="100">100</dia:value>
</dia:labels>
[6 lines]
</dia:scale>
[10 lines]
−
<dia:scale name="dollar" min="100" max="1100" step="200" base="50">
−
<dia:axis position="right" stroke-color="blue" stroke-weight="2" stroke-dash="" color="black" face="arial" size="10">
<dia:markers stroke-color="green" stroke-weight="1" length="3"/>
<dia:title face="arial" color="black" size="14" align="labels">USD</dia:title>
</dia:axis>
[2 lines]
−
<dia:labels>
<dia:value code="0"/>
<dia:value code="20">200</dia:value>
<dia:value code="40">400</dia:value>
<dia:value code="60">600</dia:value>
<dia:value code="80">800</dia:value>
<dia:value code="100">1000</dia:value>
</dia:labels>
[6 lines]
</dia:scale>
[10 lines]
</dia:diagram>
[48 lines]
| Source | |
|---|---|
Diagram
<?xml version="1.0" encoding="UTF-8"?>
−
<svg version="1.1" preserveAspectRatio="xMinYMin meet" class="svg-chart" viewBox="0 0 820 500" xmlns:ds="http://www.bootstrap-data.org" xmlns:dia="http://www.rapidweb.tools/diagram" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect class="chart-frame" x="0" y="0" width="820" height="500" fill="#FFFFFF" stroke="" stroke-width="1" stroke-dasharray="" stroke-dashoffset="" style="position:relative;margin:0px;margin-top:50px;"/>
−
<g class="chart-grid chart-x">
<line x1="170" x2="170" y1="32" y2="447" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="230" x2="230" y1="32" y2="447" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="290" x2="290" y1="32" y2="447" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="350" x2="350" y1="32" y2="447" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="410" x2="410" y1="32" y2="447" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="470" x2="470" y1="32" y2="447" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="530" x2="530" y1="32" y2="447" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="590" x2="590" y1="32" y2="447" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="650" x2="650" y1="32" y2="447" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[9 lines]
−
<g class="chart-grid chart-y">
<line x1="110" x2="710" y1="32" y2="32" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="115" y2="115" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="198" y2="198" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="281" y2="281" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="364" y2="364" stroke="grey" stroke-dasharray="5,2" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[5 lines]
−
<g class="chart-axis-x chart-markers">
<line x1="110" x2="110" y1="448" y2="452" stroke="black" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="170" x2="170" y1="448" y2="452" stroke="black" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="230" x2="230" y1="448" y2="452" stroke="black" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="290" x2="290" y1="448" y2="452" stroke="black" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="350" x2="350" y1="448" y2="452" stroke="black" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="410" x2="410" y1="448" y2="452" stroke="black" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="470" x2="470" y1="448" y2="452" stroke="black" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="530" x2="530" y1="448" y2="452" stroke="black" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="590" x2="590" y1="448" y2="452" stroke="black" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="650" x2="650" y1="448" y2="452" stroke="black" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="710" x2="710" y1="448" y2="452" stroke="black" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[11 lines]
−
<g class="chart-axis-x">
<line x1="108" x2="712" y1="448" y2="448" shape-rendering="geometricPrecision" stroke="blue" stroke-width="2" stroke-dasharray="" stroke-dashoffset=""/>
</g>
[1 lines]
−
<g class="chart-labels chart-labels-x">
<text class="chart-labels" x="140" y="469" fill="darkgrey" font-family="arial" font-size="12" text-anchor="middle" alignment-baseline="text-before-edge">Education</text>
<text class="chart-labels" x="200" y="487" fill="darkgrey" font-family="arial" font-size="12" text-anchor="middle" alignment-baseline="text-before-edge">Health</text>
<text class="chart-labels" x="260" y="469" fill="darkgrey" font-family="arial" font-size="12" text-anchor="middle" alignment-baseline="text-before-edge">Cross Borders</text>
<text class="chart-labels" x="320" y="487" fill="darkgrey" font-family="arial" font-size="12" text-anchor="middle" alignment-baseline="text-before-edge">Land</text>
<text class="chart-labels" x="380" y="469" fill="darkgrey" font-family="arial" font-size="12" text-anchor="middle" alignment-baseline="text-before-edge">Justice</text>
<text class="chart-labels" x="440" y="487" fill="darkgrey" font-family="arial" font-size="12" text-anchor="middle" alignment-baseline="text-before-edge">Poverty</text>
<text class="chart-labels" x="500" y="469" fill="darkgrey" font-family="arial" font-size="12" text-anchor="middle" alignment-baseline="text-before-edge">Employment</text>
<text class="chart-labels" x="560" y="487" fill="darkgrey" font-family="arial" font-size="12" text-anchor="middle" alignment-baseline="text-before-edge">Public Life</text>
<text class="chart-labels" x="620" y="469" fill="darkgrey" font-family="arial" font-size="12" text-anchor="middle" alignment-baseline="text-before-edge">Language</text>
<text class="chart-labels" x="680" y="487" fill="darkgrey" font-family="arial" font-size="12" text-anchor="middle" alignment-baseline="text-before-edge">Self-governance</text>
</g>
[10 lines]
−
<g class="chart-labels chart-title-x">
<text class="chart-labels" x="722" y="447" fill="black" font-family="arial" font-size="14" text-anchor="start" alignment-baseline="middle">Rights</text>
</g>
[1 lines]
−
<g class="chart-axis-y chart-markers">
<line x1="103" x2="108" y1="447" y2="447" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="103" x2="108" y1="364" y2="364" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="103" x2="108" y1="281" y2="281" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="103" x2="108" y1="198" y2="198" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="103" x2="108" y1="115" y2="115" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="103" x2="108" y1="32" y2="32" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[6 lines]
−
<g class="chart-axis-y">
<line x1="109" x2="109" y1="447" y2="31.5" shape-rendering="geometricPrecision" stroke="blue" stroke-width="2"/>
</g>
[1 lines]
−
<g class="chart-labels chart-labels-y">
−
<text class="chart-labels" x="99" y="447" fill="black" font-family="arial" font-size="10" text-anchor="end">
<tspan alignment-baseline="middle">0</tspan>
</text>
[1 lines]
−
<text class="chart-labels" x="99" y="364" fill="black" font-family="arial" font-size="10" text-anchor="end">
<tspan alignment-baseline="middle">20</tspan>
</text>
[1 lines]
−
<text class="chart-labels" x="99" y="281" fill="black" font-family="arial" font-size="10" text-anchor="end">
<tspan alignment-baseline="middle">40</tspan>
</text>
[1 lines]
−
<text class="chart-labels" x="99" y="198" fill="black" font-family="arial" font-size="10" text-anchor="end">
<tspan alignment-baseline="middle">60</tspan>
</text>
[1 lines]
−
<text class="chart-labels" x="99" y="115" fill="black" font-family="arial" font-size="10" text-anchor="end">
<tspan alignment-baseline="middle">80</tspan>
</text>
[1 lines]
−
<text class="chart-labels" x="99" y="32" fill="black" font-family="arial" font-size="10" text-anchor="end">
<tspan alignment-baseline="middle">100</tspan>
</text>
[1 lines]
</g>
[12 lines]
−
<g class="chart-labels chart-title-y">
−
<text class="chart-labels" x="99" y="18" fill="black" font-family="arial" font-size="14" text-anchor="end">
<tspan alignment-baseline="middle">%</tspan>
</text>
[1 lines]
</g>
[2 lines]
−
<g class="chart-axis-y chart-markers">
<line x1="712" x2="717" y1="447" y2="447" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="712" x2="717" y1="364" y2="364" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="712" x2="717" y1="281" y2="281" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="712" x2="717" y1="198" y2="198" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="712" x2="717" y1="115" y2="115" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="712" x2="717" y1="32" y2="32" stroke="green" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[6 lines]
−
<g class="chart-axis-y">
<line x1="711" x2="711" y1="447" y2="31.5" shape-rendering="geometricPrecision" stroke="blue" stroke-width="2"/>
</g>
[1 lines]
−
<g class="chart-labels chart-labels-y">
−
<text class="chart-labels" x="721" y="447" fill="black" font-family="arial" font-size="10" text-anchor="start">
<tspan alignment-baseline="middle"/>
</text>
[1 lines]
−
<text class="chart-labels" x="721" y="364" fill="black" font-family="arial" font-size="10" text-anchor="start">
<tspan alignment-baseline="middle">300</tspan>
</text>
[1 lines]
−
<text class="chart-labels" x="721" y="281" fill="black" font-family="arial" font-size="10" text-anchor="start">
<tspan alignment-baseline="middle">500</tspan>
</text>
[1 lines]
−
<text class="chart-labels" x="721" y="198" fill="black" font-family="arial" font-size="10" text-anchor="start">
<tspan alignment-baseline="middle">700</tspan>
</text>
[1 lines]
−
<text class="chart-labels" x="721" y="115" fill="black" font-family="arial" font-size="10" text-anchor="start">
<tspan alignment-baseline="middle">900</tspan>
</text>
[1 lines]
−
<text class="chart-labels" x="721" y="32" fill="black" font-family="arial" font-size="10" text-anchor="start">
<tspan alignment-baseline="middle">1100</tspan>
</text>
[1 lines]
</g>
[12 lines]
−
<g class="chart-labels chart-title-y">
−
<text class="chart-labels" x="721" y="18" fill="black" font-family="arial" font-size="14" text-anchor="start">
<tspan alignment-baseline="middle">USD</tspan>
</text>
[1 lines]
</g>
[2 lines]
−
<linearGradient x1="0%" x2="0%" y1="10%" y2="50%" id="x555_gradient_idm13_1_1">
<stop style="stop-color:green" offset="0"/>
<stop style="stop-color:blue" offset="1"/>
</linearGradient>
[2 lines]
−
<g transform="translate(0, 415) scale(1, -1)">
−
<rect class="bar" width="58" x="111" y="-31" fill="url(#x555_gradient_idm13_1_1)" style="fill-opacity:;" stroke="red" stroke-width="0" height="10">
<title>74% Education</title>
<animate attributeName="height" from="0" dur="1s" fill="freeze" to="306.1"/>
</rect>
[2 lines]
−
<text x="140" alignment-baseline="middle" font-family="" font-size="" fill="white" text-anchor="middle" y="309.1" transform="scale(1, -1) translate(0,-564.2)">
74%
<title>Education</title>
</text>
[1 lines]
</g>
[5 lines]
−
<linearGradient x1="0%" x2="0%" y1="10%" y2="50%" id="x555_gradient_idm14_1_2">
<stop style="stop-color:green" offset="0"/>
<stop style="stop-color:blue" offset="1"/>
</linearGradient>
[2 lines]
−
<g transform="translate(0, 415) scale(1, -1)">
−
<rect class="bar" width="58" x="171" y="-31" fill="url(#x555_gradient_idm14_1_2)" style="fill-opacity:;" stroke="red" stroke-width="0" height="10">
<title>13% Health</title>
<animate attributeName="height" from="0" dur="1s" fill="freeze" to="52.95"/>
</rect>
[2 lines]
−
<text x="200" alignment-baseline="middle" font-family="" font-size="" fill="white" text-anchor="middle" y="55.95" transform="scale(1, -1) translate(0,-57.9)">
13%
<title>Health</title>
</text>
[1 lines]
</g>
[5 lines]
−
<linearGradient x1="0%" x2="0%" y1="10%" y2="50%" id="x555_gradient_idm15_1_3">
<stop style="stop-color:green" offset="0"/>
<stop style="stop-color:blue" offset="1"/>
</linearGradient>
[2 lines]
−
<g transform="translate(0, 415) scale(1, -1)">
−
<rect class="bar" width="58" x="231" y="-31" fill="url(#x555_gradient_idm15_1_3)" style="fill-opacity:;" stroke="red" stroke-width="0" height="10">
<title>90% Cross Borders</title>
<animate attributeName="height" from="0" dur="1s" fill="freeze" to="372.5"/>
</rect>
[2 lines]
−
<text x="260" alignment-baseline="middle" font-family="" font-size="" fill="white" text-anchor="middle" y="375.5" transform="scale(1, -1) translate(0,-697)">
90%
<title>Cross Borders</title>
</text>
[1 lines]
</g>
[5 lines]
−
<linearGradient x1="0%" x2="0%" y1="10%" y2="50%" id="x555_gradient_idm16_1_4">
<stop style="stop-color:green" offset="0"/>
<stop style="stop-color:blue" offset="1"/>
</linearGradient>
[2 lines]
−
<g transform="translate(0, 415) scale(1, -1)">
−
<rect class="bar" width="58" x="291" y="-31" fill="url(#x555_gradient_idm16_1_4)" style="fill-opacity:;" stroke="red" stroke-width="0" height="10">
<title>45% Land</title>
<animate attributeName="height" from="0" dur="1s" fill="freeze" to="185.75"/>
</rect>
[2 lines]
−
<text x="320" alignment-baseline="middle" font-family="" font-size="" fill="white" text-anchor="middle" y="188.75" transform="scale(1, -1) translate(0,-323.5)">
45%
<title>Land</title>
</text>
[1 lines]
</g>
[5 lines]
−
<linearGradient x1="0%" x2="0%" y1="10%" y2="50%" id="x555_gradient_idm17_1_5">
<stop style="stop-color:green" offset="0"/>
<stop style="stop-color:blue" offset="1"/>
</linearGradient>
[2 lines]
−
<g transform="translate(0, 415) scale(1, -1)">
−
<rect class="bar" width="58" x="351" y="-31" fill="url(#x555_gradient_idm17_1_5)" style="fill-opacity:;" stroke="red" stroke-width="0" height="10">
<title>76% Justice</title>
<animate attributeName="height" from="0" dur="1s" fill="freeze" to="314.4"/>
</rect>
[2 lines]
−
<text x="380" alignment-baseline="middle" font-family="" font-size="" fill="white" text-anchor="middle" y="317.4" transform="scale(1, -1) translate(0,-580.8)">
76%
<title>Justice</title>
</text>
[1 lines]
</g>
[5 lines]
−
<linearGradient x1="0%" x2="0%" y1="10%" y2="50%" id="x555_gradient_idm18_1_6">
<stop style="stop-color:green" offset="0"/>
<stop style="stop-color:blue" offset="1"/>
</linearGradient>
[2 lines]
−
<g transform="translate(0, 415) scale(1, -1)">
−
<rect class="bar" width="58" x="411" y="-31" fill="url(#x555_gradient_idm18_1_6)" style="fill-opacity:;" stroke="red" stroke-width="0" height="10">
<title>60% Poverty</title>
<animate attributeName="height" from="0" dur="1s" fill="freeze" to="248"/>
</rect>
[2 lines]
−
<text x="440" alignment-baseline="middle" font-family="" font-size="" fill="white" text-anchor="middle" y="251" transform="scale(1, -1) translate(0,-448)">
60%
<title>Poverty</title>
</text>
[1 lines]
</g>
[5 lines]
−
<linearGradient x1="0%" x2="0%" y1="10%" y2="50%" id="x555_gradient_idm19_1_7">
<stop style="stop-color:green" offset="0"/>
<stop style="stop-color:blue" offset="1"/>
</linearGradient>
[2 lines]
−
<g transform="translate(0, 415) scale(1, -1)">
−
<rect class="bar" width="58" x="471" y="-31" fill="url(#x555_gradient_idm19_1_7)" style="fill-opacity:;" stroke="red" stroke-width="0" height="10">
<title>40% Employment</title>
<animate attributeName="height" from="0" dur="1s" fill="freeze" to="165"/>
</rect>
[2 lines]
−
<text x="500" alignment-baseline="middle" font-family="" font-size="" fill="white" text-anchor="middle" y="168" transform="scale(1, -1) translate(0,-282)">
40%
<title>Employment</title>
</text>
[1 lines]
</g>
[5 lines]
−
<linearGradient x1="0%" x2="0%" y1="10%" y2="50%" id="x555_gradient_idm20_1_8">
<stop style="stop-color:green" offset="0"/>
<stop style="stop-color:blue" offset="1"/>
</linearGradient>
[2 lines]
−
<g transform="translate(0, 415) scale(1, -1)">
−
<rect class="bar" width="58" x="531" y="-31" fill="url(#x555_gradient_idm20_1_8)" style="fill-opacity:;" stroke="red" stroke-width="0" height="10">
<title>20% Public Life</title>
<animate attributeName="height" from="0" dur="1s" fill="freeze" to="82"/>
</rect>
[2 lines]
−
<text x="560" alignment-baseline="middle" font-family="" font-size="" fill="white" text-anchor="middle" y="85" transform="scale(1, -1) translate(0,-116)">
20%
<title>Public Life</title>
</text>
[1 lines]
</g>
[5 lines]
−
<linearGradient x1="0%" x2="0%" y1="10%" y2="50%" id="x555_gradient_idm21_1_9">
<stop style="stop-color:green" offset="0"/>
<stop style="stop-color:blue" offset="1"/>
</linearGradient>
[2 lines]
−
<g transform="translate(0, 415) scale(1, -1)">
−
<rect class="bar" width="58" x="591" y="-31" fill="url(#x555_gradient_idm21_1_9)" style="fill-opacity:;" stroke="red" stroke-width="0" height="10">
<title>10% Language</title>
<animate attributeName="height" from="0" dur="1s" fill="freeze" to="40.5"/>
</rect>
[2 lines]
−
<text x="620" alignment-baseline="middle" font-family="" font-size="" fill="" text-anchor="middle" y="13.5" transform="scale(1, -1) translate(0,-33)">
10%
<title>Language</title>
</text>
[1 lines]
</g>
[5 lines]
−
<linearGradient x1="0%" x2="0%" y1="10%" y2="50%" id="x555_gradient_idm22_1_10">
<stop style="stop-color:green" offset="0"/>
<stop style="stop-color:blue" offset="1"/>
</linearGradient>
[2 lines]
−
<g transform="translate(0, 415) scale(1, -1)">
−
<rect class="bar" width="58" x="651" y="-31" fill="url(#x555_gradient_idm22_1_10)" style="fill-opacity:;" stroke="red" stroke-width="0" height="10">
<title>55% Self-governance</title>
<animate attributeName="height" from="0" dur="1s" fill="freeze" to="227.25"/>
</rect>
[2 lines]
−
<text x="680" alignment-baseline="middle" font-family="" font-size="" fill="white" text-anchor="middle" y="230.25" transform="scale(1, -1) translate(0,-406.5)">
55%
<title>Self-governance</title>
</text>
[1 lines]
</g>
[5 lines]
<style type="text/css"> .svg-chart * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .svg-chart .bar { fill-opacity:1; } .svg-chart .bar:hover { fill-opacity:0.8; } .svg-chart .pie { fill-opacity:1; } .svg-chart .pie:hover { stroke: grey; stroke-width: 3px; } .pie:hover { fill-opacity:0.8; } </style>
<script type="text/javascript"/>
</svg>
[186 lines]