Chartjs-How to Draw a line on chart without a plot point using chart.js

by

1👍

Have you tried Area charts with fill set to false? Check out the samples here https://www.chartjs.org/samples/latest/charts/area/line-boundaries.html

It’s kind of a hack but you can append the data with an extra point and update its styles to keep it hidden, Refer to our fiddle https://jsfiddle.net/hpdr5jf1/

Relative code

var options = {
  type: 'line',
  data: {
    labels: ["", "Actual Data"],
    datasets: [
        {
          label: 'Data Point',
          data: [12, 12],
        pointRadius: [0],
        pointHitRadius: [0],
        borderWidth: 1,
        fill: false,
        borderColor: 'red'
        }
        ]
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myChart = new Chart(ctx, options);

Leave a comment