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>