New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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>
In this article