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

Planned
Last Updated: 19 Oct 2020 13:10 by ADMIN
Scheduled for 2.19.0

The context DataItem is null for subsequent ChartSeries. It receives the correct object for the first ChartSeries, but for the rest is null. 

 

<Admin Edit>

A workaround, for the time being, would be to remove the Template and let the Tooltip display the default value, which will be correct.

</Admin Edit>

Reproduction code:

 

<TelerikChart>
    <ChartTitle Text="Unrecoverable Errors Per Minute vs. Signal Level" />
    <ChartCategoryAxes>
        <ChartCategoryAxis Type="@ChartCategoryAxisType.Category" />
    </ChartCategoryAxes>
    <ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels Visible="true" />
        </ChartValueAxis>
    </ChartValueAxes>

    <ChartTooltip Visible="true">
        <Template>
            @{
                var data = context.DataItem as ModelData;
                <div class="card" style="font-size: 0.8rem; color: black">
                    <span>@($"{data.Value}")</span>
                    <span>@($"{data.Type}")</span>

                </div>
            }
        </Template>
    </ChartTooltip>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData1"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData2"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData3"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
    </ChartSeriesItems>

</TelerikChart>

@code {
    public class ModelData
    {
        public string Type { get; set; }
        public double Value { get; set; }
    }

    public List<ModelData> ChartData1 = new List<ModelData>() { new ModelData() { Type = "S1", Value = 1 } };
    public List<ModelData> ChartData2 = new List<ModelData>() { new ModelData() { Type = "S2", Value = 5 } };
    public List<ModelData> ChartData3 = new List<ModelData>() { new ModelData() { Type = "S3", Value = 9 } };
}

 

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
7
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: 30 Sep 2020 06:57 by ADMIN
When I place a Chart in a small container, for example, a div, the labels are cut off and thus unreadable.
Declined
Last Updated: 14 Sep 2020 09:47 by ADMIN
Scheduled for 2.17.0

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

Completed
Last Updated: 11 Sep 2020 04:26 by ADMIN
Release 2.17.0
Created by: Cheryl
Comments: 5
Category: Charts
Type: Bug Report
14

Hi!

I'm building a Blazor Component using your TelerikChart.  To build my chart, I'm dynamically inserting the series name and the series data, which is pulled from a list.  I also have a button on the page that changes the dataset (last month, this month, next month, etc).  The button will rebuild the list of names and data, and Blazor will build the chart with a 'foreach' entry in the ChartSeriesItems section of the Chart Component.

The problem is that the Items are not cleared each time.  When I click the button, I'm getting previous values. In the example below, I have 3 data sets.  The first has 4 items, the second has 8 and the third has 6.  If the user clicks the second, showing all 8, then clicks the first, the chart will show the new 4, and the previous 5-8 from the second set.  

 My chart description in HTML is:

... 

<ChartSeriesItems> @foreach(Tuple<string, object[]> t in myData) { <ChartSeries Type="ChartSeriesType.Column" Name=@t.Item1 Data=@t.Item2 /> } </ChartSeriesItems>

... 

I have checked my data through debugging to ensure that the myData variable is correct (i.e. when I click the first data, it only has 4 items).  However, when the chart displays, it shows 8 items. 

Is there a CLEARDATA method or something I can call on the Chart to ensure that the data is reset each time?  I see that there is a Clear() in JavaScript, but I'm writing in only Blazor and C#, with no JavaScript.

I've attached the .razor page for your reference.  (As this is my test code, I'm using random number generation to get the data.)

 

Thank you so much for your help!!

-Cheryl Simpson 

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
Unplanned
Last Updated: 05 Aug 2020 11:26 by ADMIN
Created by: Software
Comments: 0
Category: Charts
Type: Bug Report
1
Sometimes the chart tooltip goes off the screen. 
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
1

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" };

 }

    
Completed
Last Updated: 22 Jun 2020 10:22 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: 11 Jun 2020 15:22 by ADMIN
Created by: Bert
Comments: 0
Category: Charts
Type: Feature Request
6
I would like to zoom on a particular part of the Chart.
Completed
Last Updated: 10 Jun 2020 10:03 by ADMIN
Release 2.15.0
Created by: Bryon
Comments: 2
Category: Charts
Type: Feature Request
35

The idea is to ensure labels don't render on top of each other. If series values are close to each other, labels start overlapping. Having tooltips will let me remove the labels.

Example:

Unplanned
Last Updated: 26 May 2020 01:01 by ADMIN

 

Hi, I can't figure how to use the Min/Max properties of the ChartCategoryAxis because if I set these properties, the chart disappears.

Please help me.

 

@page "/"

<TelerikChart>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Name="Test" Data="@mesures"
                     Field="@nameof(Mesure.Value)" CategoryField="@nameof(Mesure.Date)" Aggregate="ChartSeriesAggregate.Sum">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <!-- This is OK -->
        @*<ChartCategoryAxis BaseUnit="ChartCategoryAxisBaseUnit.Hours" Type="ChartCategoryAxisType.Date" BaseUnitStep="1"></ChartCategoryAxis>*@

        <!-- This isn't : nothing is displayed -->
        <ChartCategoryAxis Min="@MinDate" Max="@MaxDate" BaseUnit="ChartCategoryAxisBaseUnit.Hours" Type="ChartCategoryAxisType.Date" BaseUnitStep="1"></ChartCategoryAxis>
    </ChartCategoryAxes>

</TelerikChart>

@code {

    private DateTime MinDate { get; set; } = new DateTime(2019, 01, 01, 13, 0, 0);
    private DateTime MaxDate { get; set; }   = new DateTime(2019, 01, 01, 17, 0, 0);

    public class Mesure
    {
        public DateTime Date { get; set; }
        public int Value { get; set; }
    }

    public List<Mesure> mesures = new List<Mesure>()
    {
        new Mesure() { Date = new DateTime(2019, 01, 01, 13, 0, 0), Value = 1 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 14, 0, 0), Value = 2 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 14, 30, 0), Value = 3 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 14, 35, 0), Value = 4 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 15, 0, 0), Value = 5 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 16, 0, 0), Value = 6 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 17, 0, 0), Value = 7 },
    };
}


Unplanned
Last Updated: 30 Apr 2020 09:13 by ADMIN
I would like to be able to change the background color of the plot are by passing a CSS color to a parameter.
1 2