[Chartjs]-How to use Chart.js to draw solid points

by

2👍

✅

Found this in the docs here I believe you would want to use something like the below, just adding a backgroundColor to your data in the dataset:

var chartData = {
    datasets: [{
        data: [45, 25, 20, 10],
        backgroundColor: [
            '#ff6384',
        ]
    }]
};

I’ve not tested so you might need to do the borderColour as well:

var chartData = {
    datasets: [{
        data: [45, 25, 20, 10],
        backgroundColor: [
            '#ff6384',
        ],
        borderColor: [
            '#ff6384',
        ]
    }]
};

Pretty sure this is how I did it on my line graph (however i wanted a different border colour), if you still have issues let me know and i’ll have a test

1👍

I used pointBackgroundColor: 'rgba(153, 124, 194, 0.5)' under each dataset to configure the background colour of the point.

You can find it here, under "Dataset Properties":
[https://www.chartjs.org/docs/latest/charts/line.html][1]

0👍

The pointBackgroundColor is a better option than backgroundColor. Using backgroundColor will not achieve the desired result in all cases as it will change the background of other parts of a chart (e.g. the enclosed section of a radar graph) as well as the points. You probably won’t want the same colour choice for both of these cases. You’re more likely to want something like:-

      backgroundColor: 'rgba(56, 99, 255, 0.2)',
      pointBackgroundColor: 'rgba(56, 99, 255, 1)',
      borderColor: 'rgba(56, 99, 255, 1)',

Leave a comment