How to shade in a line chart series

[Jerry]

I am using the below line chart.

Is there a way to have the green series area filled in with green?

I would like the green series fully colored in as green. But leave the red series as a line.

 

 

 

 

 

 

 <div class="demo-section wide">

    @(Html.Kendo().Chart()

        .Name("chart")

        .Title("Hybrid car mileage report")

        .Legend(legend => legend

            .Position(ChartLegendPosition.Top)

        )

        .SeriesDefaults(seriesDefaults =>

            seriesDefaults.Line().Style(ChartSeriesStyle.Smooth)

        )

        .Series(series =>

        {

            series

                .Line(new double[] { 10, 40, 65, 55, 25 })

                .Name("mpg")

                .Color("red")

                .Axis("mpg");

            series

                .Line(new double[] { 1, 3, 6, 5, 2 })

                .Name("l/100 km")

                .Color("green")

                .Axis("l100km");

        })

        .CategoryAxis(axis => axis

            .Categories("Mon", "Tue", "Wed", "Thu", "Fri")

            // Align the first two value axes to the left

            // and the last two to the right.

            //

            // Right alignment is done by specifying a

            // crossing value greater than or equal to

            // the number of categories.

            .AxisCrossingValue(0, 0, 10, 10)

        )

        .ValueAxis(axis => axis

            .Numeric()

                .Title("miles")

                .Min(0).Max(100)

        )

        .ValueAxis(axis => axis

            .Numeric("km")

                .Title("km")

                .Min(0).Max(161).MajorUnit(32)

        )

        .ValueAxis(axis => axis

            .Numeric("mpg")

                .Title("miles per gallon")

                .Color("#ec5e0a")

        )

        .ValueAxis(axis => axis

            .Numeric("l100km")

                .Title("liters per 100km")

                .Color("#4e4141")

        )

        .Tooltip(tooltip => tooltip

            .Visible(true)

            .Format("{0}%")

        )

    )

</div>

 

[Petar]

Hi, Jerry.

Please check this REPL example and let me know if it demonstrates what you need to have in your scenario.

To achieve the demonstrated scenario, the following, marked in yellow configuration is added to the definition that you've shared:

.Series(series =>
{
    series
        .Line(new double[] { 10, 40, 65, 55, 25 })
        .Name("mpg")
        .Color("red")
        .Axis("mpg");
    series
        .Line(new double[] { 1, 3, 6, 5, 2 })
        .Name("l/100 km")
        .Color("green")
        .Axis("l100km")
        .Type("area")
        .Line(ln=>ln.Style(ChartAreaStyle.Smooth));
})

I hope the above suggestion will help you achieve the desired functioanlity. 

Regards,
Petar
Progress Telerik

[Jerry]

Yes, that's what I needed.

 

[Petar]

Hi, Jerry. 

I am happy to hear that the suggested approach has helped you!