Добавление градиента площади в верхний график линии

Question

Я пытаюсь добавить градиент области на мою верхнюю диаграмму, аналогичную области или диаграмме с областями. К сожалению, я не могу использовать их, так как они, как правило, делают мою диаграмму неинтересной, поскольку мои данные обычно меняются с разницей примерно в 3. Вот мой код: https://codepen.io/gabedesigns/pen/GXZPqg?editors=1111, а вот пример кода:

    $('#Platinum').highcharts('StockChart', {
    colors: ['#E48701'],
    scrollbar: {
      enabled: false
    },
    rangeSelector: {
      enabled: false
    },
    navigator: {
      enabled: true
    },
   yAxis: {
      labels: {
        format: '${value:,.0f}'
              },
    title: {
      text: 'Platinum'
    },
    series: [{
      name: 'Price',
      data: [787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 787, 787, 786, 786, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 786, 786, 787, 787, 787, 788, 787, 787, 788, 788, 787, 787, 787, 787, 787, 787, 788, 787, 787, 787, 787, 787, 787, 786, 787, 786, 786, 786, 785, 785, 785, 785, 785, 785, 785, 785, 785, 785, 786, 785, 785, 785, 785, 784, 785, 785, 784, 785, 784, 784, 784, 785, 785, 785, 785, 785, 785, 785, 784],
      tooltip: {
        valueDecimals: 0
      }
    }]
  });

Я рассмотрел различные примеры здесь и в документации, но все диаграммы - это диаграммы областей, областей или сплайнов. У меня должен быть график типа линии, иначе все станет очень скучным.

Edit: Мне было неясно, чего я пытаюсь достичь. По сути, я хочу получить такой же эффект градиента под линией, как и у диаграммы с областями, но, к сожалению, я не могу использовать диаграмму с областями, сплайнами или областями, поскольку они оба искривляют линию и делают диаграмму довольно скучной, на мой взгляд. Надеюсь, это прояснит некоторые вещи.

Спасибо всем за помощь

Answer 1

Вы можете использовать тип area при условии, что вы установили threshold: null ... Это работает даже для диапазона данных 3. Ниже приведен пример области с вашими данными.

// create the chart
  Highcharts.stockChart('container', {

    title: {
      text: 'Platinum'
    },

    xAxis: {
      gapGridLineWidth: 0
    },

  rangeSelector : {
      buttons: [
        {
        type: 'all',
        count: 1,
        text: 'All'
        }
      ],
      selected: 1,
      inputEnabled: false
  },

    series: [{
      name: 'Price',
      type: 'area',
      data: [787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 787, 787, 786, 786, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 786, 786, 787, 787, 787, 788, 787, 787, 788, 788, 787, 787, 787, 787, 787, 787, 788, 787, 787, 787, 787, 787, 787, 786, 787, 786, 786, 786, 785, 785, 785, 785, 785, 785, 785, 785, 785, 785, 786, 785, 785, 785, 785, 784, 785, 785, 784, 785, 784, 784, 784, 785, 785, 785, 785, 785, 785, 785, 784],
      gapSize: 5,
      tooltip: {
        valueDecimals: 2
      },
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, Highcharts.getOptions().colors[0]],
          [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
        ]
      },
      threshold: null
    }]
  });

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>