Bug report

Reproduction of the problem

(bug report only)
Steps to reproduce:

1. Place a TelerikChart with OnSeriesClick inside a TileLayoutItem

1. Click any chart series

Current behavior

(optional)
Tile header collapses and disappears.
Root cause: The theme applies overflow: hidden to .k-card, which is the tile's root flex container. When a Chart series is clicked, the Chart briefly inflates the body height, causing the flex layout to squeeze the header to height 0. The overflow: hidden on the root then clips the zero-height header out of view entirely.

Expected/desired behavior

Tile header remains visible

Workaround:

Environment

• Kendo/Telerik version:
• Browser: [all ]

Add Chart tooltip positioning capabilities, for example: Top, Right, Bottom, Left.

Due to the lack of an option to specify position, the tooltips  cover part of the line markers, e.g., in a horizontal line Chart scenario. 

Hello,

I need to be able to set the colors of x-axis category labels conditionally. My current use case for this is that I'm displaying dates and need weekends and holidays to be their own colors. As far as I'm aware this cannot be accomplished in any way currently:

• ChartCategoryAxisLabels Color parameter cannot be conditional and applies to all labels
• ChartCategoryAxisLabels Template parameter must return plain text and cannot render styling or HTML
• The labels are drawn via canvas and therefore cannot be styled externally

The two solutions I could suggest are as follows:

1. Make the ChartCategoryAxisLabels Color parameter able to be Kendo UI parsed like the Template Parameter
2. In addition to the ChartCategoryAxis Categories parameter, support providing categories as render fragment children, with each having its own Color parameter

Thanks,
Robert

If a Chart is recreated at runtime and the mouse cursor is over the component, a JavaScript error may occur:

Error: Microsoft.JSInterop.JSException: null is not an object (evaluating 'e.top')

A possible workaround is to delay the Chart tooltip initialization a little:

When using the Chart Pannable option, if I set ChartValueAxis, it appears that the Y Axis doesn't get adjusted as I pan the chart.

The Chart tooltip template receives incorrect context for another data item when there is a missing data item for the current category and the series has MissingValues="@ChartSeriesMissingValues.Zero".

Test page: https://blazorrepl.telerik.com/QzOtFwln362xLl7q57

Compare with the Kendo UI jQuery Chart: https://dojo.telerik.com/qZCFVOPQ 

Possible workarounds include:

• Check the FormattedValue property of the tooltip context. If it's "0", while the value in the DataItem is not zero, then there is a missing data item.
  

  <TelerikChart Height="200px">
      <ChartSeriesItems>
          <ChartSeries Type="ChartSeriesType.Line"
                       Data="@Series1Data"
                       Field="@nameof(SalesData.Revenue)"
                       CategoryField="@nameof(SalesData.TimePeriod)"
                       MissingValues="@ChartSeriesMissingValues.Zero">
              <ChartSeriesLabels Visible="true"></ChartSeriesLabels>
              <ChartSeriesTooltip Visible="true">
                  <Template>
                      @{ var point = context.DataItem as SalesData; }
                      @if (point is not null && context.FormattedValue != "0")
                      {
                          <span>@point.Revenue</span>
                      }
                      else
                      {
                          <span>0 (no data item)</span>
                      }
                  </Template>
              </ChartSeriesTooltip>
          </ChartSeries>
      </ChartSeriesItems>
  
      <ChartCategoryAxes>
          <ChartCategoryAxis Min="@ChartCategoryAxisMin" Type="@ChartCategoryAxisType.Date"></ChartCategoryAxis>
      </ChartCategoryAxes>
  
  </TelerikChart>

• Set MissingValues to Gap or Interpolate.
  
• Provide dummy data items with a zero or null value. These dummy items depend on the Min and Max axis values and can be appended after the Chart data is retrieved from the data source, so that they are not hard-coded there.
• Do not use a Chart tooltip template.

Currently the bubble sizes in the Chart are determined automatically, according to an internal algorithm.

Please add parameters for setting specific min and max bubble sizes by the application.

In the docs https://www.telerik.com/blazor-ui/documentation/components/chart/overview#styling-with-css-variables there is an example on using CSS variables to set colours of the Chart component. And yes, if I set the --kendo-chart-bg CSS variable to some colour, the chart background is coloured with it. But, I can't change the colour at runtime, for example for switching between light and dark themes at user request.

