I have a line chart I am using to plot two related series of data. When these two series have the same values, or very similar values, the series that is second in the render order completely covers up the first line. This makes it look like the first line isn't being rendered, and makes it impossible to access the tooltips for the first series. I need a way to disambiguate overlapping data.
Thank you
It would be nice to be able to use Html markup in the ChartCategoryAxisLabel.
I can see in the documentation that it currently doesn't support this. I am curious if it is possible. Thank you.
Is it possible to change plot area background color on charts so that every second line is a different color.
I have attached a image with the background color look.
---
ADMIN EDIT
The current request targets the ability to color the whole plot area in alternating way. If you need to only color a certain range of the plot area, you may take a look at the Plot bands feature request.
While the most common use case is to alter the background color based on the major plot area units, we'd like to gather your feedback on how you'd expect the feature to behave - allow color altering on major units, minor units or custom steps.
---
---
ADMIN EDIT
Screen recording attached below, code to reproduce it too.
---
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.
---
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" };
}
---
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.
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:
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.