Chartjs x-axis configuration



I’ve managed to add data to chartjs when the x-axis type is set to category, as category seems to take any type of label no problem.

However, for the life of me I can’t get the chart to work when the x-axis type is set to time.

For example, I’d like to set the x-axis time span to 15 minutes (15 mins ago to now – left to right) and have a label (tick) at every minute (so 15 labels).

Does anyone have any actual chartjs examples using time as the x-axis they could kindly share, please?

Thank you

  • You must to post comments

Hi Darren,

I use a lot of time axis in my charts, mainly for seconds (its a real-time dashboard).

My code is (roughly):

            LineOptions Options = new LineOptions();
            // X-axis settings
Options.Scales.xAxes[0].Type = ScaleType.Time;
Options.Scales.xAxes[0].Time.Round = TimeScaleTimeUnit.second;
Options.Scales.xAxes[0].Time.TooltipFormat = “LL LTS”;
            Chart.Options = Options;
Then for each point I add:
                    Chart.Labels[DataPoints – 1] = TestTime.ToString(“MM/dd/yyyy HH:mm:ss”);
  • Darren
    Thanks, Nic. Much appreciated. I’ll try it out shortly.
  • Darren
    Took a few more hours of my life but I’ve got a single-shot data injection working with time as x-axis. That’s a big step forward. Hopefully plain sailing from now on… Not quite sure what the difference is between TIME and CATEGORY as a-axis type? Either way you can set a datetime label?
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.