Undefined in BarChart using wrapper

[Simeon Dahl]

Describe your question

I'm trying to make a barchart that has a wrapper object that contains the properties:

class DataItem<TData>
{
    [JsonProperty("t")]
    public string Name { get; set; }
    [JsonProperty("y")]
    public TData Amount { get; set; }
}

// Barset one
var barSet = new ChartJs.Blazor.ChartJS.BarChart.BarDataset<DataItem<int>>()
{
	Label = "Test",
	BackgroundColor = ColorUtil.RandomColorString(),
	BorderWidth = 1,
	BorderColor = "#ffffff",
};
var returnList = new List<DataItem<int>>() {
	new DataItem<int> { Amount = 10, Name = "Test regel 1" },
	new DataItem<int> { Amount = 10, Name = "Test regel 2" }
};
barSet.AddRange(returnList);
_config.Data.Datasets.Add(barSet);

// Barset two
var barSet2 = new ChartJs.Blazor.ChartJS.BarChart.BarDataset<DataItem<int>>()
{
	Label = "Test 2",
	BackgroundColor = ColorUtil.RandomColorString(),
	BorderWidth = 1,
	BorderColor = "#ffffff",
};
var returnList2 = new List<DataItem<int>>() {
	new DataItem<int> { Amount = 30, Name = "Test regel 1" }
};
barSet2.AddRange(returnList2);
_config.Data.Datasets.Add(barSet2);

But when I hover over the bars, then it says undefined. Can you tell me why?

Which Blazor project type is your question related to?

• Client-Side

Which charts is this question related to?

BarChart

[Simeon Dahl]

I found the problem. I needed to add "labels" to the config.

[Joel L.]

I found the problem. I needed to add "labels" to the config.

I was going to suggest the same. You could also try to serialize Name as x instead of t (t is only for time-stuff, x is generic for points). However, when working with strings on the X-axis you should use labels.

Glad you got it working 👍🏼