Change size of a specific point on a line chart in Chart.js

Question

I want to change the size of a specific point on a line chart in Chart.js. I saw in this answer how to change the color of a point but I can't find a solution for changing its size. Any ideas?

// dataArray and labelsArray are hard-coded arrays of int values.
var lineChartData = {
    datasets: [{
        data: dataArray,
        pointStrokeColor: "#fff",
        fillColor: "rgba(220,220,220,0.5)",
        pointColor: "rgba(220,220,220,1)",
        strokeColor: "rgba(220,220,220,1)"
    }],
    labels: labelsArray
};

// Changing color of point #5
myLineChart.datasets[0].points[4].fillColor =  "#FF0000";

// Changing point's size
// TODO:

Maybe this answer can help you: http://stackoverflow.com/questions/31522001/chart-js-change-size-of-label-of-radar-chart — Jeroen Bellemans, May 03 '16 at 08:43
@JeroenBellemans - I can't find anything useful there. Could you be more specific please? — Yulian, May 03 '16 at 08:47
Wasn't there an accepted answer with the options to increase the size of the dots & labels? — Jeroen Bellemans, May 03 '16 at 08:51
@Yulian below i post the answer try this ? May it can help you.. — Akhilesh Singh, May 03 '16 at 08:52

score 5 · Answer 1 · answered Jan 22 '19 at 06:31

Late Answer. But it'll be helpful for the people who is searching for this.

Code to set different point size in line chart in Chart.js.

var speedCanvas = document.getElementById("speedChart");

var pointRadius=[];
var dataFirst = {
    label: "Car A - Speed (mph)",
    data: [10, 59, 75, 25, 20, 65, 40],
    lineTension: 0.3,
    fill: false,
    borderColor: 'red',
    backgroundColor: 'transparent',
    pointBackgroundColor: 'green',
    pointBorderColor:'green',
    pointRadius: pointRadius
  };

var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [dataFirst]
};

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  }
};

var lineChart = new Chart(speedCanvas, {
  type: 'line',
  data: speedData,
  options: chartOptions
});

for(var i=0;i<this.lineChart.data.datasets[0].data.length;i++){
  pointRadius.push(i);
}
lineChart.update();

The below code is to set the point size.

for(var i=0;i<this.lineChart.data.datasets[0].data.length;i++){
  pointRadius.push(i);
}
lineChart.update();

This method is working in latest versions of ChartJS

Running CodePen Example : CodePen Example

You should add at least a little comment, why this is working: Some point properties are "indexabe" (see https://www.chartjs.org/docs/latest/general/options.html#indexable-options). Means: If you define a single property, like pointRadius = 5. Chart.js will not automatically create a property for every point created. So you cannot just adress chart.data.datasets[0].pointRadius[5]. You have to provide the property as an array, either via callback (https://stackoverflow.com/a/59119270/2360229) or fixed, like pointRadius = [1,2,3,4,5] — n.r., Oct 04 '20 at 21:41

score 0 · Answer 2 · edited May 23 '17 at 11:53

You can Simply increase the size of dot in line chart follow the Documentation of Chart.js. There is customizing method is available.

You can try this:

var myLineChart = Chart.Line(ctx, {
    pointDot: false,
    pointLabelFontSize: 20
});

lineChartData = {
datasets: [{
    data: dataArray,
    pointStrokeColor: "#fff",
    fillColor: "rgba(220,220,220,0.5)",
    pointColor: "rgba(220,220,220,1)",
    strokeColor: "rgba(220,220,220,1)"
}],
labels: labelsArray
};

// Changing color of point #5
   myLineChart.datasets[0].points[4].fillColor =  "#FF0000";

pointLabelFontSize: 20 // Font Size in pixel

Refrence1

Linechart

Change size of a specific point on a line chart in Chart.js

2 Answers2