Skip to main content

Chart Types

For a variety of useful editable examples, see the chart gallery.

Changing chart types can be very simple. By changing type: bar to type: line, for example, we can instantly produce an equivalent line graph:

Bar chart

See Bar Chart documentation

info
Set type to horizontalBar for a horizontal bar chart.

Line graph

See Line chart documentation

<img src="https://quickchart.io/chart?c={type:'line',data:{labels:['January','February','March','April','May'],datasets:[{label:'Dogs',data:[50,60,70,180,190],fill:false,borderColor:'blue'},{label:'Cats',data:[100,200,300,400,500],fill:false,borderColor:'green'}]}}">
Example line chart

Edit this example

Radar chart

See Chart.js radar chart documentation

<img src="https://quickchart.io/chart?c={type:'radar',data:{labels:['January','February','March','April','May'],datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}">
Example radar chart

Edit this example

Pie chart

See Pie chart documentation. This chart also uses the datalabels plugin.

Learn how to customize pie chart labels.

<img src="https://quickchart.io/chart?c={type:'pie',data:{labels:['January','February','March','April','May'],datasets:[{data:[50,60,70,180,190]}]}}">
Example chart {
  type: 'pie',
  d...

Edit this example

Doughnut chart

See Doughnut Chart documentation. You can also use options from the Chart.js doughnutlabel plugin, in addition to the datalabels plugin.

Learn how to customize doughnut chart labels.

<img src="https://quickchart.io/chart?c={type:'doughnut',data:{labels:['January','February','March','April','May'],datasets:[{data:[50,60,70,180,190]}]},options:{plugins:{doughnutlabel:{labels:[{text:'550',font:{size:20}},{text:'total'}]}}}}">
Example doughnut chart

Edit this example

Polar chart

Polar charts are like pie and doughnut charts, except each segment has the same angle and the radius of the segments varies based on the value. See Polar Area Chart documentation.

<img src="https://quickchart.io/chart?c={type:'polarArea',data:{labels:['January','February','March','April','May'],datasets:[{data:[50,60,70,180,190]}]}}">
Example polar chart

Edit this example

Scatter Plot

See Scatter chart documentation

<img src="https://quickchart.io/chart?c={type:'scatter',data:{datasets:[{label:'Data1',data:[{x:2,y:4},{x:3,y:3},{x:-10,y:0},{x:0,y:10},{x:10,y:5}]}]}}">
Example scatter plot

Edit this example

Bubble chart

Bubble is similar to Scatter, except the r variable defines bubble radius in pixels. Bubble Chart documentation

<img src="https://quickchart.io/chart?c={type:'bubble',data:{datasets:[{label:'Data1',data:[{x:1,y:4,r:9},{x:2,y:4,r:6},{x:3,y:8,r:30},{x:0,y:10,r:1},{x:10,y:5,r:5}]}]}}">
Example bubble chart

Edit this example

Radial Gauge / "Meter" Charts

View the options at chartjs-radial-gauge for customization details.

<img src="https://quickchart.io/chart?c={type:'radialGauge',data:{datasets:[{data:[70],backgroundColor:'green'}]}}">
Example radial gauge chart

Edit this example

Box Plots and Violin Charts

You can use violin, boxplot, horizontalBoxPlot, and horizontalViolin chart types. View the options at chartjs-chart-box-and-violin-plot for customization details.

<img src="https://quickchart.io/chart?c={type:'violin',data:{labels:[2012,2013,2014,2015],datasets:[{label:'Data',data:[[12,6,3,4],[1,8,8,15],[1,1,1,2,3,5,9,8],[19,-3,18,8,5,9,9]],backgroundColor:'rgba(56,123,45,0.2)',borderColor:'rgba(56,123,45,1.9)'}]}}">
Example violin chart

Edit this example

:::tip For best results, add a scatter plot to your box or violin chart. :::

Sparklines

A sparkline is a special case of line graph with axes and other labeling removed. All line graph options can be applied. Read more about the sparkline API.

<img src="https://quickchart.io/chart?c={type:'sparkline',data:{datasets:[{data:[140,60,274,370,199]}]}}">
Example sparkline

Edit this example

Progress bars

A progress bar is a special case of a horizontal bar chart with axes and other labeling removed. All bar options can be applied.

The first dataset specifies the number shown. By default, this number is a percentage and the total value is 100. If your data is not out of 100, add a second dataset to override the total.

<img src="https://quickchart.io/chart?c={type:'progressBar',data:{datasets:[{data:[50]}]}}">
Example progress bar

Edit this example

Mixed charts

Combine charts together by specifying multiple types:

<img src="https://quickchart.io/chart?c={type:'bar',data:{labels:['January','February','March','April','May'],datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]},{type:'line',fill:false,label:'Potatoes',data:[100,400,200,400,700]}]}}">
Example mixed chart (line and bar)

Edit this example

More examples

Additional chart examples are available in the Chart Gallery.