superman66 / vue-highcharts

The Component of Vue 2.x for highcharts
https://codesandbox.io/s/jjyqvv0k13
MIT License
115 stars 48 forks source link

What is correct way to setup HighStock #43

Closed PavelSmertin closed 5 years ago

PavelSmertin commented 6 years ago

im trying like this

 import Highcharts from 'highcharts'
 import StockInit from 'highcharts/modules/stock'

and init it in mounted section

mounted () {
      StockInit(Highcharts)
}

there is my options

        testOptions:  {
          rangeSelector: {
            selected: 1
          },

          title: {
              text: 'AAPL Stock Price'
          },

          series: [{
              name: 'AAPL',
              data: [
              [1416182400000, 7.204, 7.232, 7.037, 7.072, 889594.5],
              [1416268800000, 7.058, 7.107, 6.933, 6.968, 930296.44],
              [1416355200000, 6.961, 7.003, 6.92, 6.982, 591656.75],
              [1416441600000, 6.947, 7.024, 6.891, 6.982, 683544.62],
              [1416528000000, 6.975, 7.141, 6.891, 7.1, 1146732],
              [1416787200000, 6.968, 7.204, 6.905, 7.086, 2227368.5],
              [1416873600000, 7.065, 7.253, 7.024, 7.225, 1567802.62],
              [1416960000000, 7.232, 7.495, 7.183, 7.385, 2184918.75],
              [1417046400000, 7.482, 7.593, 7.322, 7.454, 2103856.75],
              [1417132800000, 7.426, 8.239, 7.364, 8.239, 4844839.5],
              [1417392000000, 8.35, 8.655, 8.037, 8.065, 4465213.5],
              [1417478400000, 8.03, 8.905, 7.989, 8.711, 3490411.5],
              [1417564800000, 8.711, 9.245, 8.426, 8.697, 3997530],
              [1417651200000, 8.725, 9.301, 8.558, 9.295, 3450180.75],
              [1417737600000, 9.357, 10.176, 8.989, 9.69, 4413697],
              [1417996800000, 9.468, 10.364, 9.322, 10.176, 3928342.5],
              [1418083200000, 9.989, 10.385, 9.12, 9.12, 4045420],
              [1418169600000, 9.045, 9.572, 8.641, 9.454, 3527844.25],
              [1418256000000, 9.19, 9.725, 9.107, 9.266, 2237995.75],
              [1418342400000, 9.253, 9.461, 9.1, 9.28, 1643909.12],
              [1418601600000, 9.149, 9.149, 8.815, 9.03, 1800936.62],
              [1418688000000, 8.975, 9.593, 8.933, 9.593, 2469073],
              [1418774400000, 9.6, 10.482, 9.461, 10.266, 4400166],
              [1418860800000, 10.301, 10.399, 9.739, 9.94, 2470251],
              [1418947200000, 9.891, 10.149, 9.628, 10.016, 1935405.88],
              [1419206400000, 9.947, 10.822, 9.885, 10.253, 3467391.25],
              [1419292800000, 10.01, 10.211, 9.67, 9.843, 1797850.75],
              [1419379200000, 9.836, 9.912, 9.1, 9.37, 2010271],
              [1419465600000, 9.565, 9.843, 9.35, 9.801, 1997275.88],
              ],
              tooltip: {
                  valueDecimals: 2
              }
          }]
        },

but chart looks like ordinary lineChart

IsmailMouh commented 6 years ago

Same problem for Exporting module

superman66 commented 6 years ago

https://codesandbox.io/s/jjyqvv0k13 @IsmailMouh @pashtetbezd you can see this demo

Rodimusbot commented 5 years ago

Sandbox ThreeDChart(3D Column Chart) shows 2D chart for me. Same goes when I'm testing it on localhost.

And in the same time here https://superman66.github.io/vue-highcharts/#/ThreeDChart it works as it should - 3D columns. What can be wrong - why results differ?

Rodimusbot commented 5 years ago

So in order to make 3D column chart and POLAR chart working I had to do next modifications to the code

<template>
<vue-highcharts :highcharts="HighCharstObj" :options="options"></vue-highcharts>
</template>

and

computed: {
      HighCharstObj() {
          return Highcharts;
      },
  },

Everything else is like in examples.

superman66 commented 5 years ago

@Rodimusbot you should pass instance of Highchars.

<vue-highcharts :options="options" :highcharts="Highcharts" ></vue-highcharts>

I update the demo, you can see demo on codesanbox for more details.

Rodimusbot commented 5 years ago

Works like a charm. Thanks! By the way - LargeHeatMap also needs update.