Data Visualization Diagrams, Bar Charts, Line Charts, Function Charts, Point Charts, Area Charts, Spider Webs, Radar Webs, Donut Charts, Pie Charts, Bubble Charts, Gauge Charts

Data Diagrams

 

Label
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number

Font

px
datatype: color
type: number
°
type: number
px
type: number
px
type: number
px

type: boolean
type: boolean
type: text
datatype: color
px
type: number
°
type: number
px

datatype: color
type: number
px
,px

datatype: color
type: number
px
type: number
px

Name
type: text
type: text
type: text
Declare the sources
type: number
px
type: number
px
type: number
px
datatype: color
px
type: boolean
FillLabel
datatype: color
type: text
datatype: color
type: text
datatype: color
type: text
type: color
px
°
Declare the stack
type: number
px
type: number
px
type: number
px
datatype: color
px
Label
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number
datatype: color
px
type: number
°
datatype: color
type: number
px
,px

Calculate
datatype: number
default: 0
datatype: number
default: 100
datatype: number
default: 5
datatype: color
px
type: number
°
type: text
type: text
type: text
datatype: color
px
type: number
°
type: number
px
datatype: color
type: number
px
,px
datatype: color
type: number
px
type: number
px
Calculate
datatype: number
default: 0
datatype: number
default: 100
datatype: number
default: 5
datatype: color
px
type: number
°
type: text
type: text
type: boolean
type: boolean
type: text
datatype: color
px
type: number
°
type: number
px
datatype: color
type: number
px
,px
datatype: color
type: number
px
type: number
px

type: number
px
type: number
px
type: number
%

Stroke & fill
datatype: color
type: number
px
,px
datatype: color
Outer distance from frame to context
type: number
px
type: number
px
type: number
px
type: number
px
Inner distance from frame to diagram
type: number
px
type: number
px
type: number
px
type: number
px
Appearance
Stroke & fill
datatype: color
type: number
px
,px
pattern: \d+\,\d+
datatype: color

