This is a migrated thread and some comments may be shown as answers.

Adding color to Line Chart based on Y-axis Value

3 Answers 68 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Anderson
Top achievements
Rank 1
Anderson asked on 13 Feb 2014, 12:28 AM
Hi,

I was wondering if line charts had the capability to set the chart area's background color? (see image attached)

I tried doing something like this, but all I get is the line.
@(Html.Kendo().Chart()
    .Name("KendoChart")
    .Title("Sample Chart")
    .ChartArea(chart => {chart.Width(600).Border(1, "#000", ChartDashType.Solid);})
    .HtmlAttributes(new { style = "width:600px;height:400px;float:left;margin:2px" })
    .Series(s =>
        {
            s.Line(new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 });
        })
        .Tooltip(tip => tip.Visible(true))
            .YAxis(y =>
            {
                y.Numeric().Min(0).Max(3000).MajorUnit(100).PlotBands(bands =>
                    {
                        bands.Add().From(0).To(3).Color("yellow").Opacity(0.3);
                        bands.Add().From(3).To(6).Color("orange").Opacity(0.3);
                        bands.Add().From(6).To(9).Color("red").Opacity(0.3);
                    });
        })
    .Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Bottom))
 
 )

3 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 13 Feb 2014, 09:47 AM
Hi Anderson,

Basically you could set a single background color to the plotArea via the plotArea.background option:
@(Html.Kendo().Chart(Model)
   //....
   .PlotArea(pl=>pl.Background("yellow"))
)
In case you would like multiple colors (like in the attached image) you could use the yAxis.plotBands:
@(Html.Kendo().Chart(Model)
   //....
   .YAxis(axis => axis.Numeric()
      //....
      .PlotBands(bands => {
          bands.Add().From(0).To(30000).Color("red");
          bands.Add().From(30000).To(60500).Color("yellow");
      })
   )
)

Regards,
Iliana Nikolova
Telerik

Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

0
Anderson
Top achievements
Rank 1
answered on 14 Feb 2014, 04:37 PM
I see, I tried using the PlotBands, but all that shows up is the line, the background color shading doesn't appear.
0
Accepted
Iliana Nikolova
Telerik team
answered on 17 Feb 2014, 08:04 AM
Hello Anderson,

I believe the plotBands are not visible because:
  • You are using yAxis while Kendo UI Line Chart is a categorical chart and requires a value axis instead (documentation link);
  • You have pointed very low values for the plotBands while the max of the axes is too high.
Hence in order to achieve the expected result I can suggest: 
  • Change the Chart configuration and use a valueAxis;
  • Remove .Max(3000) from the chart configuration or set higher values to the plotBands.

Regards,
Iliana Nikolova
Telerik

Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

Tags
Charts
Asked by
Anderson
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Anderson
Top achievements
Rank 1
Share this question
or