YouTip

A bar chart is a statistical chart that uses the length of rectangles as variables.

\n\n

Bar charts are used to compare two or more values (different times or different conditions), with only one variable, and are usually used for analysis of smaller datasets.

\n\n

The type property of a bar chart is bar, where type describes the chart type.

\n\n

const config = { type: 'bar', data: data, options: { scales: { y: { beginAtZero: true } } },};

\n\n

Next, let's create a simple bar chart:

\n\n

Example

\n\n

const ctx = document.getElementById('myChart');\n\nconst labels =['January','February','March','April','May','June','July'];// Set the labels for the X-axis\n\nconst data ={\n\n labels: labels,\n\n datasets:[{\n\n label:'My first bar chart',\n\n data:[65,59,80,81,56,55,40],\n\n backgroundColor:[// Set the background color for each bar chart\n\n'rgba(255, 99, 132, 0.2)',\n\n'rgba(255, 159, 64, 0.2)',\n\n'rgba(255, 205, 86, 0.2)',\n\n'rgba(75, 192, 192, 0.2)',\n\n'rgba(54, 162, 235, 0.2)',\n\n'rgba(153, 102, 255, 0.2)',\n\n'rgba(201, 203, 207, 0.2)'\n\n],\n\n borderColor:[//Set the border line color for each bar chart\n\n'rgb(255, 99, 132)',\n\n'rgb(255, 159, 64)',\n\n'rgb(255, 205, 86)',\n\n'rgb(75, 192, 192)',\n\n'rgb(54, 162, 235)',\n\n'rgb(153, 102, 255)',\n\n'rgb(201, 203, 207)'\n\n],\n\n borderWidth:1// Set the line width\n\n}]\n\n};\n\nconst config ={\n\n type:'bar',// Set the chart type\n\n data: data,// Set the dataset\n\n options:{\n\n scales:{\n\n y:{\n\n beginAtZero:true// Set the Y-axis to start from 0\n\n}\n\n}\n\n},\n\n};\n\nconst myChart =new Chart(ctx, config);

\n\n

Try it »

\n\n

The output of the above example is:

\n\n

Horizontal Bar Chart

\n\n

A horizontal bar chart is a variation of the vertical bar chart, commonly used to display data trends and to compare multiple datasets side by side.

\n\n

To set up a horizontal bar chart, you need to set the indexAxis property in the options object to y. The default value of the indexAxis property is x.

\n\n

Example

\n\n

const ctx = document.getElementById('myChart');\n\nconst labels =['January','February','March','April','May','June','July'];// Set the labels for the X-axis\n\nconst data ={\n\n labels: labels,\n\n datasets:[{\n\n axis:'y',\n\n label:'My first bar chart',\n\n data:[65,59,80,81,56,55,40],\n\n fill:false,\n\n backgroundColor:[// Set the background color for each bar chart\n\n'rgba(255, 99, 132, 0.2)',\n\n'rgba(255, 159, 64, 0.2)',\n\n'rgba(255, 205, 86, 0.2)',\n\n'rgba(75, 192, 192, 0.2)',\n\n'rgba(54, 162, 235, 0.2)',\n\n'rgba(153, 102, 255, 0.2)',\n\n'rgba(201, 203, 207, 0.2)'\n\n],\n\n borderColor:[//Set the border line color for each bar chart\n\n'rgb(255, 99, 132)',\n\n'rgb(255, 159, 64)',\n\n'rgb(255, 205, 86)',\n\n'rgb(75, 192, 192)',\n\n'rgb(54, 162, 235)',\n\n'rgb(153, 102, 255)',\n\n'rgb(201, 203, 207)'\n\n],\n\n borderWidth:1// Set the line width\n\n}]\n\n};\n\nconst config ={\n\n type:'bar',// Set the chart type\n\n data: data,// Set the dataset\n\n options:{\n\n indexAxis:'y',\n\n}\n\n};\n\nconst myChart =new Chart(ctx, config);

\n\n

Try it »

\n\n

The output of the above example is: