How to customize horizontal bar in chart.js?

@muriel.schmidt 

To customize the horizontal bar in Chart.js, you can modify various options and settings. Here are the steps to customize the horizontal bar:

1. Install Chart.js: If you haven't already, you'll need to install Chart.js. You can do this by including the Chart.js library in your HTML file or by using a package manager like npm.
2. Create a canvas element: Add a canvas element to your HTML file, where you want to render the chart. Give it an ID so you can reference it later.

1

<canvas id="myChart"></canvas>

1. Initialize and configure the chart: In your JavaScript file, initialize the chart object and specify the data and options for the horizontal bar chart.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// Create a chart context
var ctx = document.getElementById('myChart').getContext('2d');

// Define the chart data
var chartData = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [{
    label: 'Dataset 1',
    data: [10, 20, 30],
    backgroundColor: 'rgba(255, 99, 132, 0.5)', // Change color of bars
    borderWidth: 1, // Change the border width around bars
  }]
};

// Define the chart options
var chartOptions = {
  responsive: true,
  scales: {
    x: {
      beginAtZero: true, // Start y-axis at 0
      max: 50 // Change the maximum value on y-axis
    }
  }
};

// Create the horizontal bar chart
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: chartData,
  options: chartOptions
});

1. Customize the chart: You can customize various aspects of the horizontal bar by modifying the chart options.

• Change colors: To change the background color of bars, specify a different value for the backgroundColor property in the dataset object.
• Adjust border width: You can modify the border width around the bars by changing the borderWidth property in the dataset object.
• Start y-axis at 0: To start the y-axis at 0, set the beginAtZero property to true in the scales section of the chart options.
• Modify y-axis maximum value: You can change the maximum value on the y-axis by setting the max property to a different value in the scales section.

These are just a few examples, and there are many more customization options available. You can refer to the Chart.js documentation for a complete list of options and settings: https://www.chartjs.org/docs/latest/