I want to hide some points on my chart. I just want to show some points that it is starting or ending. Please check the picture. I want like P1 in the picture How can i hide them ? Example
var myChart = new Chart(ctx, { type: 'line', data: { labels: label, datasets: [{ steppedLine: true, label: info.process[i].name, data: info.process[i].chart, backgroundColor: [ 'rgba(255, 255, 255, 0.5)' ], borderColor: [ 'rgba(255, 255, 255, 1)' ], borderWidth: 1, pointBackgroundColor: 'yellow', pointBorderColor: 'black', pointRadius: '4', pointHoverRadius: '6' }] }, options: { maintainAspectRatio: false, scales: { yAxes: [{ gridLines: { color: 'rgba(0, 0, 0, 0.5)', }, ticks: { beginAtZero: true, stepSize: 1, fontColor: 'rgba(255, 255, 255, 1)' } }], xAxes: [{ gridLines: { color: 'rgba(0, 0, 0, 0.5)', }, ticks: { fontColor: 'white' } }] } } });
Advertisement
Answer
Replace the following definition in your dataset…
pointRadius: '4',
…with the following code:
pointRadius: info.process[i].chart.map((v, index) => { if (index == 0 || v != info.process[i].chart[index - 1]) { return 4; } return 0; }),
If you also don’t want to see the missing points on hover, do the same with pointHoverRadius: '6'
.