Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Chart > Chart Axes Font

Not answered Chart Axes Font

Feed from this thread
  • Matei avatar

    Posted on Jan 9, 2012 (permalink)

    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

    Reply

  • Matei avatar

    Posted on Jan 9, 2012 (permalink)

    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.

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Chart > Chart Axes Font
Related resources for "Chart Axes Font"

ASP.NET MVC Chart Features  |  Documentation  |  Demos  |  Telerik TV ]