Trim category labels to specific length

[Tieson]

I apologize if this has already been asked, but I could not find an obvious answer in the forum posts I've read so far or in the documentation.

Anyway, what I'm trying to do is shorten the labels on a Column chart such that each item is a specific length. I would also need to display ellipses if the value is shortened, but if someone can get me started I can probably figure that out myself.

This is the chart as I've configured it so far:

<div class="chart-widget" id="chart-1">
    @(Html.Telerik()
    .Chart(Model.ChartData)
    .Name("Royalties")
    .HtmlAttributes(new { style = "width: 600px; height: 450px; font-family:Arial, sans-serif;" })
    .Title(title => title.Text("Royalties for 2008 - Q1"))
    .Legend(legend => legend.Position(ChartLegendPosition.Top))
    .Series(series => series
        .Column(x => x.Sales)
        .Color("#133d67")
        .Overlay(ChartBarSeriesOverlay.None)
        .Name("Royalties Per Type"))
    .ValueAxis(axis => axis
        .Numeric()
        .Title(title => title.Text("Royalties (USD)")))
    .CategoryAxis(axis => axis
        .Categories(s => s.Name)
        .Labels(labels => labels
            .Template("")
            .Rotation(-86)
            ))
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0:C}"))
    )
</div>

And the resulting rendered chart is attached in the screenshot.

[Iliana Dyankova]

Hello Tieson,

To achieve this you could use a template for the labels in the chart. Then create a function which reduce the length of the labels and call it in this template. For example:

@(Html.Telerik().Chart()
 ...
  .CategoryAxis(axis => axis
     .Labels(label => label.Template("<#= shortLabels(value) #>"))
  )
)
 ...

<script>
function shortLabels(value) {
   if (value.length > 3) {
      value = value.substring(0, 3) + "...";
      return value;
   }
}
 ...

</script>

Also, I believe you might find the information here very useful. 

Regards,
Iliana Nikolova
the Telerik team

[Tieson]

Greetings Iliana;

I actually wound up just creating read-only properties in my model (with basically the same logic you have in the JavaScript function) and binding to those, but it's good to know it can be done client side too (if, for instance, I'm pulling from an API I don't have control over and can't apply a decorator).

Thanks for the reply.