How to customize border style on chart.js?

Member

by domenico , in category: Javascript , 4 months ago

How to customize border style on chart.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by ryan.murray , 4 months ago

@domenico 

To customize the border style on Chart.js, you can use the borderColor and borderWidth options. Here's an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My Dataset',
      data: [10, 20, 30, 40, 50, 60, 70],
      borderColor: 'red', // customize the border color
      borderWidth: 2 // customize the border width
    }]
  },
  options: {
    // other chart options
  }
});


In the datasets array, you can set the borderColor property to any valid color value. It can be a color name (e.g., 'red'), a hex code (e.g., '#FF0000'), an RGB value (e.g., 'rgb(255,0,0)'), or an RGBA value (e.g., 'rgba(255,0,0,0.5)').


You can also customize the borderWidth property to set the thickness of the border. The value can be any positive number.


These options can be applied to various types of charts, such as line, bar, and ****ter. Just make sure to specify borderColor and borderWidth for the desired dataset.