Search code examples
javascripthtmlcssgraphchart.js

Chart.js color change of the data points

I want to make the dots solid color instead of a border of the line color. How do I remove the border color from the data points and make it a solid color?

Current Output:

enter image description here

What I want: enter image description here

Solution

  • You can set point and point border to same color.

    datasets: [
    {
      label: 'Dataset 1',
      data: Utils.numbers(NUMBER_CFG),
      fill: false,
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: '#1F363D', # Here
      borderWidth: 1,
      pointRadius: 5,
      pointBorderColor: '#1F363D' #Here
    },

    enter image description here