Charts - Error Bars

@(Html.DevExtreme().Chart()

    .ID("chart")

    .DataSource(new[] {

        new { month = "January", avgT = 14.1, avgLowT = 9.1, avgHighT = 19.1, avgH = 70 },

        new { month = "February", avgT = 14.7, avgLowT = 9.8, avgHighT = 19.6, avgH = 74 },

        new { month = "March", avgT = 15.6, avgLowT = 10.6, avgHighT = 20.4, avgH = 79 },

        new { month = "April", avgT = 16.8, avgLowT = 11.9, avgHighT = 21.7, avgH = 80 },

        new { month = "May", avgT = 18.2, avgLowT = 13.6, avgHighT = 22.7, avgH = 83 },

        new { month = "June", avgT = 20.2, avgLowT = 15.4, avgHighT = 25.0, avgH = 85 },

        new { month = "July", avgT = 22.6, avgLowT = 17.3, avgHighT = 27.9, avgH = 86 },

        new { month = "August", avgT = 23.0, avgLowT = 17.7, avgHighT = 28.4, avgH = 86 },

        new { month = "September", avgT = 22.3, avgLowT = 17.0, avgHighT = 27.7, avgH = 83 },

        new { month = "October", avgT = 20.1, avgLowT = 14.8, avgHighT = 25.3, avgH = 79 },

        new { month = "November", avgT = 17.2, avgLowT = 11.8, avgHighT = 22.7, avgH = 72 },

        new { month = "December", avgT = 14.6, avgLowT = 9.5, avgHighT = 19.7, avgH = 68 }

    })

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

    .Panes(p => {

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

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

    })

    .DefaultPane("bottom")

    .Series(s => {

        s.Add()

            .Pane("top")

            .ValueField("avgT")

            .Name("Average Temperature, °C")

            .ValueErrorBar(b => b

                .LowValueField("avgLowT")

                .HighValueField("avgHighT")

                .LineWidth(1)

                .Opacity(0.8));

​

        s.Add()

            .Pane("bottom")

            .ValueField("avgH")

            .Type(SeriesType.Bar)

            .Name("Average Humidity, %")

            .ValueErrorBar(b => b

                .Type(ValueErrorBarType.Fixed)

                .Value(3)

                .LineWidth(1));

    })

    .ArgumentAxis(a => a

        .Label(l => l

            .DisplayMode(ChartLabelDisplayMode.Stagger)))

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

    .ValueAxis(a => {

        a.Add()

            .Pane("top")

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

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

​

        a.Add()

            .TickInterval(50)

            .Pane("bottom")

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

            .Title(t => t.Text("Humidity, %"));

    })

    .Tooltip(t => t

        .Enabled(true)

        .CustomizeTooltip(@<text>

            function (arg) {

                return {

                    text: arg.seriesName + ": " + arg.value + " ( range: " + arg.lowErrorValue  + " - "  + arg.highErrorValue + ")"

                };

            }

        </text>))

    .Legend(l => l

        .VerticalAlignment(VerticalEdge.Bottom)

        .HorizontalAlignment(HorizontalAlignment.Center))

    .Title(t => t.Text("Weather in Los Angeles, California"))

)

​