Completed
Last Updated: 01 Jan 2021 09:45 by ADMIN
Release 2.0.0

If a chart is too narrow and x-axis labels overlap, the user can zoom out and refresh the charts to allow the labels to fit. This feature request is to allow the charts to reformat themselves as the zoom level is changed (without having to refresh the page). Steps to reproduce:

    • Make browser narrow (say half screen)
    • Change zoom to 500%
    • Go to https://demos.telerik.com/blazor-ui/chart/line-chart
    • See line chart is squished with overlapping x-axis labels
    • Zoom out to 100%
    • ¬≠See line chart remains squished with overlapping x-axis labels even though there is a lot more room
    • Now refresh the page
    • See line chart is no longer squished with x-axis labels visible

Unplanned
Last Updated: 21 Dec 2020 23:04 by ADMIN
Created by: Oscar
Comments: 0
Category: Charts
Type: Feature Request
2
I would like to be able to click on the legend labels of a Chart. An event similar to the OnSeriesClick would be suitable.
Unplanned
Last Updated: 21 Dec 2020 23:02 by ADMIN
Created by: Daniela
Comments: 2
Category: Charts
Type: Feature Request
3
I would like to be able to click on the labels of the X-axis of a Chart. An event similar to the OnSeriesClick would be suitable.
Unplanned
Last Updated: 15 Dec 2020 11:01 by ADMIN
The "regular" chart has them, and I need them to remove the default currency sign. I need to use the StockChart because I need the Navigator feature.
Declined
Last Updated: 14 Dec 2020 11:02 by ADMIN
Created by: Chris
Comments: 1
Category: Charts
Type: Feature Request
0

When a Chart Series has a click handler defined, I think the cursor should be set to 'pointer' when the user is hovering over the series so the user knows its clickable. Currently the Chart Series Labels change to a pointer cursor when you hover them, however they are not clickable. Not sure if this was the intended functionality, but it seems backwards to me.

Unplanned
Last Updated: 14 Dec 2020 11:01 by ADMIN
Created by: Chris
Comments: 0
Category: Charts
Type: Feature Request
1

Like in Kendo (here and here) so I can change the cursor for the chart to a pointer when the user hovers the series - I want that to indicate they can click on it (through the SeriesClick event).

---

ADMIN EDIT

 

workaround that you can consider which uses CSS to traverse the chart rendering:

<style>
    /* this will work in the chart below with its settings, axes, title and so on */
    .k-chart g[clip-path] g g g path {
        cursor: pointer;
    }

    /* a very generic selector that will capture just about everything in the plot area of the chart */
    /* Try this if you cannot make a more specific selector like the one above by inspecting the rendered content */
    /*.k-chart path {
        cursor: pointer;
    }*/
</style>

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@series1Data">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Column" Name="Product 2" Data="@series2Data">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems">
        </ChartCategoryAxis>
    </ChartCategoryAxes>

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

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

@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}

---

Completed
Last Updated: 14 Dec 2020 07:08 by ADMIN
Release 2.15.0
I'm using version 1.1 of the UI for Blazor and have leveraged several different types of charts.  I now need to add click events on different parts of the chart so I can navigate to a drilldown page.  How can I accomplish this?
Unplanned
Last Updated: 05 Dec 2020 06:07 by ADMIN
Created by: Sylvain
Comments: 3
Category: Charts
Type: Feature Request
16

Hi,

I would like to be able to show / hide a serie by clicking to a legend.

Is there a way to do it actually ?


Unplanned
Last Updated: 23 Nov 2020 08:03 by ADMIN

I would like to be able to control the rendering of the Lines on the X and Y axis for the Chart. For example, I would like to be able to hide them, change their color, etc. Currently, such an option is available for the stock chart with the following nested tags: StockChartCategoryAxisLine and StockChartValueAxisLine.

Declined
Last Updated: 23 Oct 2020 13:17 by ADMIN

Hello support team,

from the donut chart example under https://demos.telerik.com/blazor-ui/chart/donut-chart:

Is there a specific reason why all charts have a Template sub-property for the ChartSeriesTooltip construct but the Template field with the template syntax for the ChartSeriesLabels construct? I would favour a unified syntax for both of the properties, if this is possible somehow...

 

Is this planned for the future to be unified? Especially formatting like shown under https://docs.telerik.com/blazor-ui/knowledge-base/chart-format-percent is not as simple as I would have expected as nobody wants to touch JavaScript code literally :D (Also, localizing data seems quite difficult with that technique).

The best option in my opinion would be to remove those templates completely and just let the user decide what to show there while using a field called e.g. TooltipMappingName and LabelMappingName or something like that. This gives the chart the maximum of configuration possible.

 