But, shouldn't this be possible as the SVG is rendered inline? I see the chart being rendered as elements like below where the fill propertys value comes from the --kendo-chart-bg variable. But if the fill was instead set to "var(--kendo-chart-bg)" I would be able to change --kendo-chart-bg at runtime and the chart would reflect the change without needing to be refreshed separately? Same should go for all the text and series' colours.

<svg>
<g>
<path d="M0 0 L 400 0 400 240 0 240Z" stroke="none" fill="#0f0"></path>
</g>
</svg>

I also saw this, but I think this is before you added the CSS colouring? https://feedback.telerik.com/blazor/1496389-using-custom-themes-changing-at-runtime-does-not-change-the-chart-component-style

A tooltip when hovering the Chart labels would be nice to have, since it would allow showing additional data. 

Currently, the TelerikChartBreadcrumb does not allow specifying how the Breadcrumb items are visualized when their total width exceeds the width of the component.

A possible alternative to achieve the same result is to override the default theme styles with the following CSS rule:

Here is a REPL example to see the result of the above CSS approach - https://blazorrepl.telerik.com/GTOyPYbG23PugZBQ36

When attempting to format Chart series labels using the "F2" format to display two decimal places, the format does not apply, and the values are displayed without decimals.

Can I suggest you a feature request to expand the ChartSeriesClickEventArgs with the MouseEventArgs information?

I am creating a Donut Chart and believe I have found a bug. On the initial load of the page, the donut chart element is not playing its animation when the label property "Visible=false". Instead, it pops on with no animation. The animations do play on the drilldown elements on their initial loads, but clicking the refresh chart button also causes this behavior even on drilldown levels. Resetting the drilldown also causes this behavior. The chart legend remains visible during the time when the chart is not. Setting the labels visible property to true causes the animations to play correctly. This proof of concept utilizes static data. The application was created using the telerik templates and is correctly injecting the telerik components as all other telerik components, including other chart components, are functioning as expected. I have isolated the code for the donut chart and posted it here.

 

<TelerikButton OnClick="@(() => DonutChart.Refresh())">Refresh Donut Chart</TelerikButton>
<TelerikButton OnClick="@(() => DonutChart.ResetDrilldownLevel(0))">Reset DrillDown</TelerikButton>
<!-- Donut Chart -->
<TelerikChart @ref="DonutChart">
    <ChartTitle Text="Donut Chart" />
    <ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Right" />
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Donut"
        Data="@donutData"
        Field="@nameof(DonutModel.Number)"
        CategoryField="@nameof(DonutModel.Category)"
        ColorField="@nameof(DonutModel.SegmentColor)"
        DrilldownField="@nameof(DonutModel.DrillDown)">
            <ChartSeriesBorder Color="white" Width="2" />
            <ChartSeriesLabels Position="ChartSeriesLabelsPosition.Above"
            Visible="false"
            Background="transparent">
            </ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>
</TelerikChart>

