Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – CanvasJs Date Format on x Axis

I’m creating a column chart with data:

{
    xValueFormatString: "MMM YYYY",
    dataPoints: [
      { x: new Date(2024, 0), y: 71 },
      { x: new Date(2024, 1), y: 79 }
    ]
}

xValueFormatString is not working to format the x values and chart shows range of dates that doesn’t belong to the dataPoints.

I also tried to do the xAxis ValueFormatString property but it doesn’t seem to work also.

https://jsfiddle.net/pcha1xf5/2/

Can you help me please?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here's a working solution in case you have encountered the same issue:

    In dataPoints, I used the label property instead of using x. Then added an xAxis label formatter for the date label:

    axisX:{      
        labelAngle: -50,
        labelFormatter: function(e) {
          return CanvasJS.formatDate(e.label, "MMM YYYY");
         }
}

    Here's the fiddle for reference: https://jsfiddle.net/w8dbzfnc/3/

    I am still not sure why using x in dataPoints mess up the xAxis labels showing range of dates that aren't part of the data set. Please let me know


  2. 0

    Format defined in xValueFormatString is applied for x-value shown in Tooltip & indexlabels. To format axis labels, you need to use valueFormatString in axisX. Along with valueFormatString, you can set interval to 1 month so that labels doesn’t repeat.

    var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Basic Column Chart"
  },  
  axisX:{      
    labelAngle: -50,
    valueFormatString: "MMM YYYY",
    interval: 1,
    intervalType: "month"
  },
  data: [{
    dataPoints: [
      { x: new Date(2024, 0), y: 71 },
      { x: new Date(2024, 1), y: 79 }
    ]
  }]
});

chart.render();
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 250px; width: 100%;"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search