Home Forums Chart Support Need 24 hour time slot along x-axis

Need 24 hour time slot along x-axis

Viewing 2 posts - 1 through 2 (of 2 total)
  • #23920

    Hi,
    I am plotting a graph to check the daily delay timings of the machine. Half part is complete. But on the x -axis i want to show the time hours in 24 hour format. Unable to show that:

    THis is the options array
    var options = {
    animationEnabled: true,
    theme: “light2”,
    title:{
    text: “Parboiling Data”
    },
    axisY2:{
    lineThickness: 0
    },
    toolTip:{
    shared: true,
    reversed: true
    },
    legend:{
    verticalAlign: “top”,
    horizontalAlign: “center”
    },
    data: [
    {
    type: “stackedBar”,
    showInLegend: true,
    name: “Vafai”,
    axisYType: “secondary”,
    color: “#FFFF00″,
    dataPoints: [
    { y: 5, label:”2018-01-04”},
    { y: 12, label: “2018-01-05”}
    ]

    },
    {
    type: “stackedBar”,
    showInLegend: true,
    name: “Pani”,
    axisYType: “secondary”,
    color: “#92D050”,
    dataPoints: [
    { y: .5, label: “2018-01-04”},
    { y: 3, label: “2018-01-05” }
    ]
    },
    {
    type: “stackedBar”,
    showInLegend: true,
    name: “Load”,
    axisYType: “secondary”,
    color: “#00B0F0”,
    dataPoints: [
    { y: 3, label: “2018-01-04” },
    { y: 6, label: “2018-01-05” }
    ]
    }

    ]
    };

    Please help me to solve this

    #23929

    @gurpreet2501,

    In the code snippet shared above, you’re using label to display date and time value. Instead, you need to assign the Date Object to x-values and set the axisX valueFormatString as valueFormatString: "HH:mm" for displaying time in 24-hour format(using “hh” will display time in 12-hour format).

    Also, please take a look at this JSFiddle for a working example with sample code.

    chart with date time values in 24 hour format

    __
    Shashi Ranjan
    Team CanvasJS

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

You must be logged in to reply to this topic.