Adding color to Line Chart based on Y-axis Value

[Anderson]

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))

 )

[Iliana Dyankova]

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

[Anderson]

I see, I tried using the PlotBands, but all that shows up is the line, the background color shading doesn't appear.

[Iliana Dyankova]

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