Hi

We would like to be able to draw a label for a group of series in the chart axis while also labelling the series individually. See the following example:

In Kendo UI you can achieve this: https://dojo.telerik.com/ulIJihIF. In Blazor, we can force the text into the chart axis categories, but we cannot seem to position them accurately, REPL.

Thank you

Hi,

Just a bug I have found. I have found something similar before with the DateTime format of a category axis.

Please note the single lowercase 't' in the below appears to be being interpreted by the compiler as 'time' identifier (AM or PM). In this case, it is printing on the chart label as 'a'.

<ChartValueAxes>
     <ChartValueAxis AxisCrossingValue="@AxisCrossingValue">
          <ChartValueAxisLabels Format="@("{0}" + " a b c d e f g h i j k l m n o p q r s t u v w x y z")"></ChartValueAxisLabels> 
    </ChartValueAxis>
</ChartValueAxes>

Hello,

Please consider a built-in way to add spacing (gaps, margins, etc.) between the segments of a Donut and Pie charts. The <ChartSeries> tag has such parameters, but they are used for other settings or other series types.

Currently, it is possible to achieve the desired appearance with custom CSS, but that requires knowledge about the Chart rendering.

Is it possible to use a different marker type other than the one provided by ChartSeriesMarkerType enum?

We would like to use a custom icon for some Scatter data but this doesn't seem to be supported out of the box. Please let us know if this is possible in the current framework, if not  - can it be added as a feature?

Thanks,

Sean

I am trying to customize the format of the ChartCategoryAxisLabels to render the abbreviated name of the day of the week using the following format:

<ChartCategoryAxisLabels Format="ddd dd/MM HH:mm"/>

While it is a valid format, it seems that it doesn't work for the category labels.

---

ADMIN EDIT

---

For the time being, you can use the following to render the abbreviated name of the day of the week in the ChartCategoryAxisLabels:

<ChartCategoryAxisLabels Format="{0:EEE dd/MM HH:mm}"/>

Expose colored ranges (Plot Bands) to allow highlighting certain areas in the chart plot area - similar to https://demos.telerik.com/kendo-ui/bar-charts/plotbands.

---

ADMIN EDIT

---

This feature will allow you to define certain color ranges in the plot area. If you are looking for ability to color the whole plot area in alternating way, you may check this feature request - Is it possible to change the plot area background color in an alternating way.

I want horizontal and vertical lines in the chart to act as markers (limits, thresholds). It would be awesome if there was a way to simply draw a horizontal and vertical lines, bound to a collection of y and x data respectively.

Something like the below would be nice 

    <TelerikChart>
        <ChartSeriesItems>
            <ChartSeries Type="@ChartSeriesType.Line" Name="@P_Name1" Color="blue"
                         Data="@P_Data1"
                         Field="@P_Field1"
                         CategoryField="@P_CategoryField1">
                <ChartSeriesLabels Visible="true" Template="#=dataItem.P_Description#" />
                <ChartSeriesMarkers Size="4" />
            </ChartSeries>
            <ChartHorizontalLines Data="@YLinesData"/>
            <ChartVerticalLines Data="@XLinesData"/>
        </ChartSeriesItems>
</TelerikChart>

@code{

List<double> YLinesData, XLinesData;

}

---

ADMIN EDIT

You can find some more details and ideas for workarounds here to consider in the meantime.

---

Our Site supports multiple themes that we have built using the SASS Theme Builder. For all Telerik Components we have used so far the theme changes on them as expected when using the example found here (Change Theme at Runtime). The problem seems to be the chart component will not adhere to the newly applied theme after its initial load. Seems like this is because it is shown as an SVG with hardcoded attributes on the element. Is there a workaround for this (other than reloading the components entirely)?

Before & After Theme Change:

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

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 ***

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

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

 }