You are currently viewing How to design a Bar chart with custom options with chart.js
How to design a Bar chart with custom options with chart.js

How to design a Bar chart with custom options with chart.js

How to design a Bar chart with custom options with chart.js

If you are looking for code to design a Bar chart with custom options with chart.js then you are at the right place. This blog post help you with the coding sample.

Please check and test the below code for more details.

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>

<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
var xValues = ["Italy", "France", "Spain", "USA", "India"]; 

new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
    label: '2020',
      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
       borderColor:  'rgba(255,99,132,1)', 
        borderWidth: 1,
    },{
    label: '2021',
      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
     backgroundColor: 'rgba(54, 162, 235, 0.2)',
       borderColor:  'rgba(54, 162, 235, 1)', 
        borderWidth: 1,
    },{
    label: '2022',
      data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
     backgroundColor: 'rgba(255, 206, 86, 0.2)',
       borderColor:  'rgba(255, 206, 86, 1)', 
        borderWidth: 1,
    }]
  },
  options: {
    legend: {display: true},
    title: {
      display: true,
      text: "World Cotton Production 2020-2022"
    }
  }
});
</script>

</body>
</html>

Here is the output

How to design a Bar chart with custom options with chart.js
You can update the data, background color, border color, and border width based on your requirements. You can also add multiple bars same as the above example.

I hope the above code with help you to design a better bar chart with chart,js

Here are the helpful color code for the background-color and border-color

  backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
        ],