Doughnut Chart Default

Chart
Source
<canvas
width="100"
height="100"
data-charty="doughnut"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[100, 80, 30]"
data-background-color='["#FF6384", "#36A2EB", "#FFCE56"]'></canvas>

Doughnut Chart with Legend

Chart
Source
<canvas
width="100"
height="100"
data-charty="doughnut"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[100, 80, 30]"
data-background-color='["#FF6384", "#36A2EB", "#FFCE56"]'
data-legend=true></canvas>

Doughnut Chart Thin

Chart
Source
<canvas
width="100"
height="100"
data-charty="doughnut"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[100, 80, 30]"
data-background-color='["#FF6384", "#36A2EB", "#FFCE56"]'
data-cutout-percentage=80
></canvas>

Doughnut Chart Thin with Legend

Chart
Source
<canvas
width="100"
height="100"
data-charty="doughnut"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[100, 80, 30]"
data-background-color='["#FF6384", "#36A2EB", "#FFCE56"]'
data-legend=true
data-cutout-percentage=80
></canvas>

Doughnut Chart Fat

Chart
Source
<canvas
width="100"
height="100"
data-charty="doughnut"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[100, 80, 30]"
data-background-color='["#FF6384", "#36A2EB", "#FFCE56"]'
data-cutout-percentage=20
></canvas>

Doughnut Chart Fat with Legend

Chart
Source
<canvas
width="100"
height="100"
data-charty="doughnut"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[100, 80, 30]"
data-background-color='["#FF6384", "#36A2EB", "#FFCE56"]'
data-legend=true
data-cutout-percentage=20
></canvas>

Pie Chart

Chart
Source
<canvas
width="200"
height="200"
data-charty="pie"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[100, 80, 30]"
data-background-color='["#FF6384", "#36A2EB", "#FFCE56"]'></canvas>

Pie Chart with Legend

Chart
Source
<canvas
width="200"
height="200"
data-charty="pie"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[100, 80, 30]"
data-background-color='["#FF6384", "#36A2EB", "#FFCE56"]'
data-legend=true
></canvas>

Line Chart

Chart
Source
<canvas
width="200" height="200"
data-charty="line"
data-label="Line"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[10, 30, 20]"
data-border-color="#FF6384"></canvas>

Line Chart with Legend

Chart
Source
<canvas
width="200" height="200"
data-charty="line"
data-label="Line"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[10, 30, 20]"
data-border-color="#FF6384"
data-legend=true
></canvas>

Area Chart

Chart
Source
<canvas
width="200" height="100"
data-charty="area"
data-label="Area"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[10, 30, 20]"
data-border-color="#FF6384"
data-background-color="#9cb6c2"></canvas>

Area Chart with Legend

Chart
Source
<canvas
width="200" height="100"
data-charty="area"
data-label="Area"
data-labels="['Red', 'Blue', 'Yellow']"
data-value="[10, 30, 20]"
data-border-color="#FF6384"
data-background-color="#9cb6c2"
data-legend=true
></canvas>

statline

Chart
Source
<canvas
width="100" height="30"
data-charty="statline"
data-label="Line"
data-labels="['a','b','c','d','e','f','g']"
data-value="[43,48,52,58,50,95,100]"
data-border-color="#fff"
></canvas>

statarea

Chart
Source
<canvas
width="100" height="30"
data-charty="statarea"
data-label="Line"
data-labels="['a','b','c','d','e','f','g']"
data-value="[28,68,41,43,96,45,100]"
data-border-color="#ffffff"
data-background-color="rgba(255, 255, 255, 0.1)"
></canvas>