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
JavaScript
x
45
45
1
var myChart = new Chart(ctx, {
2
type: 'line',
3
data: {
4
labels: label,
5
datasets: [{
6
steppedLine: true,
7
label: info.process[i].name,
8
data: info.process[i].chart,
9
backgroundColor: [
10
'rgba(255, 255, 255, 0.5)'
11
],
12
borderColor: [
13
'rgba(255, 255, 255, 1)'
14
],
15
borderWidth: 1,
16
pointBackgroundColor: 'yellow',
17
pointBorderColor: 'black',
18
pointRadius: '4',
19
pointHoverRadius: '6'
20
}]
21
},
22
options: {
23
maintainAspectRatio: false,
24
scales: {
25
yAxes: [{
26
gridLines: {
27
color: 'rgba(0, 0, 0, 0.5)',
28
},
29
ticks: {
30
beginAtZero: true,
31
stepSize: 1,
32
fontColor: 'rgba(255, 255, 255, 1)'
33
}
34
}],
35
xAxes: [{
36
gridLines: {
37
color: 'rgba(0, 0, 0, 0.5)',
38
},
39
ticks: {
40
fontColor: 'white'
41
}
42
}]
43
}
44
}
45
});
Advertisement
Answer
Replace the following definition in your dataset…
JavaScript
1
2
1
pointRadius: '4',
2
…with the following code:
JavaScript
1
7
1
pointRadius: info.process[i].chart.map((v, index) => {
2
if (index == 0 || v != info.process[i].chart[index - 1]) {
3
return 4;
4
}
5
return 0;
6
}),
7
If you also don’t want to see the missing points on hover, do the same with pointHoverRadius: '6'
.