How do I have a different format for multiple value axis

2 posts, 0 answers
  1. John Bowyer
    John Bowyer avatar
    31 posts
    Member since:
    Jun 2019

    Posted 21 Jan Link to this post

    I have two value axis items and I would like one to be in percent and the other to be numeric.  How can I achieve this.   My current code produces the output in the image.

      <kendo-chart-value-axis>
        <kendo-chart-value-axis-item *ngFor="let item of valueAxes" [name]="item.name" [title]="{ text: item.title }"
                                     [max]="item.max" [majorUnit]="item.majorUnit">
          <kendo-chart-value-axis-item-labels [format]="numberFormat">
          </kendo-chart-value-axis-item-labels>
        </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [title]="xAxis_Label" [axisCrossingValue]="crossingValues">
          <kendo-chart-category-axis-item-labels>
          </kendo-chart-category-axis-item-labels>
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-axis-defaults>
        <kendo-chart-axis-defaults-labels>
          <!-- format="n0"-->
        </kendo-chart-axis-defaults-labels>
      </kendo-chart-axis-defaults>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let series of model"
                                 [name]="series.name"
                                 [data]="series.data"
                                 [categoryField]="series.category" field="value"
                                 [stack]="series.stack"
                                 [color]="series.color"
                                 [type]="series.type"
                                 [axis]="series.axis">
          <kendo-chart-series-item-tooltip>
            <ng-template let-value="value" let-category="category">
              <!--[innerHTML]="series.dataLabel.replace('[value_1]', value.toLocaleString() ).replace('[year]', category ).replace('[series]', series.name  ).replace('[#%]', ((value)*100).toFixed(1).toString() + '%') "-->
              <span [innerHTML]="getToolTip(value, category, series.name, graphType  )"></span>
            </ng-template>
          </kendo-chart-series-item-tooltip>
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1279 posts

    Posted 23 Jan Link to this post

    Hello John,

    To set different formatting for separate value axis items, you can either declare the items separately with different [format] bindings, or provide the value conditionally in the ngFor loop based on the axis name or some other arbitrary custom logic, for example:

    https://stackblitz.com/edit/angular-oibeqr?file=app/app.component.ts

    The format can come from the axis item objects too:

    https://stackblitz.com/edit/angular-oibeqr-pcyzm1?file=app/app.component.ts

    I hope this helps.

    Regards,
    Dimiter Topalov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top