Joelius300
commented
3 years ago 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 https://github.com/chartjs/Chart.js/issues/6499.
If this doesn't answer your question, please comment to reopen :)
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?
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.