[Solved] Chart Axes Font

[Matei]

Good day,

It is my first time using the MVC Chart control and I am experiencing a problem. I can't seem to change the font of my bar chart's axes.

I also want to change the colour of the bars in the graph. I'm not specifying a theme, but I do have some default inline CSS that gets applied to the chart (SVG element) if I view the source.

I'm using IE 9.

I tried to specify the style explicitly using HtmlAttributes on Chart level and Series level but it didn't work. The generated HTML still used an inline CSS that is generated by the Chart.

Here is my code:

<%= Html.Telerik().Chart(Model.WorkflowStatusList)
    .Name("WorkflowItemChart")
    .Title(title => title.Visible(false))
    .Legend(false)
    .SeriesDefaults(series =>
        {
            series.Bar().Labels(true);
        })
    .Series(series =>
        {
            series.Bar(e => e.WorkflowItemCount);
        })
    .CategoryAxis(axis => axis.Categories(e => e.WorkflowStageName))
    .ValueAxis(axis => axis.Numeric())
    .ValueAxis(axis =>
        {
            // Set the X axis width to 20% wider than the highest workflow item count
            double maxLength = Model.WorkflowStatusList.Max(e => e.WorkflowItemCount) * 1.2;
            axis.Numeric().Max(maxLength);
        })
    .HtmlAttributes(new { style = "width: 450px; height: 300px;" })
%>

My question is:
How can I change the font of my bar chart's axes?
and
How can I change the colour of the bars on the chart?

Thank you in advance!

Regards,
Matei

[Matei]

I fixed it.
I didn't know it could be done through the Labels builder.
Here is my code below.

<%= Html.Telerik().Chart(Model.WorkflowStatusList)
    .Name("WorkflowItemChart")
    .Title(title => title.Visible(false))
    .Legend(false)
    .SeriesDefaults(series =>
        {
            series.Bar().Labels(e => e.Font("Arial,Verdana,sans-serif").Color("#666").Visible(true)).Color("#476E96");
        })
    .Series(series =>
        {
            series.Bar(e => e.WorkflowItemCount);
        })
    .CategoryAxis(axis => axis.Categories(e => e.WorkflowStageName).Labels(e => e.Font("Arial,Verdana,sans-serif").Color("#666")))
    .ValueAxis(axis =>
        {
            // Set the X axis width to 20% wider than the highest workflow item count
            double maxLength = Model.WorkflowStatusList.Max(e => e.WorkflowItemCount) * 1.2;
            axis.Numeric().Max(maxLength).Labels(e => e.Font("Arial,Verdana,sans-serif").Color("#666"));
        })
    .HtmlAttributes(new { style = "width: 450px; height: 300px;" })
%>

I was thinking of CSS and classes during my first approach at styling the chart.