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>