@code {
    // Donut Chart
    public TelerikChart DonutChart;

    public class DonutModel
    {
        public string Category { get; set; }
        public int Number { get; set; }
        public string SegmentColor { get; set; }
        public ChartSeriesDescriptor? DrillDown { get; set; }
    }

    public List<DonutModel> donutData = new List<DonutModel>
    {
        new DonutModel
        {
            Category = "Category 1 with Drilldown",
            Number = 263,
            SegmentColor = "#9d3cc7",
            DrillDown = new ChartSeriesDescriptor
            {
                Name = "Drilldowns",
                Type = ChartSeriesType.Donut,
                Field = nameof(DonutModel.Number),
                CategoryField = nameof(DonutModel.Category),
                DrilldownField = nameof(DonutModel.DrillDown),
                Data = new List<DonutModel>()
                {
                    new DonutModel
                    {
                        Category = "Drill Down 1",
                        Number = 102,
                        SegmentColor = "#9d3cc7",
                        DrillDown = new ChartSeriesDescriptor
                        {
                            Name = "People",
                            Type = ChartSeriesType.Donut,
                            Field = nameof(DonutModel.Number),
                            CategoryField = nameof(DonutModel.Category),
                            Data = new List<DonutModel>()
                            {
                                new DonutModel
                                {
                                    Category = "John Doe",
                                    Number = 27,
                                    SegmentColor = "#9d3cc7"
                                },
                                new DonutModel
                                {
                                    Category = "David Smith",
                                    Number = 45,
                                    SegmentColor = "green"
                                },
                                new DonutModel
                                {
                                    Category = "Mary Johnson",
                                    Number = 63,
                                    SegmentColor = "yellow"
                                },
                                new DonutModel
                                {
                                    Category = "Robert Brown",
                                    Number = 56,
                                    SegmentColor = "orange"
                                }
                            }
                        }
                    },
                    new DonutModel
                    {
                        Category = "Drilldown 2",
                        Number = 67,
                        SegmentColor = "green",
                        DrillDown = new ChartSeriesDescriptor
                        {
                            Name = "People",
                            Type = ChartSeriesType.Donut,
                            Field = nameof(DonutModel.Number),
                            CategoryField = nameof(DonutModel.Category),
                            Data = new List<DonutModel>()
                            {
                                new DonutModel
                                {
                                    Category = "John Doe",
                                    Number = 15,
                                    SegmentColor = "#9d3cc7"
                                },
                                new DonutModel
                                {
                                    Category = "David Smith",
                                    Number = 17,
                                    SegmentColor = "green"
                                },
                                new DonutModel
                                {
                                    Category = "Mary Johnson",
                                    Number = 19,
                                    SegmentColor = "yellow"
                                },
                                new DonutModel
                                {
                                    Category = "Robert Brown",
                                    Number = 16,
                                    SegmentColor = "orange"
                                }
                            }
                        }
                    },
                    new DonutModel
                    {
                        Category = "Drilldown 3",
                        Number = 10,
                        SegmentColor = "orange",
                        DrillDown = new ChartSeriesDescriptor
                        {
                            Name = "People",
                            Type = ChartSeriesType.Donut,
                            Field = nameof(DonutModel.Number),
                            CategoryField = nameof(DonutModel.Category),
                            Data = new List<DonutModel>()
                            {
                                new DonutModel
                                {
                                    Category = "John Doe",
                                    Number = 3,
                                    SegmentColor = "#9d3cc7"
                                },
                                new DonutModel
                                {
                                    Category = "David Smith",
                                    Number = 4,
                                    SegmentColor = "green"
                                },
                                new DonutModel
                                {
                                    Category = "Mary Johnson",
                                    Number = 1,
                                    SegmentColor = "yellow"
                                },
                                new DonutModel
                                {
                                    Category = "Robert Brown",
                                    Number = 2,
                                    SegmentColor = "orange"
                                }
                            }
                        }
                    }
                }
            }
        },
        new DonutModel
        {
            Category = "Category 2 with no Drilldown",
            Number = 31,
            SegmentColor = "#fab933"
        }
    };

When OnAxisLabelClick is set, the ChartCategoryAxisLabels do not get 'cursor: pointer' which is confusing for users because it makes it appear as if the axis labels are not clickable when they actually are.

===ADMIN EDIT===

In the meantime add the cursor: pointer CSS style to the labels. Here is a REPL example:

https://blazorrepl.telerik.com/cyvEYNbP27vsCSLG28

For real-time data purposes, I need to update the data and add new items. If I drill down and then add a new item, the Chart refreshes and goes to the top page (resets the drill down level to 0).

Reproduction: https://blazorrepl.telerik.com/QeOtQaOD46j4I3Ih46.

I want to be able to dynamically enable/disable the Pan and Zoom functionalities at runtime. Currently, the Chart does not react to such changes.

===

ADMIN EDIT

===

A possible option for the time being is to dispose the component and re-initialize it after changing the Pan/Zoom properties: https://blazorrepl.telerik.com/mSuNQkEj10nSug2k22.

I would like to synchronize several Charts, so when I move the mouse through one of them, the other two Charts show crosshairs at the same position as the first hovered Chart.

===

ADMIN EDIT

===

Prerequisite: Chart Crosshair

This functionality would be very useful for data analysis.

Moving the cursors within the chart itself, allows to define a range within the series, being able to offer useful data.

 

Examples:

            

The Chart Tooltip does not respond to the applied Globalization settings. In the Chart Globalization demo change the culture to German, hover over a data point of the Line series, and note that the decimal separator is a dot (".") and not a comma (",") as expected. 

I would like to use an event that fires when the user clicks on a Marker in the chart. I would like to get information on the clicked Marker so that I can customize its configuration settings, such as Color, Size, and other.