Data Visualization Diagrams, Data Tableau, 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

datatype: color
px

Name
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
datatype: color
px
°
Declare the stack
type: number
px
type: number
px
type: number
px
datatype: color
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

Buddhist
Christian
Hindu
PovertyAsia
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Europe
datatype: integer
datatype: integer
datatype: integer
datatype: integer
LandAsia
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Europe
datatype: integer
datatype: integer
datatype: integer
datatype: integer
LanguageAsia
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Europe
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">
<row>
<cell value="34">
<sub>13</sub>
<sub>33</sub>
<sub>54</sub>
</cell>
[3 lines]
<cell value="13">
<sub>30</sub>
<sub>40</sub>
<sub>30</sub>
</cell>
[3 lines]
</row>
[8 lines]
<row>
<cell value="24">
<sub>20</sub>
<sub>30</sub>
<sub>50</sub>
</cell>
[3 lines]
<cell value="34">
<sub>33</sub>
<sub>53</sub>
<sub>14</sub>
</cell>
[3 lines]
</row>
[8 lines]
<row>
<cell value="34">
<sub>20</sub>
<sub>30</sub>
<sub>50</sub>
</cell>
[3 lines]
<cell value="24">
<sub>53</sub>
<sub>13</sub>
<sub>34</sub>
</cell>
[3 lines]
</row>
[8 lines]
</dia:data>
[27 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="135" width="20" height="20" fill="#0d6efd" y="15"/>
+
<text class="chart-labels" x="160" y="31" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Buddhist</tspan>
</text>
[1 lines]
<rect x="235" width="20" height="20" fill="#00fcff" y="15"/>
+
<text class="chart-labels" x="260" y="31" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Christian</tspan>
</text>
[1 lines]
<rect x="335" width="20" height="20" fill="#00f900" y="15"/>
+
<text class="chart-labels" x="360" y="31" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Hindu</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="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="130" y2="130" 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"/>
<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="370" y2="370" 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="450" y2="450" 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="290" y2="290" 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="130" y2="130" 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="455" 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="375" 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="295" 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="215" 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="135" 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 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>
+
<g transform="translate(0, 400) scale(1, -1)">
+
<rect class="bar" width="99" x="111" fill="#00f900" y="-49.5" height="400">
<title>Hindu: 54%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="160.5" text-anchor="middle" fill="#ffffff" y="132" transform="scale(1, -1) translate(0,-368)">54%</text>
+
<rect class="bar" width="99" x="111" fill="#00fcff" y="-49.5" height="184">
<title>Christian: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="160.5" text-anchor="middle" fill="#ffffff" y="42" transform="scale(1, -1) translate(0,-104)">33%</text>
+
<rect class="bar" width="99" x="111" fill="#0d6efd" y="-49.5" height="52">
<title>Buddhist: 13%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="160.5" text-anchor="middle" fill="#ffffff" y="30" transform="scale(1, -1) translate(0,0)">13%</text>
</g>
[9 lines]
+
<g transform="translate(0, 400) scale(1, -1)">
+
<rect class="bar" width="99" x="311" fill="#00f900" y="-49.5" height="400">
<title>Hindu: 50%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="360.5" text-anchor="middle" fill="#ffffff" y="156" transform="scale(1, -1) translate(0,-400)">50%</text>
+
<rect class="bar" width="99" x="311" fill="#00fcff" y="-49.5" height="200">
<title>Christian: 30%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="360.5" text-anchor="middle" fill="#ffffff" y="76" transform="scale(1, -1) translate(0,-160)">30%</text>
+
<rect class="bar" width="99" x="311" fill="#0d6efd" y="-49.5" height="80">
<title>Buddhist: 20%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="360.5" text-anchor="middle" fill="#ffffff" y="16" transform="scale(1, -1) translate(0,0)">20%</text>
</g>
[9 lines]
+
<g transform="translate(0, 400) scale(1, -1)">
+
<rect class="bar" width="99" x="511" fill="#00f900" y="-49.5" height="400">
<title>Hindu: 50%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="560.5" text-anchor="middle" fill="#ffffff" y="156" transform="scale(1, -1) translate(0,-400)">50%</text>
+
<rect class="bar" width="99" x="511" fill="#00fcff" y="-49.5" height="200">
<title>Christian: 30%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="560.5" text-anchor="middle" fill="#ffffff" y="76" transform="scale(1, -1) translate(0,-160)">30%</text>
+
<rect class="bar" width="99" x="511" fill="#0d6efd" y="-49.5" height="80">
<title>Buddhist: 20%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="560.5" text-anchor="middle" fill="#ffffff" y="16" transform="scale(1, -1) translate(0,0)">20%</text>
</g>
[9 lines]
</g>
[30 lines]
+
<g>
+
<g transform="translate(0, 400) scale(1, -1)">
+
<rect class="bar" width="99" x="210" fill="#00f900" y="-49.5" height="400">
<title>Hindu: 30%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="259.5" text-anchor="middle" fill="#ffffff" y="276" transform="scale(1, -1) translate(0,-560)">30%</text>
+
<rect class="bar" width="99" x="210" fill="#00fcff" y="-49.5" height="280">
<title>Christian: 40%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="259.5" text-anchor="middle" fill="#ffffff" y="96" transform="scale(1, -1) translate(0,-240)">40%</text>
+
<rect class="bar" width="99" x="210" fill="#0d6efd" y="-49.5" height="120">
<title>Buddhist: 30%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="259.5" text-anchor="middle" fill="#ffffff" y="-4" transform="scale(1, -1) translate(0,0)">30%</text>
</g>
[9 lines]
+
<g transform="translate(0, 400) scale(1, -1)">
+
<rect class="bar" width="99" x="410" fill="#00f900" y="-49.5" height="400">
<title>Hindu: 14%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="459.5" text-anchor="middle" fill="#ffffff" y="372" transform="scale(1, -1) translate(0,-688)">14%</text>
+
<rect class="bar" width="99" x="410" fill="#00fcff" y="-49.5" height="344">
<title>Christian: 53%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="459.5" text-anchor="middle" fill="#ffffff" y="82" transform="scale(1, -1) translate(0,-264)">53%</text>
+
<rect class="bar" width="99" x="410" fill="#0d6efd" y="-49.5" height="132">
<title>Buddhist: 33%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="459.5" text-anchor="middle" fill="#ffffff" y="-10" transform="scale(1, -1) translate(0,0)">33%</text>
</g>
[9 lines]
+
<g transform="translate(0, 400) scale(1, -1)">
+
<rect class="bar" width="99" x="610" fill="#00f900" y="-49.5" height="400">
<title>Hindu: 34%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="659.5" text-anchor="middle" fill="#ffffff" y="252" transform="scale(1, -1) translate(0,-528)">34%</text>
+
<rect class="bar" width="99" x="610" fill="#00fcff" y="-49.5" height="264">
<title>Christian: 13%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="659.5" text-anchor="middle" fill="#ffffff" y="242" transform="scale(1, -1) translate(0,-424)">13%</text>
+
<rect class="bar" width="99" x="610" fill="#0d6efd" y="-49.5" height="212">
<title>Buddhist: 53%</title>
</rect>
[1 lines]
<text font-family="Arial" font-size="12" font-style="normal" x="659.5" text-anchor="middle" fill="#ffffff" y="-50" transform="scale(1, -1) translate(0,0)">53%</text>
</g>
[9 lines]
</g>
[30 lines]
+
<g transform="translate(135,478)">
<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="160" y="491" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Asia</tspan>
</text>
[1 lines]
+
<g transform="translate(235,478)">
<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="260" y="491" fill="#000000" font-family="Arial" font-size="14" text-anchor="">
<tspan>Europe</tspan>
</text>
[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>
[134 lines]
 
 
 



Oops

Your browser is not supported

A modern browser with Javascript ES6 is required

Any major browser from 2015 onwards will be suitable