Why canvasjs spline chart shows 00:00 in axis x

Question

I have canvasJS V3.6.7, where i want to display temperature data in a spline graph.

Simple data set:

chartTempData = [];
chartTempData.push(
    {x: new Date(2022,7,26,16,24), y: 32.3},
    {x: new Date(2022,8,7,12,21), y: 35.3},
);

The chart options:

chartTempOptions = {
    axisX: {
        title: "Mérés ideje",
        valueFormatString: "HH:mm DD MMM"
    },
    axisY: {
        title: "Celsius °C",
    },
    data: [{
        yValueFormatString: "#0.## °C",
        xValueFormatString: "HH:mm",
        type: "spline",
        xValueType: "dateTime",
        dataPoints: chartTempData
    }]
};

In the X Axis i can see the days, but the time part is 00:00. so, it seems valueFormatString is not working properly.

When I select a data point, though i can see the proper time part of the data point.

Answer 1

Axis labels are rendered at every interval from a auto-calculated initial point & not for every datapoint. Please refer this forum thread for more information. In your case, you can pass label property and make it a category axis instead of passing x-value. Below is the working code.

var chart = new CanvasJS.Chart("chartContainer", {
  axisX: {
    title: "Mérés ideje",
    valueFormatString: "HH:mm DD MMM"
  },
  axisY: {
    title: "Celsius °C",
  },
  data: [{
    yValueFormatString: "#0.## °C",
    xValueFormatString: "HH:mm",
    type: "spline",
    xValueType: "dateTime",
    dataPoints: [
      { label: "16:24 26 Aug", y: 32.3},
      { label: "12:21 12 Sep", y: 35.3},
    ]
  }]
});

chart.render();

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>