How to get Major/Minor GridLines only at specified value on Bubble Chart

2 posts, 0 answers
  1. B
    B avatar
    1 posts
    Member since:
    May 2014

    Posted 02 May 2014 Link to this post

    Hi Team,
                   I am working on the Radhtmlchart type Bubble ,here my required functionalities are
    1. How to show only one  XAxis.MijorGridLines on X-axis and one YAxis.MijorGridLines  on Y-axis at our specified value(50 in attchement).Means suppose I have X-axis values from 0 to 100 and Y-axis values from 0 to 100 ,here my requiremnt is i want show only one  MijorGridLine at value 50 on X-axis and also want  to show one more MijorGridLine at value 50 on Y-axis .

    2. How to  know AxisTickItem value.

    3. How to dispaly the Some text in each quadrant when divide the chart into 4-parts by middle value on X-axis and Y-axis
    4. How  to dispaly some text between specified Major/Minor GridLines.

    Please find attched document for more information and I also highlighted with Red circles where our requirement fullfill.
  2. Danail Vasilev
    Danail Vasilev avatar
    1502 posts

    Posted 07 May 2014 Link to this post


    Currently it is not possible to set the step property for the axes grid lines. I have logged this feature request in our feedback portal here, so that you can monitor, comment and raise its priority by voting on it. For the time being you can use the workaround provided in the feedback item.

    Regarding the axis values could you please elaborate more into the expected behavior? If you want to display custom text, based on particular values then you can use templates as illustrated in this feedback item.

    As for displaying custom text over the chart you can align, for example, a div element with absolute position over the chart that contains the desired string. For example:
        function pageLoad() {
            var chart = $find("<%=BubbleChart.ClientID%>");
            chart._chartObject.options.xAxis.majorGridLines.step = 5;
            chart._chartObject.options.yAxis.majorGridLines.step = 5;
    <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400">
        <ChartTitle Text="Market Share Study">
                <FillStyle BackgroundColor="White"></FillStyle>
            <XAxis MinValue="0" MaxValue="100" Step="10">
                <MinorGridLines Visible="false"/>
            <YAxis MinValue="0" MaxValue="100" Step="10">
                <MinorGridLines Visible="false"/>
                    <Appearance FillStyle-BackgroundColor="#6ab2c9">
                    <TooltipsAppearance DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<br /> Sales: ${1}" />
                        <telerik:BubbleSeriesItem Size="3" X="5" Y="55" />
                        <telerik:BubbleSeriesItem Size="12" X="14" Y="80" />
                        <telerik:BubbleSeriesItem Size="33" X="20" Y="60" />
                        <telerik:BubbleSeriesItem Size="10" X="18" Y="24" />
                        <telerik:BubbleSeriesItem Size="42" X="22" Y="32" />
            <Appearance Position="Right"></Appearance>
    <div style="position: absolute; top: 60px; left: 70px">
        some text

    As a small token of gratitude for sharing your ideas with us I have updated your Telerik points.

    Danail Vasilev

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top