kendo-chart format values as currency

6 posts, 0 answers
  1. Jimmy
    Jimmy avatar
    6 posts
    Member since:
    Mar 2012

    Posted 23 Nov 2020 Link to this post

         I am using the kendo-chart to display charts in my application.  I need to format the values on the chart to currency.  I have tried to use the format option on the kendo-chart-series-item but that did not work.

     

                    <kendo-chart [title]="{ text: selectedCommentDriver?.driverTypeText  + ' Chart' }"  *ngIf="selectedCommentDriver?.driverType === 1">
                        <kendo-chart-series >
                            <kendo-chart-series-item type="column" [data]="(ChartData$ | async) ?.acuityChartData" field="nprImpact"  categoryField="chartLabelText" [labels]="seriesLabels" >
                            </kendo-chart-series-item>
                        </kendo-chart-series>
                        <kendo-chart-category-axis>
                            <kendo-chart-category-axis-item>
                            <kendo-chart-category-axis-item-labels [position]="'end'"></kendo-chart-category-axis-item-labels>
                            </kendo-chart-category-axis-item>
                        </kendo-chart-category-axis>
                    </kendo-chart>

     

    Here is a sample of the bar chart with sample data of 100000.  I would like these values to be $100,000.00

     

    Thank you for the help,

    Jimmy

  2. Svetlin
    Admin
    Svetlin avatar
    467 posts

    Posted 25 Nov 2020 Link to this post

    Hi Jimmy,

    Setting the [format] property of the kendo-chart-category-axis-item-labels component to 'c' formats the labels as currency:

          <kendo-chart-category-axis>
            <kendo-chart-category-axis-item>
              <kendo-chart-category-axis-item-labels
                [position]="'end'"
                [format]="'c'"
              ></kendo-chart-category-axis-item-labels>
            </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

    I hope this helps.

    Regards,
    Svetlin
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Jimmy
    Jimmy avatar
    6 posts
    Member since:
    Mar 2012

    Posted 01 Dec 2020 in reply to Svetlin Link to this post

    That worked, thank you...
  4. Jimmy
    Jimmy avatar
    6 posts
    Member since:
    Mar 2012

    Posted 01 Dec 2020 Link to this post

    Can you help me with one more thing?  I am trying to show positive numbers in green and negative numbers in green.  Is that possible?
  5. Jimmy
    Jimmy avatar
    6 posts
    Member since:
    Mar 2012

    Posted 01 Dec 2020 in reply to Svetlin Link to this post

    Can you help me with one more thing?  I am trying to show positive numbers in green and negative numbers in red.  Is that possible?
  6. Jimmy
    Jimmy avatar
    6 posts
    Member since:
    Mar 2012

    Posted 02 Dec 2020 in reply to Svetlin Link to this post

    I found an example which showed me exactly what I needed...

     

    https://www.telerik.com/forums/set-kendo-chart-series-item-color

     

Back to Top