Blazorise Charts - Mixed types

[blueshirtpaul]

I've recently started using Blazorise for my first Blazor WebAssembly project. I really like it, because I hate CSS and this takes most of the pain away for me. I also like it because of the Charts extension, and that is the subject of my question:

The Chart.js documentation describes using Mixed charts (https://www.chartjs.org/docs/latest/charts/mixed.html).
I want a line chart on the same axes as a bar chart. The Charts extension allows me to get some of the way by adding multiple datasets, however it appears that they are all rendered as the same type, even if I pass the first as type BarChartDataset and the second as LineChartDataset.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await HandleRedraw(taskProgressChart, GetBarChartDataset, GetLineChartDataset, ChartLabels);
}

async Task HandleRedraw<TDataSet, TItem, TOptions, TModel>(Blazorise.Charts.BaseChart<TDataSet, TItem, TOptions, TModel> chart, Func<TDataSet> getDataSet, Func<TDataSet> getDataSet2, string[] labels)
    where TDataSet : ChartDataset<TItem>
    where TOptions : ChartOptions
    where TModel : ChartModel
{
    await chart.Clear();
    await chart.AddLabelsDatasetsAndUpdate(labels, getDataSet(), getDataSet2());
}

Am I doing something wrong?

[stsrki]

By default Type will be set based on the current dataset that you're using. If you need to, you can just change it after the dataset is initialized.

Also, I can't find a ticket for this now but I think you only need to set the Order field on the dataset so that mixed charts are drawn properly.

[blueshirtpaul]

Stsrki,
Thank you for the response. I've tried a few things out as shown below, but still failed to get 1 barchart and 1 line chart.
I can't find an Order property on a ChartDataSet.

    async Task HandleRedraw<TDataSet, TItem, TOptions, TModel>(Blazorise.Charts.BaseChart<TDataSet, TItem, TOptions, TModel> chart, Func<TDataSet> getBarDataSet, Func<TDataSet> getLineDataSet, string[] labels)
    where TDataSet : ChartDataset<TItem>
    where TOptions : ChartOptions
    where TModel : ChartModel
    {
        await chart.Clear();
        chart.Type = ChartType.Bar; // Warning: Type should not be set outside of its component
        await chart.AddLabels(labels);
        await chart.AddDataSet(getBarDataSet());
        await chart.Update(); // With this, only Bar dataset drawn, without it, 2 Line datasets drawn
        chart.Type = ChartType.Line; // Warning: Type should not be set outside of its component
        await chart.AddDataSet(getLineDataSet());
        await chart.Update();
    }

Any further suggetions?

[stsrki]

Maybe I should check before. Both Type and Order are available only in the preview version of Blazorise. It was done as part of #1514 just recently.

If you want to install preview packages you can do it by following this https://github.com/stsrki/Blazorise#try-preview

[blueshirtpaul]

Strski,
It looks like you have the desired fix in hand. I will wait eagerly for the next stable release.
Will the code change be similar to that posted previously in HandleRedraw()?

Thank you for your help.

[stsrki]

It will probably be similar. Possibly you will not need to redefine the Type at all.