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

• Matei

  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

  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

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