Floating stacked bar charts on time-axis

[bnicholsIST]

Describe your question

I'm trying to make box/whisker chart using floating bar chart. I've successful implemented on a category axis, but I need to do it on a linear axis.

Which Blazor project type is your question related to?

• Server-Side

Which charts is this question related to?

floating bar charts

JavaScript equivalent

I think this is an example of how its done in JavaScript
https://codepen.io/kurkle/pen/gOadBzy

Additional context

Add any additional context, screenshots or code about the question here.

[Joelius300]

Good question!

Assuming you want something like this

Configure the chart like this

private readonly Random _rng = new Random();
private BarConfig _config;

protected override void OnInitialized()
{
    _config = new BarConfig
    {
        Options = new BarOptions
        {
            Responsive = true,
            Scales = new BarScales
            {
                XAxes = new List<CartesianAxis>
                {
                    new BarTimeAxis
                    {
                        Display = AxisDisplay.True,
                        ScaleLabel = new ScaleLabel
                        {
                            Display = true,
                            LabelString = "Date"
                        },
                        Time = new TimeOptions
                        {
                            Unit = TimeMeasurement.Day
                        }
                    }
                },
                YAxes = new List<CartesianAxis>
                {
                    new BarLinearCartesianAxis
                    {
                        Display = AxisDisplay.True,
                        ScaleLabel = new ScaleLabel
                        {
                            Display = true,
                            LabelString = "Value"
                        },
                        Ticks = new LinearCartesianTicks
                        {
                            BeginAtZero = true
                        }
                    }
                }
            }
        }
    };

    var data = Enumerable.Range(0, 6)
                         .Select(i => new FloatingBarPoint(_rng.Next(10, 50), _rng.Next(60, 100)));

    BarDataset<FloatingBarPoint> dataset = new BarDataset<FloatingBarPoint>(data)
    {
        BackgroundColor = "red",
        BorderColor = "red",
        Label = "Dataset"
    };

    _config.Data.Datasets.Add(dataset);

    DateTime today = DateTime.Now;
    var labels = Enumerable.Range(0, 6)
                           .Select(i => today.AddDays(i).ToString("o"));

    foreach (var label in labels)
    {
        _config.Data.Labels.Add(label);
    }
}

The relevant issue for this (among others) is chartjs/Chart.js#6499.

If this doesn't answer your question, please comment to reopen :)

[bnicholsIST]

So it is a dataset of BarDataset. For example, one dataset only has data for 0.5, 1, 1.5, 2, 3, 4, 6, and 10 x-axis points. How do I create the Dataset with x-axis values?

The floating bar chart has worked great to create box and whisker chart in combination with scatter points and lines. I just need to be able to get the bars to appear on the right x points.

[bnicholsIST]

I think this is the required Javascript, is there a why to do this in Chartjs.blazor? I can remove one of the dataset values and the other bars continue to display without the deleted bar.

So from https://codepen.io/kurkle/pen/gOadBzy the js:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'dataset',
backgroundColor: "red",
borderColor: "red",
data: [{
x: "2020-05-01",
y: [50, 100]
}, {
x: "2020-05-02",
y: [50, 100]
}, {
x: "2020-05-03",
y: [50, 100]
}, {
x: "2020-05-04",
y: [50, 100]
}]
}]
},
options: {
scales: {
x: {
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
time: {
unit: 'day'
}
},
y: {
display: true,
scaleLabel: {
display: true,
labelString: 'value'
},
ticks: {
beginAtZero : true
}
}
}
}
});

[Joelius300]

For example, one dataset only has data for 0.5, 1, 1.5, 2, 3, 4, 6, and 10 x-axis points

I see. Unfortunately, I don't think you can do this with ChartJs.Blazor (yet).
I translated the codepen you sent me to C# code but since your codepen is using Chart.js 3.0 and our library is still on 2.9.x, I backported it. Before Chart.js 3.0 there's an issue with using floating bars together with time-axis (see chartjs/Chart.js#7356). So to get it working in Chart.js 2.9.4 (which is used by our library) I had to use the labels instead of inlining the timestamp together with the data.

Once ChartJs.Blazor upgrades to Chart.js 3.0, we will make TimePoint generic so you can use FloatingBarPoint in there and get the behaviour you want.

[bnicholsIST]

Bummer. I'm not able to find a paid blazor charts product which does Box charts on a linear axis either.

I did find a work around. I am using individual lines for the boxes and whiskers. I set the BorderWidth and use PointStyle line to get the right look.

Would you know if there a limit to the number of datasets allowed on a chart?

[Joelius300]

Bummer. I'm not able to find a paid blazor charts product which does Box charts on a linear axis either.

You can always fork and adjust this library, it's fully Open Source. You could probably also pay a freelancer to make the desired changes to this library if you don't have the time to do it yourself.

Also, just so I understand correctly.. You're still talking about linear axis but as written in the linked issues, the time-axes is the one making trouble. I have adjusted the title accordingly but I'm not sure if we understand each other correctly. Could you maybe elaborate a bit on the linear-axis part?

Would you know if there a limit to the number of datasets allowed on a chart?

No, I don't know but I highly doubt there is one. The only "limit" I can think of is the performance of your client (and browser).

[bnicholsIST]

Time would work because the x-axis is in sec, but I was using double x-values on a linear x-axis. I also need to be able to use a logarithmic axis.

[Joelius300]

I'm sorry, I don't think I understand.

• If you want time-values on x and number-values (linear/logarithmic) on y, you should use TimePoint.
• If you want number-values (linear/logarithmic) on x and number-values (linear/logarithmic) on y, you should use Point.
• If you want string-values on x (categories) and number-values (linear/logarithmic) on y, you should use double/int/.. together with Labels.

I think these are the most common use-cases. Does that help you in any way?