在quickchart js中更改进度条的边框颜色

Question

i'm using quickchart.js to create a progress bar and i have a problem. When I create a progress bar by assigning it a background color it works but there is a permanent blue border that I can't remove. Here the first example

I tried to change the color of the border but it does not change this border. Here the second example with border color

{
  type: 'progressBar',
  data: {
    datasets: [{
      backgroundColor: '#32cd32',
      data: [50],
      datalabels: {
          font: {
              style: 'Arial',
              size: 18,
          }
      }
    }]
  }
}

Is there a possibility to remove this border or change its color?

Answer 1

You can define a second dataset that specifies the total (100%) of the progress bar.

In order to remove the border, this could look as follows:

{
  type: 'progressBar',
  data: {
    datasets: [{
      backgroundColor: '#32cd32',
      data: [50]
    },
    {      
      borderColor: 'white',
      data: [100]
    }]
  }
}

Simply change borderColor in case you want a specific border to be drawn.