negative value in pie/donut htmlchart

Thread is closed for posting
4 posts, 0 answers
  1. Saqib
    Saqib avatar
    24 posts
    Member since:
    Jan 2014

    Posted 18 Mar 2014 Link to this post

    Hi,
    Does anyone have any experience as how to display negative value in Pie / donut using htmlcharts?

    Thanks,
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 19 Mar 2014 Link to this post

    Hello Saqib,

    Negative values are not meaningful in the context of a pie/donut chart and are not supported, as explained here: http://www.telerik.com/help/aspnet-ajax/htmlchart-types-pie-chart.html.

    What you can do is to add a minus sign before the value in the label / toolip via the DataFormatString property of their tags (http://www.telerik.com/help/aspnet-ajax/htmlchart-server-side-api-configure-series.html) or their ClientTemplate (http://www.telerik.com/help/aspnet-ajax/htmlchart-client-templates-for-tooltips-and-labels.html).


    Regards,

    Marin Bratanov
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Saqib
    Saqib avatar
    24 posts
    Member since:
    Jan 2014

    Posted 19 Mar 2014 in reply to Marin Bratanov Link to this post

    Thanks for the reply. What I decided probably to use exclude property to show negative pie.
    How can I show both x and y value to show in tooltip with different formats for each x and y?
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 20 Mar 2014 Link to this post

    Hi Saqib,

    You can use either use DataFormatString property or templates. For example:
    ASPX:
    <telerik:RadHtmlChart runat="server" ID="ScatterLineChart1" Transitions="true">
        <PlotArea>
            <Series>
                <telerik:ScatterLineSeries Name="0.8C" MissingValues="Gap">
                    <LabelsAppearance DataFormatString="{1:P0} for {0:C1} currency" Position="Below" />
                    <TooltipsAppearance>
                        <ClientTemplate>
                            #=kendo.format(\'{0:P0}\', value.y)# for #=kendo.format(\'{0:C1}\', value.x)# currency
                        </ClientTemplate>
                    </TooltipsAppearance>
                    <MarkersAppearance MarkersType="Circle" />
                    <SeriesItems>
                        <telerik:ScatterSeriesItem X="10" Y="0.10" />
                        <telerik:ScatterSeriesItem X="15" Y="0.20" />
                        <telerik:ScatterSeriesItem />
                        <telerik:ScatterSeriesItem X="32" Y="0.40" />
                        <telerik:ScatterSeriesItem X="43" Y="0.50" />
                        <telerik:ScatterSeriesItem X="55" Y="0.60" />
                        <telerik:ScatterSeriesItem X="60" Y="0.70" />
                    </SeriesItems>
                </telerik:ScatterLineSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>

    You may also find useful the following resources:



    Regards,
    Danail Vasilev
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
Back to Top