MaleFemale
Buddhist
Christian
Hindu
Buddhist
Christian
Hindu
PovertyAsia
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Europe
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Africa
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
LandAsia
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Europe
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Africa
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
LanguageAsia
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Europe
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Africa
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
<?xml version="1.0" encoding="UTF-8"?>
<dia:data xmlns:ds="http://www.bootstrap-data.org" xmlns:dia="http://data-diagrams.com">
<dir id="1">
<row id="1">
<cell id="1" value="34">
<sub id="1">33</sub>
<sub id="2">33</sub>
<sub id="3">33</sub>
</cell>
[3 lines]
<cell id="2" value="13">
<sub id="1">33</sub>
<sub id="2">33</sub>
<sub id="3">34</sub>
</cell>
[3 lines]
<cell id="3" value="24">
<sub id="1">33</sub>
<sub id="2">33</sub>
<sub id="3">33</sub>
</cell>
[3 lines]
</row>
[12 lines]
<row id="2">
<cell id="1" value="43">
<sub id="1">33</sub>
<sub id="2">33</sub>
<sub id="3">33</sub>
</cell>
[3 lines]
<cell id="2" value="40">
<sub id="1">33</sub>
<sub id="2">33</sub>
<sub id="3">33</sub>
</cell>
[3 lines]
<cell id="3" value="60">
<sub id="1">60</sub>
<sub id="2">20</sub>
<sub id="3">20</sub>
</cell>
[3 lines]
</row>
[12 lines]
<row id="3">
<cell id="1" value="50">
<sub id="1">0</sub>
<sub id="2">50</sub>
<sub id="3">50</sub>
</cell>
[3 lines]
<cell id="2" value="30">
<sub id="1">30</sub>
<sub id="2">30</sub>
<sub id="3">40</sub>
</cell>
[3 lines]
<cell id="3" value="60">
<sub id="1">60</sub>
<sub id="2">30</sub>
<sub id="3">10</sub>
</cell>
[3 lines]
</row>
[12 lines]
</dir>
[39 lines]
<dir id="2">
<row id="1">
<cell id="1" value="45">
<sub id="1">33</sub>
<sub id="2">33</sub>
<sub id="3">33</sub>
</cell>
[3 lines]
<cell id="2" value="67">
<sub id="1">33</sub>
<sub id="2">33</sub>
<sub id="3">33</sub>
</cell>
[3 lines]
<cell id="3" value="24">
<sub id="1">33</sub>
<sub id="2">33</sub>
<sub id="3">33</sub>
</cell>
[3 lines]
</row>
[12 lines]
<row id="2">
<cell id="1" value="43">
<sub id="1">33</sub>
<sub id="2">33</sub>
<sub id="3">33</sub>
</cell>
[3 lines]
<cell id="2" value="40">
<sub id="1">33</sub>
<sub id="2">33</sub>
<sub id="3">33</sub>
</cell>
[3 lines]
<cell id="3" value="60">
<sub id="1">60</sub>
<sub id="2">20</sub>
<sub id="3">20</sub>
</cell>
[3 lines]
</row>
[12 lines]
<row id="3">
<cell id="1" value="50">
<sub id="1">50</sub>
<sub id="2">30</sub>
<sub id="3">20</sub>
</cell>
[3 lines]
<cell id="2" value="30">
<sub id="1">40</sub>
<sub id="2">30</sub>
<sub id="3">30</sub>
</cell>
[3 lines]
<cell id="3" value="60">
<sub id="1">60</sub>
<sub id="2">10</sub>
<sub id="3">30</sub>
</cell>
[3 lines]
</row>
[12 lines]
</dir>
[39 lines]
</dia:data>
[80 lines]

 
 
 
<?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">
<rect x="25" width="20" height="20" fill="#0d6efd" y="15"/>
+
<text class="chart-labels" x="50" y="31" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Buddhist</tspan>
</text>
[1 lines]
<rect x="125" width="20" height="20" fill="#00fcff" y="15"/>
+
<text class="chart-labels" x="150" y="31" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Christian</tspan>
</text>
[1 lines]
<rect x="225" width="20" height="20" fill="#00f900" y="15"/>
+
<text class="chart-labels" x="250" y="31" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Hindu</tspan>
</text>
[1 lines]
+
<g transform="translate(720,30)">
<path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383z"/>
</g>
[1 lines]
+
<text class="chart-labels" x="745" y="43" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Asia</tspan>
</text>
[1 lines]
+
<g transform="translate(720,52)">
<path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.646 6.24v.07H5.375v-.064c0-1.213.879-2.402 2.637-2.402 1.582 0 2.613.949 2.613 2.215 0 1.002-.6 1.667-1.287 2.43l-.096.107-1.974 2.22v.077h3.498V12H5.422v-.832l2.97-3.293c.434-.475.903-1.008.903-1.705 0-.744-.557-1.236-1.313-1.236-.843 0-1.336.615-1.336 1.306"/>
</g>
[1 lines]
+
<text class="chart-labels" x="745" y="65" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Europe</tspan>
</text>
[1 lines]
+
<g transform="translate(720,74)">
<path d="M7.918 8.414h-.879V7.342h.838c.78 0 1.348-.522 1.342-1.237 0-.709-.563-1.195-1.348-1.195-.79 0-1.312.498-1.348 1.055H5.275c.036-1.137.95-2.115 2.625-2.121 1.594-.012 2.608.885 2.637 2.062.023 1.137-.885 1.776-1.482 1.875v.07c.703.07 1.71.64 1.734 1.917.024 1.459-1.277 2.396-2.93 2.396-1.705 0-2.707-.967-2.754-2.144H6.33c.059.597.68 1.06 1.541 1.066.973.006 1.6-.563 1.588-1.354-.006-.779-.621-1.318-1.541-1.318"/>
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8"/>
</g>
[2 lines]
+
<text class="chart-labels" x="745" y="87" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Africa</tspan>
</text>
[1 lines]
<rect class="chart" x="110" y="50" width="600" height="400" fill="#ffffff"/>
+
<g class="chart-grid chart-x">
<line x1="310" x2="310" y1="250" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="510" x2="510" y1="250" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="710" x2="710" y1="250" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[3 lines]
+
<g class="chart-grid chart-y">
<line x1="110" x2="710" y1="290" y2="290" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="330" y2="330" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="370" y2="370" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="410" y2="410" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="450" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[5 lines]
+
<g class="chart-axis-y chart-markers">
<line x1="105" x2="109" y1="250" y2="250" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="290" y2="290" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="330" y2="330" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="370" y2="370" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="410" y2="410" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="450" y2="450" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[6 lines]
+
<g class="chart-labels chart-labels-y">
+
<text class="chart-labels" x="97.5" y="255" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>0</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="97.5" y="295" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>20</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="97.5" y="335" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>40</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="97.5" y="375" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>60</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="97.5" y="415" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>80</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="97.5" y="455" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>100</tspan>
</text>
[1 lines]
</g>
[12 lines]
+
<g class="chart-labels chart-title-y">
+
<text class="chart-labels" x="109.5" y="37" fill="#000000" font-family="Arial" font-size="12" text-anchor="middle">
<tspan>%</tspan>
</text>
[1 lines]
</g>
[2 lines]
+
<g class="chart-labels chart-double-y" transform="rotate(-90) translate(-390,60)">
+
<text class="chart-labels" x="50" y="10" fill="#000000" font-family="Arial" font-size="12" text-anchor="middle">
<tspan>Female</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="250" y="10" fill="#000000" font-family="Arial" font-size="12" text-anchor="middle">
<tspan>Male</tspan>
</text>
[1 lines]
</g>
[4 lines]
+
<g class="chart-grid chart-x">
<line x1="310" x2="310" y1="50" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="510" x2="510" y1="50" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="710" x2="710" y1="50" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[3 lines]
+
<g class="chart-grid chart-y">
<line x1="110" x2="710" y1="50" y2="50" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="90" y2="90" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="130" y2="130" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="170" y2="170" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="210" y2="210" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[5 lines]
+
<g class="chart-axis-x chart-markers">
<line x1="110" x2="110" y1="450" y2="454" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="310" x2="310" y1="450" y2="454" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="510" x2="510" y1="450" y2="454" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="710" x2="710" y1="450" y2="454" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[4 lines]
+
<g class="chart-axis-x">
<line x1="109" x2="710" y1="450" y2="450" shape-rendering="geometricPrecision" stroke="#000000" stroke-width="1"/>
</g>
[1 lines]
+
<g class="chart-labels chart-labels-x">
+
<text class="chart-labels" x="210" y="469" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<tspan>Poverty</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="410" y="469" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<tspan>Land</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="610" y="469" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<tspan>Language</tspan>
</text>
[1 lines]
</g>
[6 lines]
+
<g class="chart-labels chart-title-x">
+
<text class="chart-labels" x="724" y="456" fill="#000000" font-family="Arial" font-size="14" text-anchor="start">
<tspan/>
</text>
[1 lines]
</g>
[2 lines]
+
<g class="chart-axis-y chart-markers">
<line x1="105" x2="109" y1="250" y2="250" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="210" y2="210" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="170" y2="170" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="130" y2="130" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="90" y2="90" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="105" x2="109" y1="50" y2="50" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[6 lines]
+
<g class="chart-axis-y">
<line x1="109.5" x2="109.5" y1="450.5" y2="49.5" shape-rendering="geometricPrecision" stroke="#000000" stroke-width="1"/>
</g>
[1 lines]
+
<g class="chart-labels chart-labels-y">
+
<text class="chart-labels" x="97.5" y="255" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>0</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="97.5" y="215" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>20</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="97.5" y="175" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>40</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="97.5" y="135" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>60</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="97.5" y="95" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>80</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="97.5" y="55" fill="#000000" font-family="Arial" font-size="12" text-anchor="end">
<tspan>100</tspan>
</text>
[1 lines]
</g>
[12 lines]
+
<g>
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="111" fill="#00f900" y="-49.5" height="198">
<title>Hindu: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="143.75" text-anchor="middle" fill="#ffffff" y="155" transform="scale(1, -1) translate(0,-264)">33%</text>
+
<rect class="bar" width="65.5" x="111" fill="#00fcff" y="-49.5" height="132">
<title>Christian: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="143.75" text-anchor="middle" fill="#ffffff" y="89" transform="scale(1, -1) translate(0,-132)">33%</text>
+
<rect class="bar" width="65.5" x="111" fill="#0d6efd" y="-49.5" height="66">
<title>Buddhist: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="143.75" text-anchor="middle" fill="#ffffff" y="23" transform="scale(1, -1) translate(0,0)">33%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="311" fill="#00f900" y="-49.5" height="198">
<title>Hindu: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="343.75" text-anchor="middle" fill="#ffffff" y="155" transform="scale(1, -1) translate(0,-264)">33%</text>
+
<rect class="bar" width="65.5" x="311" fill="#00fcff" y="-49.5" height="132">
<title>Christian: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="343.75" text-anchor="middle" fill="#ffffff" y="89" transform="scale(1, -1) translate(0,-132)">33%</text>
+
<rect class="bar" width="65.5" x="311" fill="#0d6efd" y="-49.5" height="66">
<title>Buddhist: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="343.75" text-anchor="middle" fill="#ffffff" y="23" transform="scale(1, -1) translate(0,0)">33%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="511" fill="#00f900" y="-49.5" height="200">
<title>Hindu: 50%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="543.75" text-anchor="middle" fill="#ffffff" y="106" transform="scale(1, -1) translate(0,-200)">50%</text>
+
<rect class="bar" width="65.5" x="511" fill="#00fcff" y="-49.5" height="100">
<title>Christian: 50%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="543.75" text-anchor="middle" fill="#ffffff" y="6" transform="scale(1, -1) translate(0,0)">50%</text>
+
<rect class="bar" width="65.5" x="511" fill="#0d6efd" y="-49.5" height="0">
<title>Buddhist: 0%</title>
</rect>
[1 lines]
</g>
[8 lines]
</g>
[29 lines]
+
<g transform="translate(0, 500) scale(1, -1)">
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="111" fill="#00f900" y="-49.5" height="198">
<title>Hindu: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="143.75" text-anchor="middle" fill="#ffffff" y="121" transform="">33%</text>
+
<rect class="bar" width="65.5" x="111" fill="#00fcff" y="-49.5" height="132">
<title>Christian: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="143.75" text-anchor="middle" fill="#ffffff" y="55" transform="">33%</text>
+
<rect class="bar" width="65.5" x="111" fill="#0d6efd" y="-49.5" height="66">
<title>Buddhist: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="143.75" text-anchor="middle" fill="#ffffff" y="-11" transform="">33%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="311" fill="#00f900" y="-49.5" height="198">
<title>Hindu: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="343.75" text-anchor="middle" fill="#ffffff" y="121" transform="">33%</text>
+
<rect class="bar" width="65.5" x="311" fill="#00fcff" y="-49.5" height="132">
<title>Christian: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="343.75" text-anchor="middle" fill="#ffffff" y="55" transform="">33%</text>
+
<rect class="bar" width="65.5" x="311" fill="#0d6efd" y="-49.5" height="66">
<title>Buddhist: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="343.75" text-anchor="middle" fill="#ffffff" y="-11" transform="">33%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="511" fill="#00f900" y="-49.5" height="200">
<title>Hindu: 20%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="543.75" text-anchor="middle" fill="#ffffff" y="136" transform="">20%</text>
+
<rect class="bar" width="65.5" x="511" fill="#00fcff" y="-49.5" height="160">
<title>Christian: 30%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="543.75" text-anchor="middle" fill="#ffffff" y="86" transform="">30%</text>
+
<rect class="bar" width="65.5" x="511" fill="#0d6efd" y="-49.5" height="100">
<title>Buddhist: 50%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="543.75" text-anchor="middle" fill="#ffffff" y="6" transform="">50%</text>
</g>
[9 lines]
</g>
[30 lines]
+
<g>
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="177.167" fill="#00f900" y="-49.5" height="200">
<title>Hindu: 34%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="209.917" text-anchor="middle" fill="#ffffff" y="154" transform="scale(1, -1) translate(0,-264)">34%</text>
+
<rect class="bar" width="65.5" x="177.167" fill="#00fcff" y="-49.5" height="132">
<title>Christian: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="209.917" text-anchor="middle" fill="#ffffff" y="89" transform="scale(1, -1) translate(0,-132)">33%</text>
+
<rect class="bar" width="65.5" x="177.167" fill="#0d6efd" y="-49.5" height="66">
<title>Buddhist: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="209.917" text-anchor="middle" fill="#ffffff" y="23" transform="scale(1, -1) translate(0,0)">33%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="377.167" fill="#00f900" y="-49.5" height="198">
<title>Hindu: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="409.917" text-anchor="middle" fill="#ffffff" y="155" transform="scale(1, -1) translate(0,-264)">33%</text>
+
<rect class="bar" width="65.5" x="377.167" fill="#00fcff" y="-49.5" height="132">
<title>Christian: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="409.917" text-anchor="middle" fill="#ffffff" y="89" transform="scale(1, -1) translate(0,-132)">33%</text>
+
<rect class="bar" width="65.5" x="377.167" fill="#0d6efd" y="-49.5" height="66">
<title>Buddhist: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="409.917" text-anchor="middle" fill="#ffffff" y="23" transform="scale(1, -1) translate(0,0)">33%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="577.167" fill="#00f900" y="-49.5" height="200">
<title>Hindu: 40%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="609.917" text-anchor="middle" fill="#ffffff" y="136" transform="scale(1, -1) translate(0,-240)">40%</text>
+
<rect class="bar" width="65.5" x="577.167" fill="#00fcff" y="-49.5" height="120">
<title>Christian: 30%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="609.917" text-anchor="middle" fill="#ffffff" y="86" transform="scale(1, -1) translate(0,-120)">30%</text>
+
<rect class="bar" width="65.5" x="577.167" fill="#0d6efd" y="-49.5" height="60">
<title>Buddhist: 30%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="609.917" text-anchor="middle" fill="#ffffff" y="26" transform="scale(1, -1) translate(0,0)">30%</text>
</g>
[9 lines]
</g>
[30 lines]
+
<g transform="translate(0, 500) scale(1, -1)">
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="177.167" fill="#00f900" y="-49.5" height="198">
<title>Hindu: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="209.917" text-anchor="middle" fill="#ffffff" y="121" transform="">33%</text>
+
<rect class="bar" width="65.5" x="177.167" fill="#00fcff" y="-49.5" height="132">
<title>Christian: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="209.917" text-anchor="middle" fill="#ffffff" y="55" transform="">33%</text>
+
<rect class="bar" width="65.5" x="177.167" fill="#0d6efd" y="-49.5" height="66">
<title>Buddhist: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="209.917" text-anchor="middle" fill="#ffffff" y="-11" transform="">33%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="377.167" fill="#00f900" y="-49.5" height="198">
<title>Hindu: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="409.917" text-anchor="middle" fill="#ffffff" y="121" transform="">33%</text>
+
<rect class="bar" width="65.5" x="377.167" fill="#00fcff" y="-49.5" height="132">
<title>Christian: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="409.917" text-anchor="middle" fill="#ffffff" y="55" transform="">33%</text>
+
<rect class="bar" width="65.5" x="377.167" fill="#0d6efd" y="-49.5" height="66">
<title>Buddhist: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="409.917" text-anchor="middle" fill="#ffffff" y="-11" transform="">33%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="577.167" fill="#00f900" y="-49.5" height="200">
<title>Hindu: 30%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="609.917" text-anchor="middle" fill="#ffffff" y="126" transform="">30%</text>
+
<rect class="bar" width="65.5" x="577.167" fill="#00fcff" y="-49.5" height="140">
<title>Christian: 30%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="609.917" text-anchor="middle" fill="#ffffff" y="66" transform="">30%</text>
+
<rect class="bar" width="65.5" x="577.167" fill="#0d6efd" y="-49.5" height="80">
<title>Buddhist: 40%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="609.917" text-anchor="middle" fill="#ffffff" y="-4" transform="">40%</text>
</g>
[9 lines]
</g>
[30 lines]
+
<g>
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="243.833" fill="#00f900" y="-49.5" height="198">
<title>Hindu: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="276.583" text-anchor="middle" fill="#ffffff" y="155" transform="scale(1, -1) translate(0,-264)">33%</text>
+
<rect class="bar" width="65.5" x="243.833" fill="#00fcff" y="-49.5" height="132">
<title>Christian: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="276.583" text-anchor="middle" fill="#ffffff" y="89" transform="scale(1, -1) translate(0,-132)">33%</text>
+
<rect class="bar" width="65.5" x="243.833" fill="#0d6efd" y="-49.5" height="66">
<title>Buddhist: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="276.583" text-anchor="middle" fill="#ffffff" y="23" transform="scale(1, -1) translate(0,0)">33%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="443.833" fill="#00f900" y="-49.5" height="200">
<title>Hindu: 20%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="476.583" text-anchor="middle" fill="#ffffff" y="196" transform="scale(1, -1) translate(0,-320)">20%</text>
+
<rect class="bar" width="65.5" x="443.833" fill="#00fcff" y="-49.5" height="160">
<title>Christian: 20%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="476.583" text-anchor="middle" fill="#ffffff" y="156" transform="scale(1, -1) translate(0,-240)">20%</text>
+
<rect class="bar" width="65.5" x="443.833" fill="#0d6efd" y="-49.5" height="120">
<title>Buddhist: 60%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="476.583" text-anchor="middle" fill="#ffffff" y="-4" transform="scale(1, -1) translate(0,0)">60%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="643.833" fill="#00f900" y="-49.5" height="200">
<title>Hindu: 10%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="676.583" text-anchor="middle" fill="#ffffff" y="226" transform="scale(1, -1) translate(0,-360)">10%</text>
+
<rect class="bar" width="65.5" x="643.833" fill="#00fcff" y="-49.5" height="180">
<title>Christian: 30%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="676.583" text-anchor="middle" fill="#ffffff" y="146" transform="scale(1, -1) translate(0,-240)">30%</text>
+
<rect class="bar" width="65.5" x="643.833" fill="#0d6efd" y="-49.5" height="120">
<title>Buddhist: 60%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="676.583" text-anchor="middle" fill="#ffffff" y="-4" transform="scale(1, -1) translate(0,0)">60%</text>
</g>
[9 lines]
</g>
[30 lines]
+
<g transform="translate(0, 500) scale(1, -1)">
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="243.833" fill="#00f900" y="-49.5" height="198">
<title>Hindu: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="276.583" text-anchor="middle" fill="#ffffff" y="121" transform="">33%</text>
+
<rect class="bar" width="65.5" x="243.833" fill="#00fcff" y="-49.5" height="132">
<title>Christian: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="276.583" text-anchor="middle" fill="#ffffff" y="55" transform="">33%</text>
+
<rect class="bar" width="65.5" x="243.833" fill="#0d6efd" y="-49.5" height="66">
<title>Buddhist: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="276.583" text-anchor="middle" fill="#ffffff" y="-11" transform="">33%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="443.833" fill="#00f900" y="-49.5" height="200">
<title>Hindu: 20%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="476.583" text-anchor="middle" fill="#ffffff" y="136" transform="">20%</text>
+
<rect class="bar" width="65.5" x="443.833" fill="#00fcff" y="-49.5" height="160">
<title>Christian: 20%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="476.583" text-anchor="middle" fill="#ffffff" y="96" transform="">20%</text>
+
<rect class="bar" width="65.5" x="443.833" fill="#0d6efd" y="-49.5" height="120">
<title>Buddhist: 60%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="476.583" text-anchor="middle" fill="#ffffff" y="16" transform="">60%</text>
</g>
[9 lines]
+
<g transform="translate(0, 200) scale(1, -1)">
+
<rect class="bar" width="65.5" x="643.833" fill="#00f900" y="-49.5" height="200">
<title>Hindu: 30%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="676.583" text-anchor="middle" fill="#ffffff" y="126" transform="">30%</text>
+
<rect class="bar" width="65.5" x="643.833" fill="#00fcff" y="-49.5" height="140">
<title>Christian: 10%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="676.583" text-anchor="middle" fill="#ffffff" y="86" transform="">10%</text>
+
<rect class="bar" width="65.5" x="643.833" fill="#0d6efd" y="-49.5" height="120">
<title>Buddhist: 60%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="676.583" text-anchor="middle" fill="#ffffff" y="16" transform="">60%</text>
</g>
[9 lines]
</g>
[30 lines]
+
<g class="chart-axis-x">
<line x1="109" x2="710" y1="250" y2="250" shape-rendering="geometricPrecision" stroke="#000000" stroke-width="1" stroke-dasharray=""/>
</g>
[1 lines]
+
<a target="_blank" xlink:href="https://data-diagrams.com">
<text x="20" y="495" fill="grey" font-size="10" font-family="arial">data-diagrams.com</text>
</a>
[1 lines]
</svg>
[299 lines]
 
 
 



Oops

Your browser is not supported

A modern browser with Javascript ES6 is required

Any major browser from 2015 onwards will be suitable