This is a migrated thread and some comments may be shown as answers.

Telerik chart series tooltip and color

1 Answer 54 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
p
Top achievements
Rank 1
p asked on 08 Nov 2013, 04:31 AM
1) Is it possible to change the color of a line chart depending on the value?
e.g If the value is less than a threshold value it is green. Once the line passes the threshold the color should be red.

2) Is it possible to show a tooltip between the PointMarks. My X-axis is time and depending on the hover location i want to show an image on the tooltip.


Thanks

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 12 Nov 2013, 01:08 PM
Hello,

Please find below my answers to your questions:
  • Conditional Item Colorization - the RadChart control doesn't support conditional item colorization out of the box. What you can do, however, in order to achieve that is to iterate through each series item and depending on the YValue assign desired colors for the PointMarks/Items. For example:

ASPX:

<telerik:RadChart ID="RadChart1" runat="server">
    <Series>
        <telerik:ChartSeries Type="Line">
            <Appearance>
                <PointMark Visible="true" Figure="Rectangle">
                    <FillStyle MainColor="Yellow"></FillStyle>
                    <Border Color="Gray" Width="2" />
                </PointMark>
            </Appearance>
            <Items>
                <telerik:ChartSeriesItem YValue="10">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="30"></telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="20"></telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="25"></telerik:ChartSeriesItem>
            </Items>
        </telerik:ChartSeries>
    </Series>
</telerik:RadChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
    for (int i = 0; i < RadChart1.Series[0].Items.Count; i++)
    {
        Telerik.Charting.ChartSeriesItem currItem = RadChart1.Series[0].Items[i];
        if (currItem.YValue > 20)
        {
            currItem.PointAppearance.FillStyle.MainColor = System.Drawing.Color.Red;
            currItem.PointAppearance.Border.Color = System.Drawing.Color.Red;
        }
        else if (currItem.YValue < 15)
        {
            currItem.PointAppearance.FillStyle.MainColor = System.Drawing.Color.Green;
            currItem.PointAppearance.Border.Color = System.Drawing.Color.Green;
        }
    }
}

  • ToolTips position - currently the ToolTips of the RadChart doesn't support control over their position. What you can do, however, in order to achieve that is to integrate the RadToolTip control which supports the controlling of the position. More information on this integration is available in Chart - Item Tooltips in Radchart online demo.

Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Chart (Obsolete)
Asked by
p
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or