Home Forums Chart Support date time formatting issues

date time formatting issues

Viewing 12 posts - 1 through 12 (of 12 total)
  • #10150


    I’m plotting a graph of temp/humidity date against time, and the graph shows the time/dae in full ISO format when you mouse over it. I tried using valueFormatString to reduce this to just date and time (dd/mm/yyyy hh:mm), but it doesn’t work (doesn’t throw any errors either). I’m also trying to plot the labels on the x axis as just date (in a dd/mm/yyyy format) but this only functions for the initial date, and then reports the equivalent of a 0 (01/01/1970).

    I thought it might be an issue with the formatting of my text in the csv file, so changed that to ISO format, as below.

    Data is being read from a CSV file – format:
    “2016-04-05 23:03:00,20.8,54.60%”

    Any help greatly appreciated!

    fiddle of javascript



    In the JSFiddle that you have shared, we observe that the ISO-format for date-time that you are using is not proper [Correct Format – new Date(“YYYY-MM-DDTHH:MM:SS”)]. Also the csv file is missing, because of which we are unable debug / understand the use-case properly. Passing proper date-time values should work fine in your case. Please refer this documentation page for more information on using date-time values. Please take a look at this JSFiddle for an example on using date-time values.
    chart with timestamp values on x axis

    Vishwas R
    Team CanvasJS


    I couldn’t work out a way to upload the csv file, but it follows the format as below: (if you can tell me how to upload it to the fiddle I will)

    2016-04-05 23:03:00,20.8,54.60%

    Inputting that date format into your code works, and prints the date as expected, so I’m unsure as to why it won’t with my code using the same formatting values?



    Can you kindly use this JSFiddle and reproduce the issue you are facing. The JSFiddle uses CSV data to render the chart.

    Having a JSFiddle with the issue you are facing would help us understand the scenario better and help you resolve.

    Vishwas R
    Team CanvasJS


    Fiddle won’t let me use jquery.canvasjs.min.js as a http external resource (from here: https://cdn.canvasjs.com/jquery.canvasjs.min.js) so I can’t replicate the issue with my fiddle.

    HOWEVER – copy and pasting my code incl the data into your fiddle replicates the issue. http://jsfiddle.net/4bc9v3hd/14/

    Note how the tooltip shows the full ISO datetime (I am trying to make it show only the date and time) and the legend shows on 01/01/1970 for all points.



    In the JSFiddle that you have shared, we observe that you are not providing x-values, because of which the date starts from Jan 1 1970 – as x-values are auto-assigned as 1,2,3,… internally. As the axis is dateTime axis, we suggest you to use intervalType along with interval to set the interval but to pass x-values.

    Here is the working fiddle with formatted-labels in “DD/MM/YYYY” format.
    multi series chart with data from csv

    Vishwas R
    Team CanvasJS


    Brilliant, that has fixed the x axis issue. However the toltip still shows the full ISO date – I tried using xValueFormatString in data or valueFormatString in axisX to format this as “DD/MM/YYYY HH:mm” but neither affect it. Am i trying to format it in the wrong way?




    You can define the format of x-value shown in tooltip & indexlabels by setting xValueFormatString. However if you like to completely format / custom-content in the tooltip content, you can use toolTipContent.
    customizing tooltip content in a chart

    Vishwas R
    Team CanvasJS


    What is the syntax for formatting toolTipContent – i.e. {label} shows the same effect, {label: ‘formatstring’} shows no specific formatting either?


    Further to that – using toolTip: {contentFormatter: function(e) {return CanvasJS.formatDate(e.value, "DD/MM/YYYY HH:mm");},
    formats it correctly, but removes the y value (and the {label} the value is now. Adding content: "{label}: {y}" doesn’t add the y value either.

    • This reply was modified 8 years, 1 month ago by mmfc.
    • This reply was modified 8 years, 1 month ago by mmfc.

    I’ve mostly resolved my issue now –

    toolTip: { contentFormatter: function(e) { return CanvasJS.formatDate(e.entries[0].dataPoint.label, "DD/MM/YYYY HH:mm")+": "+e.entries[0].dataPoint.y; },

    Displays the text formatted correctly.

    Could you point me in the direction of the colours etc to make it match the rest of theme1?



    You can customize & style the tooltip to fit in your requirements using properties like borderColor, fontColor and backgroundColor.

    toolTip: {
    	borderColor: "#000000",
    	backgroundColor: "#F4D5A6",
    	fontColor: "#FAC003"

    Vishwas R
    Team CanvasJS

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.