Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 28 Sep 2021 06:53 by ADMIN
Bryon
Created on: 02 Jul 2020 06:55
Category: Charts
Type: Bug Report
2
The Chart Tooltip does not display correct values when the Chart is bound to a model, has multiple series and Template is used.

The Chart Tooltip does not render correct values for the data points when the chart is bound to a model, has multiple series and Template is used. The DataItem does not seem to work as expected.

ADMIN EDIT:

If the Chart is bound with Independent Series Binding the FormattedValue will get the correct values.

If the Chart has no Template the correct values for the data points will be displayed

2 comments
ADMIN
Svetoslav Dimitrov
Posted on: 14 Sep 2020 09:36

Hello,

I would like to follow up on that behavior. As part of our investigation, we found out that the initial setup, where this was detected was not correct as there was a ChartTooltip, nested inside the ChartSeries tag, whereas it should have been ChartSeriesTooltip. Below I have added two samples, the first one is with the incorrect setup, and the second one - with the correct one. Excuse me for not seeing this initially.

INCORRECT SETUP:

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column"
                     Data="@theData"
                     ColorField="@nameof(MyChartDataModel.Color)"
                     Field="@nameof(MyChartDataModel.ItemValue)"
                     CategoryField="@nameof(MyChartDataModel.Category)">
            <ChartTooltip Visible="true">
                <Template>
                    @((context.DataItem as MyChartDataModel).ItemValue) items
                </Template>
            </ChartTooltip>
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Column"
                     Data="@theData"
                     ColorField="@nameof(MyChartDataModel.Color)"
                     Field="@nameof(MyChartDataModel.ItemValue2)"
                     CategoryField="@nameof(MyChartDataModel.Category)">
            <ChartTooltip Visible="true">
                <Template>
                    @((context.DataItem as MyChartDataModel).ItemValue2) items
                </Template>
            </ChartTooltip>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    public class MyChartDataModel
    {
        public string Category { get; set; }
        public double ItemValue { get; set; }
        public int ItemValue2 { get; set; }
        public string Color { get; set; }
    }

    public List<MyChartDataModel> theData = new List<MyChartDataModel>
    {
        new MyChartDataModel
        {
            Category = "Product 1",
            ItemValue = 2,
            ItemValue2 = 4,
            Color = "red"
        },
        new MyChartDataModel
        {
            Category = "Product 2",
            ItemValue = 3,
            ItemValue2 = 8,
            Color = "#00ff00"
        },
        new MyChartDataModel
        {
            Category = "Product 3",
            ItemValue = 4,
            ItemValue2 = 2,
            Color = "#00f"
        }
    };
}

 

CORRECT SETUP:

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column"
                     Data="@theData"
                     ColorField="@nameof(MyChartDataModel.Color)"
                     Field="@nameof(MyChartDataModel.ItemValue)"
                     CategoryField="@nameof(MyChartDataModel.Category)">
            <ChartSeriesTooltip Visible="true">
                <Template>
                    @((context.DataItem as MyChartDataModel).ItemValue) items
                </Template>
            </ChartSeriesTooltip>
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Column"
                     Data="@theData"
                     ColorField="@nameof(MyChartDataModel.Color)"
                     Field="@nameof(MyChartDataModel.ItemValue2)"
                     CategoryField="@nameof(MyChartDataModel.Category)">
            <ChartSeriesTooltip Visible="true">
                <Template>
                    @((context.DataItem as MyChartDataModel).ItemValue2) items
                </Template>
            </ChartSeriesTooltip>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    public class MyChartDataModel
    {
        public string Category { get; set; }
        public double ItemValue { get; set; }
        public int ItemValue2 { get; set; }
        public string Color { get; set; }
    }

    public List<MyChartDataModel> theData = new List<MyChartDataModel>
{
        new MyChartDataModel
        {
            Category = "Product 1",
            ItemValue = 2,
            ItemValue2 = 4,
            Color = "red"
        },
        new MyChartDataModel
        {
            Category = "Product 2",
            ItemValue = 3,
            ItemValue2 = 8,
            Color = "#00ff00"
        },
        new MyChartDataModel
        {
            Category = "Product 3",
            ItemValue = 4,
            ItemValue2 = 2,
            Color = "#00f"
        }
    };
}

 

Regards,
Svetoslav Dimitrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

ADMIN
Svetoslav Dimitrov
Posted on: 02 Jul 2020 07:12

Hello,

For the time being you can remove the Template and let the Chart Tooltip get the values.

Regards,
Svetoslav Dimitrov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Create an account Log In
View
Type
Status
Category