This is a migrated thread and some comments may be shown as answers.

Formatting value axis labels

2 Answers 314 Views
Charts
This is a migrated thread and some comments may be shown as answers.
esp
Top achievements
Rank 1
Veteran
esp asked on 11 Aug 2017, 06:53 AM

Is it possible to override the value axis label content?

<kendo-chart-value-axis-item-labels format="n" [visual]="drawLabel"></kendo-chart-value-axis-item-labels>

Format I believe uses the Intl service which in turn uses the LOCALE_ID - I'm changing culture dynamically so I cannot use this.

Visual takes a function which might have worked except you have no reference to the component so I can't use any injected services to format the text.

The tooltip has a template option so something like this works for me there, using a custom pipe:

<kendo-chart-tooltip>
  <ng-template kendoChartSeriesTooltipTemplate let-value="value">
    {{ value | intlNumber }}
  </ng-template>
</kendo-chart-tooltip>

Is there anything I'm missing that could achieve this for value axis labels?

2 Answers, 1 is accepted

Sort by
0
Accepted
T. Tsonev
Telerik team
answered on 15 Aug 2017, 07:02 AM
Hello,

The labels of the axis can be customized through the content function. The documentation is a bit sparse, but example usage looks like:

<kendo-chart-value-axis-item-labels [content]="labelContent"></kendo-chart-value-axis-item-labels>
...
public labelContent = (e: any) => {
  return this.formatValue(e.value);
};

Notice the lambda function used to capture this. The same technique is applicable to the visual callback as well.

Regards,
T. Tsonev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
esp
Top achievements
Rank 1
Veteran
answered on 15 Aug 2017, 09:37 PM

[quote]public labelContent = (e: any) => {
  return this.formatValue(e.value);
};

Notice the lambda function used to capture this.[/quote]

Didn't know this was possible -- cheers.

Tags
Charts
Asked by
esp
Top achievements
Rank 1
Veteran
Answers by
T. Tsonev
Telerik team
esp
Top achievements
Rank 1
Veteran
Share this question
or