Chartjs-Chartjs datapoints breakes

by

1👍

✅

AFA I see, there is a bug in the chart configuration. The options node it’s wrong and it must be removed. This is the reason of the bug and why the scales are not what your are defining (see missing colors and correct position in your picture) and is using the defaults (linear ones).

let dailyGeneration = [
    { x: "00:01:00", y: 1 },
    { x: "00:10:00", y: 8 },
    { x: "00:16:00", y: 9 },
    { x: "00:21:00", y: 4 },
    { x: "00:53:00", y: 8 },
    { x: "01:01:00", y: 2 },
    { x: "01:03:10", y: 5 },
    { x: "01:11:01", y: 4 },
    { x: "01:21:20", y: 1 },
    { x: "02:12:00", y: 4 },
    { x: "03:00:00", y: 1 },
    { x: "04:00:00", y: 6 },
    { x: "05:00:00", y: 5 },
    { x: "06:00:00", y: 5 },
    { x: "07:00:00", y: 3 },
    { x: "08:00:00", y: 8 },
    { x: "09:00:00", y: 9 },
    { x: "10:00:00", y: 1 },
    { x: "11:00:00", y: 2 },
    { x: "12:00:00", y: 1.6 },
    { x: "13:00:00", y: 2.6 },
    { x: "14:00:00", y: 5.4 },
    { x: "15:00:00", y: 7.6 },
    { x: "16:00:00", y: 1.6 },
    { x: "16:01:00", y: 2.6 },
    { x: "16:20:00", y: 1.1 },
    { x: "17:00:00", y: 2.3 },
    { x: "18:00:00", y: 1.9 },
    { x: "19:00:00", y: 0.7 },
    { x: "20:00:00", y: 6 },
    { x: "21:00:00", y: 8 },
    { x: "22:00:00", y: 9 },
    { x: "23:00:00", y: 3.5 },
  ];
let montlyTotals = [
    { x: "00:01", y: 9 },
    { x: "01:00", y: 8 },
    { x: "02:00", y: 5 },
    { x: "03:00", y: 2.5 },
    { x: "04:00", y: 1.7 },
    { x: "05:00", y: 9.3 },
    { x: "06:00", y: 2.4 },
    { x: "07:00", y: 4.3 },
    { x: "08:00", y: 5.4 },
    { x: "09:00", y: 7.6 },
    { x: "10:00", y: 6.3 },
    { x: "11:00", y: 1.3 },
    { x: "12:00", y: 2.6 },
    { x: "13:00", y: 4.3 },
    { x: "14:00", y: 2.1 },
    { x: "15:00", y: 1.6 },
    { x: "16:00", y: 6 },
    { x: "17:00", y: 4 },
    { x: "18:00", y: 1 },
    { x: "19:00", y: 4.2 },
    { x: "20:00", y: 6.32 },
    { x: "21:00", y: 8.2 },
    { x: "22:00", y: 2.5 },
    { x: "23:00", y: 1.1 },
  ];
let dsMonthly = {
        type: "line",
        label: "Monthly Totals",
        data: montlyTotals,
        borderColor: "rgba(255,0,0,0.5)",
        backgroundColor: "rgba(255,0,0,0.5)",
        xAxisID: "monthly-x-axis",
        yAxisID: "monthly-y-axis",
      };
let yourData = {
    datasets: [
      {
        type: "line",
        label: "Daily Generation",
        data: dailyGeneration,
        borderColor: "rgba(0,0,255,1)",
        xAxisID: "daily-x-axis",
        yAxisID: "daily-y-axis",
      }
    ],
  };

  const yourOptions = {
      responsive: true,
      plugins: {
        legend: {
          position: "top",
        },
        title: {
          display: true,
          text: "Chart.js Line Chart",
        },
      },
      scales: {
        "daily-x-axis": {
          type: "time",
          time: {
            unit: "hour",
            displayFormats: {
              hour: "HH:mm",
            },
            tooltipFormat: "dddd, MMM DD, YYYY",
          },
          ticks: {
            minRotation: 80,
            maxRotation: 90,
            color: "blue",
          },
          position: "bottom",
        },
        "monthly-x-axis": {
          type: "time",
          time: {
            unit: "hour",
            displayFormats: {
              hour: "HH:mm"
            },
            tooltipFormat: "MMM, YYYY",
          },
          ticks: {
            color: "green",
          },
          position: "bottom",
        },
        "daily-y-axis": {
          position: "left",
          title: {
            display: true,
            text: "kWh / day",
            color: "blue",
          },
          ticks: {
            color: "blue",
          },
        },
        "monthly-y-axis": {
          position: "right",
          title: {
            display: true,
            text: "total kWh / month",
            color: "green",
          },
          ticks: {
            color: "green",
          },
        },
      },
  };
const ctx = document.getElementById("myChart");

const myChart = new Chart(ctx, {
  type: 'line',
  data: yourData,
  options: yourOptions
});

document.getElementById('month').addEventListener('click', function() {
  myChart.data.datasets.push(dsMonthly);
  myChart.update();
  document.getElementById('month').disabled = true;
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.0.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.2.0/dist/chartjs-adapter-luxon.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
    <button id="month">Add month dataset</button> 
  </body>
</html>

Leave a comment