title: How to plot a single value with line in line chart graph using charts.js?
body: <p>I need to plot a single value in line chart. Currently i am using charts.JS library for line graph purpose.</p>
  
  <p>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 with line in the line chart.</p>
  
  <p>I tried with the charts.js annotation plugin but it wasn't met my requirements. which is like it wis overlapping the plotted point in the graph area.</p>
  
  <p>CODE WHICH I HAD TRIED</p>
  
  <pre><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]
        },
      });
    }
  </code></pre>
  
  <p>To generate dynamic data and plot in the graph area.</p>
  
  <pre><code>generateRandomDataSet(size) {
      let yaxisArr = [];
      let xaxisArr = [];
      let random_data:any = this.getRandomData(size)
      let maxYTickVal = Math.max.apply(Math, random_data.map((val) =&gt; {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)
      }
  
  
  
      console.log("X-Axis array values : "+xaxisArr)
      console.log("Y-Axis array values : "+yaxisArr)
      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()
    }
  
  getRandomData(arraySize) {
    let data = []
    for(var i=1; i&lt;=arraySize; i++) {
      let number = Math.floor(Math.random() * 200) + 1
      data.push({'xaxis':i,'yaxis':number})
    }
    return data
    } 
  </code></pre>
  
  <p>with the above code i am getting like</p>
  
  <p><a href="https://i.stack.imgur.com/USWso.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/USWso.jpg" alt="enter image description here"></a></p>
  
  <p>what i need to have</p>
  
  <p><a href="https://i.stack.imgur.com/bIAoJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bIAoJ.jpg" alt="enter image description here"></a></p>