Chartjs-Chart.js – how to draw and manage line when only one label present in chart js Linechart

by

0👍

✅

Chart.js does not support this kind of use case since it gives a distorted image of your chart since point and label don’t align anymore. If you really want this you can check beforehand in your code if there is only 1 data point there. If this is the case add an empty string in your labels array in the front and back and add zero at the front of back of your data array (or a slightly lower value as your single datapoint so that the scales don’t get big steps) like so:

var config = {
  type: 'line',
  data: {
    labels: ["", "January-2021", ""],
    datasets: [{
      label: "month-year",
      data: [0, 134335066, 0],
      backgroundColor: "rgb(118, 101, 228)",
    }],
  },
  scales: {},
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<div class="myChart">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>

  <canvas id="myChart"></canvas>
</div>

0👍

You can use align option:

var mybarChart = new Chart(ctx, {
  type: 'bar',
  responsive: true,
  data: data,
  options: {
    legend: {
      display: false,
      position: 'bottom',
      align: 'center'
    },


var config = {
  type: 'line',
  data: {
    labels: ["", "January-2021", ""],
    datasets: [{
      label: "month-year",
      data: [0, 134335066, 0],
      backgroundColor: "rgb(118, 101, 228)",
    }],

  options: {
        legend: {
          display: false,
          position: 'bottom',
          align: 'center'
        },

  },
  scales: {},
};

refer to this

Leave a comment