Chartjs-My charts doesn't work after inserting X-axis

0👍

There is not problem with option for x-axis.

I bet there is a problem with dataset.

Dataset of x and y should be specified.

Following snippet will help you.

var ctx2 = document.getElementById("myChart2");
      var myChart = new Chart(ctx2, {
        type: "bar",
        data: {
          datasets: [
            {
              label: "US Dates",
              data: [
                {
                  x: "04/01/2014",
                  y: 175,
                },
                {
                  x: "10/01/2014",
                  y: 175,
                },
                {
                  x: "04/01/2015",
                  y: 178,
                },
                {
                  x: "10/01/2015",
                  y: 178,
                },
              ],
              backgroundColor: "rgba(255, 99, 132, 0.2)",
              borderColor: "rgba(255, 99, 132, 1)",
              borderWidth: 2,
            },
            {
              label: "UK Dates",
              data: [
                {
                  x: "04/01/2014",
                  y: 143,
                },
                {
                  x: "10/1/2014",
                  y: 175,
                },
                {
                  x: "04/01/2015",
                  y: 165,
                },
                {
                  x: "10/1/2015",
                  y: 178,
                },
              ],
              backgroundColor: "rgba(99, 255, 132, 0.2)",
              borderColor: "rgba(99, 255, 132, 1)",
              borderWidth: 2,
            },
          ],
        },
        options: {
          responsive: true,
          title: {
            display: true,
            text: "Chart.js Time Scale",
          },
          scales: {
            xAxes: [
              {
                type: "time",
                position: "bottom",
                time: {
                  displayFormats: { day: "MM/YY" },
                  tooltipFormat: "DD/MM/YY",
                  unit: "month",
                },
              },
            ],
            yAxes: [
              {
                scaleLabel: {
                  display: true,
                  labelString: "value",
                },
              },
            ],
          },
        },
      });

Leave a comment