Charts - Multiple Panes

@(Html.DevExtreme().Chart()

    .ID("chart")

    .CommonSeriesSettings(s => s.ArgumentField("Month"))

    .Panes(p => {

        p.Add().Name("TopPane");

        p.Add().Name("BottomPane");

    })

    .DefaultPane("BottomPane")

    .Series(s => {

        s.Add()

            .Pane("TopPane")

            .Color("#b0daff")

            .Type(SeriesType.RangeArea)

            .RangeValue1Field("MinT")

            .RangeValue2Field("MaxT")

            .Name("Monthly Temperature Ranges, °C");

        s.Add()

            .Pane("TopPane")

            .ValueField("AvgT")

            .Name("Average Temperature, °C")

            .Label(l => l

                .Visible(true)

                .CustomizeText(@<text>

                    function (){

                        return this.valueText + " °C";

                    }

                </text>));

        s.Add()

            .Type(SeriesType.Bar)

            .ValueField("Prec")

            .Name("prec, mm")

            .Label(l => l

                .Visible(true)

                .CustomizeText(@<text>

                    function (){

                        return this.valueText  + " mm";

                    }

                </text>));

    })

    .ValueAxis(a => {

        a.Add()

            .Pane("BottomPane")

            .Grid(g => g.Visible(true))

            .Title(t => t.Text("Precipitation, mm"));

        a.Add()

            .Pane("TopPane")

            .Grid(g => g.Visible(true))

            .Title(t => t.Text("Temperature, °C"));

    })

    .Legend(l => l

        .VerticalAlignment(VerticalEdge.Bottom)

        .HorizontalAlignment(HorizontalAlignment.Center)

    )

    .Export(e => e.Enabled(true))

    .Title(t => t.Text("Weather in Glendale, CA"))

    .DataSource(new[] {

        new { Month = "January", AvgT = 9.8, MinT = 4.1, MaxT = 15.5, Prec = 109 },

        new { Month = "February", AvgT = 11.8, MinT = 5.8, MaxT = 17.8, Prec = 104 },

        new { Month = "March", AvgT = 13.4, MinT = 7.2, MaxT = 19.6, Prec = 92 },

        new { Month = "April", AvgT = 15.4, MinT = 8.1, MaxT = 22.8, Prec = 30 },

        new { Month = "May", AvgT = 18.0, MinT = 10.3, MaxT = 25.7, Prec = 10 },

        new { Month = "June", AvgT = 20.6, MinT = 12.2, MaxT = 29.0, Prec = 2 },

        new { Month = "July", AvgT = 22.2, MinT = 13.2, MaxT = 31.3, Prec = 2 },

        new { Month = "August", AvgT = 22.2, MinT = 13.2, MaxT = 31.1, Prec = 1 },

        new { Month = "September", AvgT = 21.2, MinT = 12.4, MaxT = 29.9, Prec = 8 },

        new { Month = "October", AvgT = 17.9, MinT = 9.7, MaxT = 26.1, Prec = 24 },

        new { Month = "November", AvgT = 12.9, MinT = 6.2, MaxT = 19.6, Prec = 64 },

        new { Month = "December", AvgT = 9.6, MinT = 3.4, MaxT = 15.7, Prec = 76 }

    })

)

​