[Solved] Normal area series and reversed area series in one chart is not working

[Oliver]

Currently I try to add three area series within one chart. Two area series should be rendered from top to bottom, and one from bottom to top. In my example "grenze3" should be rendered from bottom to top.

This is my html code:

@{
    ViewBag.Title = "Home Page";
}

<div id="example">

    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <script>
        function createChart() {
            $("#chart").kendoStockChart({
                dataSource: {
                    transport: {
                        read: {
                            url: "../Content/spain-electricity.json",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                year: { type: "date" }
                            }
                        }
                    }
                },
                title: {
                    text: ""
                },
                dateField: "year",
                legend: {
                    visible: true,
                    position: "top"
                },
                seriesDefaults: {
                    type: "line",
                    markers: {
                        visible: false
                    }
                },
                series: [{
                    field: "nuclear",
                    name: "test 1",
                    axis: "bottom"
                },
                {
                    field: "hydro",
                    name: "test 2",
                    axis: "bottom"
                },
                {
                    field: "wind",
                    name: "test 3",
                    axis: "bottom"
                },
                {
                    field: "grenze2",
                    name: "Grenze 2",
                    type: "area",
                    missingValues: "interpolate",
                    axis: "top",
                    line: {
                        style: "step"
                    }
                },
                {
                    field: "grenze",
                    name: "Grenze",
                    type: "area",
                    missingValues: "interpolate",
                    axis: "top",
                        line: {
                            style: "step"
                        }
                },

                {
                    field: "grenze3",
                    name: "Grenze 3",
                    type: "area",
                    missingValues: "interpolate",
                    axis: "bottom",
                        line: {
                            style: "step"
                        }
                },
                ],
                valueAxes: [

                    {
                        name: "top",
                        labels: {
                            visible: true,
                            format: "{0}"
                        },
                        reverse: true,
                        visible: true,
                        axisCrossingValues: 70000,
                        min: 70000,
                        max: 0
                    },
                    {
                        name: "bottom",
                        labels: {
                            visible: true,
                            format: "{0}"
                        },
                            visible: true,
                        reverse: false,
                        min: 0,
                        max: 70000
                    },
                ],
                categoryAxis: {
                    field: "year",
                    type: "date",
                    labels: {
                        rotation: 0
                    },
                    crosshair: {
                        visible: true
                    },
                    majorGridLines: {
                        visible: false
                    },
                },
                valueAxis: {
                    labels: {
                        format: "N0"
                    },
                    majorUnit: 10000,
                    //plotBands: [{
                    //    from: 0,
                    //    to: 10000,
                    //    color: "#c00",
                    //    opacity: 0.3
                    //}, {
                    //    from: 70000,
                    //    to: 60000,
                    //    color: "#c00",
                    //    opacity: 0.3
                    //}, {
                    //    from: 70000,
                    //    to: 55000,
                    //    color: "#0066ff",
                    //    opacity: 0.3
                    //}],
                },
                tooltip: {
                    visible: true,
                    shared: true,
                    format: "N0"
                },
                navigator: {
                    series: [{
                        field: "nuclear",
                        name: "Hauptpresse"
                    },
                    {
                        field: "hydro",
                        name: "Dehner 1"
                    },
                    {
                        field: "wind",
                        name: "Dehner 2"
                    },
                    {
                        field: "grenze",
                        name: "Grenzwert"
                    }],
                    select: {
                        from: "2016/12/01",
                        to: "2017/10/07"
                    },
                    categoryAxis: {
                        labels: {
                            rotation: "auto"
                        }
                    }
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>

</div>

 

This is my json data file:

[
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2016/12/01",
    "unit": "GWh",
    "solar": 2578,
    "hydro": 26112,
    "wind": 32203,
    "nuclear": 58973
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/01/01",
    "unit": "GWh",
    "solar": 508,
    "hydro": 30522,
    "wind": 27568,
    "nuclear": 55103
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/02/01",
    "unit": "GWh",
    "solar": 119,
    "hydro": 29831,
    "wind": 23297,
    "nuclear": 60126
  },
  {
    "grenze": 60000,
    "grenze2": 65000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/03/01",
    "unit": "GWh",
    "solar": 41,
    "hydro": 23025,
    "wind": 21176,
    "nuclear": 57539
  },
  {
    "grenze": 60000,
    "grenze2": 65000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/04/01",
    "unit": "GWh",
    "solar": 56,
    "hydro": 34439,
    "wind": 15700,
    "nuclear": 63606
  },
  {
    "grenze": 60000,
    "grenze2": 65000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/05/01",
    "unit": "GWh",
    "solar": 41,
    "hydro": 43897,
    "wind": 12075,
    "nuclear": 61875
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/06/01",
    "unit": "GWh",
    "solar": 30,
    "hydro": 26270,
    "wind": 9342,
    "nuclear": 63016
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/07/01",
    "unit": "GWh",
    "solar": 24,
    "hydro": 43864,
    "wind": 6759,
    "nuclear": 63708
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/08/01",
    "unit": "GWh",
    "solar": 18,
    "hydro": 31807,
    "wind": 4727,
    "nuclear": 62206
  }
]

 

In theory plot bands would also work, but from my understanding they do not support different values as you see it in the grenze2 series.

[Iliana Dyankova]

Hi Oliver,

Thank you for reporting this - it appears there is an issue in the current version of Kendo UI Area Chart. I logged the case for further investigation and fixing - you could try its progress here: 

https://github.com/telerik/kendo-ui-core/issues/3174

Regards,
Iliana Nikolova
Telerik by Progress