<template>
  <div>
    <div class="chart-box">
      <div id="chart-candlestick">
        <apexchart
          type="candlestick"
          height="290"
          :options="chartOptions"
          :series="series"
        ></apexchart>
      </div>
      <div id="chart-bar">
        <apexchart
          type="bar"
          height="160"
          :options="chartOptionsBar"
          :series="seriesBar"
        ></apexchart>
      </div>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

// This demo also loads: https://apexcharts.com/samples/assets/ohlc.js

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          data: seriesData,
        },
      ],
      chartOptions: {
        chart: {
          type: 'candlestick',
          height: 290,
          id: 'candles',
          toolbar: {
            autoSelected: 'pan',
            show: false,
          },
          zoom: {
            enabled: false,
          },
        },
        plotOptions: {
          candlestick: {
            colors: {
              upward: '#26A69A',
              downward: '#EF5350',
            },
          },
        },
        xaxis: {
          type: 'datetime',
        },
      },
      seriesBar: [
        {
          name: 'Monthly Change',
          data: seriesDataLinear,
        },
      ],
      chartOptionsBar: {
        chart: {
          height: 160,
          type: 'bar',
          brush: {
            enabled: true,
            target: 'candles',
          },
          selection: {
            enabled: true,
            xaxis: {
              min: new Date('20 Jan 2017').getTime(),
              max: new Date('10 Dec 2017').getTime(),
            },
            fill: {
              color: '#ccc',
              opacity: 0.4,
            },
            stroke: {
              color: '#0D47A1',
            },
          },
        },
        dataLabels: {
          enabled: false,
        },
        plotOptions: {
          bar: {
            columnWidth: '80%',
            colors: {
              ranges: [
                {
                  from: -1000,
                  to: 0,
                  color: '#F15B46',
                },
                {
                  from: 1,
                  to: 10000,
                  color: '#FEB019',
                },
              ],
            },
          },
        },
        stroke: {
          width: 0,
        },
        xaxis: {
          type: 'datetime',
          axisBorder: {
            offsetX: 13,
          },
        },
        yaxis: {
          labels: {
            show: false,
          },
        },
      },
    }
  },
}
</script>

<style>
.chart-box {
  max-width: 650px;
  margin: 35px auto;
}
#chart-candlestick,
#chart-bar {
  max-width: 640px;
}

#chart-bar {
  margin-top: -30px;
}
</style>