CODEWITHSUNDEEP
chart.js
Jason Yang
Jason Yang

Reputation: 157

How to use Chart.js to draw solid points

I recently used Chart.js to draw charts on my web page. Now that I'm having a problem, I've read Chart.js's document and found no way to draw solid points. Does anyone have this problem? enter image description here

Upvotes: 1

Views: 1440

Answers (3)

mcqj
mcqj

Reputation: 53

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)',

Upvotes: 0

zbz.lvlv
zbz.lvlv

Reputation: 3797

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]

Upvotes: 1

Adam Dudley
Adam Dudley

Reputation: 126

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

Upvotes: 2

Related Questions