Skip to content
Advertisement

How can I hide points on chart?

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'.

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement