Visualize your data in 6 different ways. Each of them animated, with a load of customisation options and interactivity extensions. Chart.js uses the HTML5 canvas element. It’s supported in all modern browsers.

var MyPieOps = { animation: true, responsive : true , }; var MyPieData = [{ value : 10, label : "Bread" , color : "#69D2E7" },{ value : 5, label : "Butter" , color : "#E0E4CC" },{ value : 15, label : "Milk" , color : "#F38630" },{ value : 30, label : "Oil" , color : "#96CE7F" },{ value : 27, label : "Salt" , color : "#CEBC17" },{ value : 3, label : "Water" , color : "#CE4264" }];var ctx = document.getElementById("MyPie").getContext("2d"); var wpChartMyPiePie = new Chart(ctx).Pie(MyPieData,MyPieOps);

var MyDoughnutOps = { animation: true, responsive : true , }; var MyDoughnutData = [{ value : 10, label : "Bread" , color : "#69D2E7" },{ value : 5, label : "Butter" , color : "#E0E4CC" },{ value : 15, label : "Milk" , color : "#F38630" },{ value : 30, label : "Oil" , color : "#96CE7F" },{ value : 27, label : "Salt" , color : "#CEBC17" },{ value : 3, label : "Water" , color : "#CE4264" }];var ctx = document.getElementById("MyDoughnut").getContext("2d"); var wpChartMyDoughnutDoughnut = new Chart(ctx).Doughnut(MyDoughnutData,MyDoughnutOps);

Pie and doughnut charts are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows a the proportional value of each piece of data. They are excellent at showing the relational proportions between data.

Polar area charts are similar to pie charts, but each segment has the same angle – the radius of the segment differs depending on the value. This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.

var MyPolarOps = { animation: true, responsive : true , scaleFontSize: 12,scaleFontColor: "#666",scaleOverride:false,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null}; var MyPolarData = [{ value : 10, label : "Bread" , color : "#69D2E7" },{ value : 5, label : "Butter" , color : "#E0E4CC" },{ value : 15, label : "Milk" , color : "#F38630" },{ value : 30, label : "Oil" , color : "#96CE7F" },{ value : 27, label : "Salt" , color : "#CEBC17" },{ value : 3, label : "Water" , color : "#CE4264" }];var ctx = document.getElementById("MyPolar").getContext("2d"); var wpChartMyPolarPolarArea = new Chart(ctx).PolarArea(MyPolarData,MyPolarOps);

var MyBarOps = { animation: true, responsive : true , scaleFontSize: 12,scaleFontColor: "#666",scaleOverride:true,scaleSteps:10,scaleStepWidth:5,scaleStartValue:0}; var MyBarData = {labels : ["january"," february","march","april"],datasets : [{ fillColor : "rgba(105,210,231,1)", strokeColor : "rgba(105,210,231,1)", label : "Bread" , data : [20,5,36,7] },{ fillColor : "rgba(224,228,204,1)", strokeColor : "rgba(224,228,204,1)", label : "Butter" , data : [20,40,35,9] }]};var ctx = document.getElementById("MyBar").getContext("2d"); var wpChartMyBarBar = new Chart(ctx).Bar(MyBarData,MyBarOps);

A bar chart is a way of showing data as bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the comparison of two data sets.

var MyLineOps = { animation: true, responsive : true , scaleFontSize: 12,scaleFontColor: "#666",scaleOverride:true,scaleSteps:10,scaleStepWidth:5,scaleStartValue:0}; var MyLineData = {labels : ["january"," february","march","april"],datasets : [{ fillColor : "rgba(105,210,231,0.3)", strokeColor : "rgba(105,210,231,1)", pointColor : "rgba(105,210,231,1)", pointStrokeColor : "#FFFFFF", data : [20,5,36,7] },{ fillColor : "rgba(224,228,204,0.3)", strokeColor : "rgba(224,228,204,1)", pointColor : "rgba(224,228,204,1)", pointStrokeColor : "#FFFFFF", data : [20,40,35,9] }]};var ctx = document.getElementById("MyLine").getContext("2d"); var wpChartMyLineLine = new Chart(ctx).Line(MyLineData,MyLineOps);

var MyRadarOps = { animation: true, responsive : true , scaleFontSize: 12,scaleFontColor: "#666",scaleOverride:true,scaleSteps:10,scaleStepWidth:5,scaleStartValue:0}; var MyRadarData = {labels : ["january"," february","march","april"],datasets : [{ fillColor : "rgba(105,210,231,0.3)", strokeColor : "rgba(105,210,231,1)", pointColor : "rgba(105,210,231,1)", pointStrokeColor : "#FFFFFF", data : [20,5,36,7] },{ fillColor : "rgba(224,228,204,0.3)", strokeColor : "rgba(224,228,204,1)", pointColor : "rgba(224,228,204,1)", pointStrokeColor : "#FFFFFF", data : [20,40,35,9] }]};var ctx = document.getElementById("MyRadar").getContext("2d"); var wpChartMyRadarRadar = new Chart(ctx).Radar(MyRadarData,MyRadarOps);

A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.