Example:

<TelerikChart>
    <ChartTitle Text="What is you favourite sport?"></ChartTitle>
    <ChartLegend Visible="true" Position="ChartLegendPosition.Top"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Donut"
                     Data="@Data"
                     Field="@nameof(ModelData.Value)"
                     CategoryField="@nameof(ModelData.Category)">
            <ChartSeriesTooltip Visible="true" Context="item" TooltipMappingName="@nameof(ModelData.Tooltip)"/>
            <ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
                               Visible="true"
                               Background="transparent"
                               LabelMappingName="@nameof(ModelData.Label)">
            </ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

</TelerikChart>

@code {
    public class ModelData
    {
        public string Category { get; set; }
        public int Value { get; set; }
public string Tooltip { get; set; }
        public string Label { get; set; }
    }

    public List<ModelData> Data = new List<ModelData>()
    {
        new ModelData()
        {
            Category = "Football",
            Value = 35,
Tooltip = "35%",
Label = "Football: 35%"
        },
        new ModelData()
        {
            Category = "Basketball",
            Value = 25,
Tooltip = "25%",
Label = "Basketball: 25%"
        },
        new ModelData()
        {
            Category = "Volleyball",
            Value = 20,
Tooltip = "20%",
Label = "Volleyball: 20%"
        },
        new ModelData()
        {
            Category = "Rugby",
            Value = 10,
Tooltip = "10%",
Label = "Rugby: 10%"
        },
        new ModelData()
        {
            Category = "Tennis",
            Value = 10,
Tooltip = "10%",
Label = "Tennis: 10%"
        }
    };
}

 

Best regards,

Christian

Unplanned
Last Updated: 12 Oct 2020 13:15 by ADMIN
Created by: Ivan
Comments: 0
Category: Charts
Type: Feature Request
1
Like the Kendo one https://demos.telerik.com/kendo-ui/box-plot-charts/index because I need the outliers feature
Unplanned
Last Updated: 07 Oct 2020 09:59 by Robert
Created by: Kelly
Comments: 3
Category: Charts
Type: Feature Request
9
At the moment it is always white. I often want it transparent so it can blend better with the rest of the content (e.g., it should be able to the color of the grid row it is embedded in).
Unplanned
Last Updated: 09 Sep 2020 14:25 by ADMIN
Created by: Rajesh
Comments: 0
Category: Charts
Type: Feature Request
1
I would like to be able to create small size charts and thus implementing Sparkline Charts like in the Kendo suite would work.
Unplanned
Last Updated: 26 Aug 2020 08:20 by ADMIN

I would like to control the font of the Value axis labels in a similar fashion to the way I can control the labels of the category axis:

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems">
            <ChartCategoryAxisLabels Font="bold 12px 'Helvetica'"></ChartCategoryAxisLabels>
        </ChartCategoryAxis>
    </ChartCategoryAxes>

*** Thread created by admin on customer behalf ***

Planned
Last Updated: 05 Aug 2020 16:19 by ADMIN
Created by: wu
Comments: 1
Category: Charts
Type: Feature Request
3
Completed
Last Updated: 05 Aug 2020 07:48 by ADMIN
Release 2.16.0
Created by: Louis
Comments: 1
Category: Charts
Type: Feature Request
3

Hi!

I'm more than a little impressed with your Blazor efforts to-date, but there's one component lacking: a CandleStick chart.

Unplanned
Last Updated: 11 Jul 2020 16:27 by ADMIN
I would like to be able to control the dash type of the line for Line Chart.
Unplanned
Last Updated: 09 Jul 2020 17:26 by ADMIN
Created by: Christopher
Comments: 0
Category: Charts
Type: Feature Request
2

In need a chart that has a shaded area between a max and min set of curves, indicating the allowable area

Like this one: https://demos.telerik.com/kendo-ui/range-area-charts/index

Unplanned
Last Updated: 02 Jul 2020 14:06 by ADMIN
Created by: Angelo
Comments: 3
Category: Charts
Type: Feature Request
3

The code below does not produce a chart series with a line that is 50 width?  What am i missing?

 

@page "/chartdemo"
Line series

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Name="Product 1" Data="@series1Data">
            <ChartSeriesMarkers Size="10"></ChartSeriesMarkers>
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Size="10" Name="Product 2" Data="@series2Data">
            <ChartSeriesLine Width="50"></ChartSeriesLine>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
    </ChartCategoryAxes>

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

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

@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };

 }

    
Unplanned
Last Updated: 11 Jun 2020 15:22 by ADMIN
Created by: Bert
Comments: 0
Category: Charts
Type: Feature Request
7
I would like to zoom on a particular part of the Chart.
1 2