Is there any way to set the DataFormatString for the YAxis.LabelsAppearance property so that it will show a value as 1/1000th or 1/millionth of the actual figure in the data source? Kind of like the equivalent of string.Format("0,") which does the same thing?
3 Answers, 1 is accepted
0
Hi Johnathan,
You should use templates, for example:
JavaScript:
ASPX:
Regards,
Danail Vasilev
Telerik
You should use templates, for example:
JavaScript:
<script>
function
pageLoad() {
var
chart = $find(
"<%=RadHtmlChart1.ClientID%>"
);
chart._chartObject.options.valueAxis.labels.template =
"#= FormatLongNumber(value) #"
;
chart.repaint();
};
function
FormatLongNumber(value) {
if
(value === 0) {
return
0;
}
// hundreds
if
(value <= 999) {
return
value;
}
// thousands
if
(value >= 1000 && value <= 999999) {
return
(value / 1000) +
'K'
;
}
// millions
if
(value >= 1000000 && value <= 999999999) {
return
(value / 1000000) +
'M'
;
}
// billions
if
(value >= 1000000000 && value <= 999999999999) {
return
(value / 1000000000) +
'B'
;
}
return
value;
}
</script>
ASPX:
<
telerik:RadHtmlChart
runat
=
"server"
ID
=
"RadHtmlChart1"
Width
=
"500"
Height
=
"500"
>
<
PlotArea
>
<
Series
>
<
telerik:ColumnSeries
Name
=
"Product 1"
>
<
LabelsAppearance
>
<
ClientTemplate
>
#if(value != undefined){# #=FormatLongNumber(value)# #}#
</
ClientTemplate
>
</
LabelsAppearance
>
<
SeriesItems
>
<
telerik:CategorySeriesItem
Y
=
"45000000"
/>
<
telerik:CategorySeriesItem
Y
=
"53000000"
/>
<
telerik:CategorySeriesItem
Y
=
"60000000"
/>
</
SeriesItems
>
</
telerik:ColumnSeries
>
<
telerik:ColumnSeries
Name
=
"Product 1"
>
<
LabelsAppearance
>
<
ClientTemplate
>
#if(value != undefined){# #=FormatLongNumber(value)# #}#
</
ClientTemplate
>
</
LabelsAppearance
>
<
SeriesItems
>
<
telerik:CategorySeriesItem
Y
=
"15000000"
/>
<
telerik:CategorySeriesItem
Y
=
"23000000"
/>
<
telerik:CategorySeriesItem
Y
=
"10000000"
/>
<
telerik:CategorySeriesItem
Y
=
"120000"
/>
<
telerik:CategorySeriesItem
Y
=
"345000"
/>
<
telerik:CategorySeriesItem
Y
=
"12000"
/>
<
telerik:CategorySeriesItem
Y
=
"2000"
/>
</
SeriesItems
>
</
telerik:ColumnSeries
>
</
Series
>
<
XAxis
>
<
Items
>
<
telerik:AxisItem
LabelText
=
"1"
/>
<
telerik:AxisItem
LabelText
=
"2"
/>
<
telerik:AxisItem
LabelText
=
"3"
/>
<
telerik:AxisItem
LabelText
=
"4"
/>
<
telerik:AxisItem
LabelText
=
"5"
/>
<
telerik:AxisItem
LabelText
=
"6"
/>
</
Items
>
</
XAxis
>
</
PlotArea
>
<
ChartTitle
Text
=
"Product sales for 2011"
>
</
ChartTitle
>
<
Legend
>
<
Appearance
Position
=
"Bottom"
/>
</
Legend
>
</
telerik:RadHtmlChart
>
Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0
Johnathan
Top achievements
Rank 1
answered on 23 Jun 2015, 12:20 PM
I get a runtime error with that code:
Type 'Telerik.Web.UI.HtmlChart.PlotArea.AxisLabelsAppearance' does not have a public property named 'ClientTemplate'
0
Johnathan
Top achievements
Rank 1
answered on 24 Jun 2015, 01:00 PM
I figured out why your code works and mine didn't. You're changing the label on top of each bar of the bar chart. I am trying to change the label on the Y-Axis. The labels on top of the bars are hidden in my code, and I don't mind seeing the full value on the tooltip.
<
telerik:RadHtmlChart
ID
=
"barChart"
Transitions
=
"true"
Skin
=
"Windows7"
CssClass
=
"chartTest"
Width
=
"100%"
runat
=
"server"
>
<
ClientEvents
OnLoad
=
"OnLoad"
></
ClientEvents
>
<
ChartTitle
>
<
Appearance
>
<
TextStyle
Bold
=
"true"
FontSize
=
"12"
/>
</
Appearance
>
</
ChartTitle
>
<
Legend
>
<
Appearance
Position
=
"Bottom"
></
Appearance
>
</
Legend
>
<
PlotArea
>
<
XAxis
Name
=
"TransactionDate"
DataLabelsField
=
"trans_date"
>
<
LabelsAppearance
RotationAngle
=
"300"
Step
=
"1"
Visible
=
"true"
>
<
TextStyle
Bold
=
"true"
FontSize
=
"9"
/>
</
LabelsAppearance
>
<
TitleAppearance
Visible
=
"false"
></
TitleAppearance
>
<
MajorGridLines
Visible
=
"false"
/>
<
MinorGridLines
Visible
=
"false"
/>
</
XAxis
>
<
YAxis
Name
=
"Impact"
MajorTickType
=
"None"
MinValue
=
"0"
>
<
TitleAppearance
>
<
TextStyle
Bold
=
"true"
FontSize
=
"10"
/>
</
TitleAppearance
>
<
MajorGridLines
Visible
=
"true"
/>
<
MinorGridLines
Visible
=
"false"
/>
</
YAxis
>
</
PlotArea
>
</
telerik:RadHtmlChart
>