How to draw a line in line chart for single value in Charts.JS

Question

I need to plot a single value in line chart. Currently i am using charts.JS library for line graph purpose.

The data will be varied some times i'll get the single data inside the data set at that time i need to plot the single value in the line chart.

I had tried with the charts.js annotation plugin but it didn't meet my requirements. which is like it wis overlapping the plotted point in the graph area.

My code

createLineChart() {
   this.lineChart = new Chart(this.lineCanvas.nativeElement, {
      type: "line",

      data: {
        labels:[],

        datasets: [
          {
            fill: false,

            backgroundColor: "#0168FF",
            borderColor: "#0168FF",
            pointBackgroundColor: "white", // wite point fill
            pointBorderWidth: 1, // point border width
            lineTension: 0,
            pointBorderColor: "blue",
            pointRadius: 4,
          },
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                padding: 20,
                beginAtZero: true,
                min: 0,

                stepSize: 100,
              },
              gridLines: {
                drawBorder: false,
              },
            },
          ],
          xAxes: [
            {
             // offset: true,
              ticks: {
                display: false,
               //beginAtZero: true,
               min: 0,

              },
              gridLines: {
                zeroLineColor: "transparent",
                drawBorder: false,
                display: false,
              },
              //offset:true, 
            },
          ],
          legend: {
            display: false,
          },
          tooltips: {
            enabled: false,
          },
        },
          drawTime: "afterDraw", // (default)
        } as ChartOptions,
       // plugins: [ChartAnnotation]
      },
    });
  }

To plot the data dynamically:

generateRandomDataSet(size) {
    let yaxisArr = [];
    let xaxisArr = [];
    let random_data:any = this.getRandomData(size)
    let maxYTickVal = Math.max.apply(Math, random_data.map((val) => {return val.yaxis}));
    let maxVal = Math.ceil((maxYTickVal+1) / 10) * 10

    for(let data of random_data) {
      yaxisArr.push(data.yaxis)
      xaxisArr.push(data.xaxis)
    }

    this.lineChart.data.datasets[0].data = yaxisArr
    this.lineChart.config.data.labels = []
    this.lineChart.config.data.labels = xaxisArr
    this.lineChart.config.options.scales.yAxes[0].ticks.max =maxVal
    this.lineChart.config.options.scales.yAxes[0].ticks.stepSize = maxVal/2

    this.lineChart.update()
  }

What i required

What i am getting

Thankyou.

uminder · Accepted Answer · 2020-06-03T04:19:06.607

There exists different approaches to solve this problem.

According to the answer I gave to a similar question, you can define an animation.onComplete function to draw the line.
In a comment on before mentioned answer, Lakshmansundeep suggested an approach where he defines the same data value three times but makes sure, pointRadius for the leading and ending data point is zero.

datasets: [{
  data: [120, 120, 120],
  ...
  pointRadius: [0, 4, 0],
  pointHoverRadius: [0, 4, 0],
}],

For the second approach, please have a look at the code below.

new Chart('line-chart', {
  type: "line",
  data: {
    labels: [null, 'A', null],
    datasets: [{
      data: [120, 120, 120],
      fill: false,
      backgroundColor: "#0168FF",
      borderColor: "#0168FF",
      pointBackgroundColor: "white",
      pointBorderWidth: 1,      
      lineTension: 0,
      pointBorderColor: "blue",
      pointRadius: [0, 4, 0],
      pointHoverRadius: [0, 4, 0],
    }],
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      yAxes: [{
        ticks: {
          padding: 20,
          min: 0,
          stepSize: 100
        },
        gridLines: {
          drawBorder: false
        }
      }],
      xAxes: [{
        ticks: {
          display: false
        },
        gridLines: {
          zeroLineColor: "transparent",
          drawBorder: false,
          display: false
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>

How to draw a line in line chart for single value in Charts.JS

1 Answers1