Детские стульчики заполняют внутреннюю часть графика другим цветом фона

Question

Я использую Highcharts, и мне нужно заполнить внутреннюю часть графика другим цветом.

Я пробовал:

chart: {
  renderTo: ‘container’,
  background-color: ‘#ff0000’
},

так далее…

но это только меняет фон всей диаграммы.

Вот скриншот, показывающий, что мне нужно изменить.

Как я могу это сделать?

Вот код тоже:

<script type="text/javascript">

    $(function () {


            window.chart = new Highcharts.StockChart({

                chart: {
                    renderTo: 'container'

                },

                rangeSelector: {
                    selected: 1,
                    inputDateFormat: '%d-%m-%Y',
                    inputDateParser: function (value) {
                        value = value.split('-');
                        return Date.UTC(
                            parseInt(value[2]),
                            parseInt(value[1]) - 1,
                            parseInt(value[0])
                        );
                    },
                },

                title: {
                    text: ''
                },

                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function () {


                                }
                            }
                        }
                    }
                },

                series: [{
                    name: 'label',
                    data: data,
                    tooltip: {
                        valueDecimals: 2
                 }}]

            }, function(chart) {

                // apply the date pickers
                setTimeout(function() {
                    $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
                }, 0)
            });



        // Set the datepicker's date format
        $.datepicker.setDefaults({
            dateFormat: 'dd-mm-yy',
            onSelect: function(dateText) {
                this.onchange();
                this.onblur();

            }
        });




    });

</script>

Answer 1

Попробуйте установить тип диаграммы на "площадь" и указать fillColor:

chart: {
    type: 'area'
}
plotOptions: {
   area: {
      fillColor: 'red'
   }
}

Демо: http://jsfiddle.net/remisture/dsuLzpqL/

Answer 2

Части серии называются "зонами", их можно покрасить следующим образом: http://api.highcharts.com/highcharts/plotOptions.line.zones

образец кода:

    series: [{
        data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
        zones: [{
            value: 0,
            color: '#f7a35c'
        }, {
            value: 10,
            color: '#7cb5ec'
        }, {
            color: '#90ed7d'
        }]
    }]

jsfiddle