Blazorise chart with timeseries data

Question

I am developing a portal with Blazor. The website will show some timeseries data in a chart. For the charts I use Blazorise.Charts (1.0.5).

I want the chart to show the full date at the start of a day and between the days only hours (in a 24h format) and minutes. However it seems the Blazorise LineChartOptions do not accept my input.

My data model:

public class point
{
    public double Value;
    public DateTime ReceivedOn;
}

The options I use

public LineChartOptions _LineChartOptions { get; set; } = new LineChartOptions()
{
    Parsing = new ChartParsing
    {
        XAxisKey = "ReceivedOn",
        YAxisKey = "Value",
    },
    Scales = new ChartScales()
    {
        X = new ChartAxis()
        {
            Display = true,
            Type = "timeseries",
            Title = new ChartScaleTitle
            {
                Display = true,
                Text = "Date"
            },
            Ticks = new ChartAxisTicks
            {
                StepSize = 1,
                Major = new ChartAxisMajorTick
                {
                    Enabled = true
                },
            },
        }
    }
}

I also tried adding the Time = new ChartAxisTime, but that option does not seem to work if you use Ticks.

The result I get when using these settings is: Chart

Like you can see, it seems almost what I want, however the labels need to be in the HH:mm format and the date needs to be in the yyyy-MM-dd format.

What do I need to change to get this result?

Answer 1

I ran into the same issue. Honestly, after reading the Chart.js documentation, I just stopped trying to feed DateTime objects directly into the blazorise chart. According to the Chart.js documentation, it must be converted somewhere in blazorise, because the dates are fed into Chart.js as strings anyway. So I converted my DateTime[] to a string[] with DateTime pattern "O" (o Format Specifier de-DE Culture 2008-10-31T17:04:32.0000000) and everything went fine.

Furthermore, try time first instead of timeseries as the x scale type. Type timeseries behaves strangely on non-equidistant data.

My LineChartOptions:

public static LineChartOptions CreateLineChartOptions()
    {
        return new LineChartOptions()
        {
            Scales = new ChartScales()
            {
                X = new ChartAxis()
                {
                    Type = "time",
                    Time = new ChartAxisTime()
                    {
                        Unit = "minute",
                        MinUnit = "minute"
                    }
                }
            }
        };
    }

My labels are wrongly formatted like yours; I'm still working on that.

My Razor Call:

<LineChart @ref="lineChart" TItem="double" Options="@LineChartOptions" />

For a minimum example, you can even leave the ChartAxisTime() object. It should run without it.

My minimal result: