Remove $ Currency Sign from Box Plot Chart Tooltip

Description

Removing the $ sign from currency formatted cells of the BoxPlot, but keeping the formatting of the chart.

Solution

The default state of the BoxPlot is currency formatted with $(dollar) sign after the value. For removing it, in this article is showed two approaches for achiving the desire formatting.

1. Using the client-side OnKendoWidgetInitializing event to set the desired format string directly to the kendo widget beneath the RadHtmlChart control.

   function widgetInit(sender, args) {
     var widgetSeries = args.series;
     widgetSeries.forEach(function (currentSeries) {
         if (currentSeries.type == 'boxPlot') {
             currentSeries.tooltip.format = 
             "<table>" + "
             <tr><th colspan='2'>{6:d}</th></tr>" + "
             <tr><td>Lower:</td><td>{0:N}</td></tr>" + "
             <tr><td>Q1:</td><td>{1:N}</td></tr>" + "
             <tr><td>Median:</td><td>{2:N}</td></tr>" + "
             <tr><td>Mean:</td><td>{5:N}</td></tr>" + "
             <tr><td>Q3:</td><td>{3:N}</td></tr>" + "
             <tr><td>Upper:</td><td>{4:N}</td></tr>" + "
             </table>";
         }
     });
   }
   

2. Another approach is to implement the custom format string with all the needed fields inside the server-side tooltip tag for BoxPlotSeries.

<telerik:BoxPlotSeries
    DataLowerField="lower"
    DataQ1Field="q1"
    DataMedianField="median"
    DataQ3Field="q3"
    DataMeanField="mean"
    DataUpperField="upper"
    DataOutliersField="outliers">
    <TooltipsAppearance 
        Color="White"
        DataFormatString=
"{6:d}<br/>Lower:{0:N}<br/>Q1:{1:N}<br/>Median:{2:N}<br/>Mean:{5:N}<br/>Q3:{3:N}<br/>Upper:{4:N}">
    </TooltipsAppearance>
</telerik:BoxPlotSeries>