Determine column series color

4 posts, 1 answers
  1. Johnathan
    Johnathan avatar
    32 posts
    Member since:
    Sep 2012

    Posted 08 Apr Link to this post

    Hello,

    I'm working on mapping column data to RadHTMLChart control & I'm running into a label display issue. One of the column colors that is used by my graph is black & it makes the tooltip label difficult to read since it also defaults to black. Is there a way to determine what color the column will be when the color for the column is set dynamically so that I can update the black column's tooltip label color? 

    Thanks,

    Johnathan Beam

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 13 Apr Link to this post

    Hi Johnathan,

    You can try to handle the seriesHover event where you can get the tooltip element by class name. After that you can get the color of the element and change it if needed.

    Regards,
    Danail Vasilev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Johnathan
    Johnathan avatar
    32 posts
    Member since:
    Sep 2012

    Posted 13 Apr in reply to Danail Vasilev Link to this post

    Hi Danail,

    Thank you for your response. Is there a code example for doing this?

    Thanks,

    Johnathan

  5. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 15 Apr Link to this post

    Hello Johnathan,

    You can try the code below:

    <script>
        function seriesHover(e) {
            setTimeout(function () {
                $telerik.$('.k-tooltip')[0].style.color = "red";
                $telerik.$('.k-tooltip')[0].style.backgroundColor = "blue";
            }, 10);
        }
    </script>
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
        <ClientEvents OnSeriesHover="seriesHover" />
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Name="Series 1">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="10" />
                        <telerik:CategorySeriesItem Y="20" />
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
            <XAxis>
                <LabelsAppearance RotationAngle="33"></LabelsAppearance>
                <Items>
                    <telerik:AxisItem LabelText="Item 1" />
                    <telerik:AxisItem LabelText="Item 2" />
                    <telerik:AxisItem LabelText="Item 3" />
                </Items>
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>


    Regards,
    Danail Vasilev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top