superman66 / vue-highcharts Goto Github PK

I think there is a problem here:
this.chart = new _Highcharts.Chart(this.$el, this.options);(VueHighcharts.vue line 56)
for that Highstock use stockChart instead of Chart.
With this, the output is pure highstock even if Highstock class is passed in.

I'm trying to create a "xrange" graph and I am getting an error of missing module.
So I'm trying to use the Highcharts-More and I am still getting errors no matter how I am trying to use it.

I tried to do like in the demo and still doesn't work.
<vuecharts :options="chartOptions" :highcharts="Highcharts" ref="chart"></vuecharts>

import Highcharts from 'highcharts'
import { Chart } from 'highcharts-vue'

import More from 'highcharts/highcharts-more'
More(Highcharts)

components: {
      vuecharts: Chart
 },

Any suggestions???
Any guide to how to do it?

Is there a way to select a highmaps element programatically. According to the higcharts docs I should call point.setState("select"). However setState() seems not to be part of vue-highcharts.

Please correct me if I am wrong but I am trying to use some of Highcharts methods such as update() but I receive an error message that it is undefined. I'm also unable to access the series property (I want to use setData()).

I've tried addSeries() and it works. It seems like VueHighcharts.vue contains a small # of the methods listed in Highcharts API. If I need to use these methods, what is the best way for me to do so? Should I update my VueHighcharts.vue file?

Thank you.

如下配置

lineCharts.addSeries({
          type: 'macd',
          yAxis: 2,
          linkedTo: 'data_list',
          color: 'green',
          lineColor: 'green',
          upColor: 'red',
          upLineColor: 'red',
          animation: {duration: 0}
        })

设置完之后不生效

Hello,

I am recieving error #17. Im not sure if this is normal.
I have double checked the dependancies listed here:

How can this be fixed?

<template>
  <div class="hello">
    <!-- <h1>{{ msg }}</h1> -->
    <div class="row">
      <div class="col-md-12">
        <gmap-map style="width: 100%; height: 450px;"
            :center="{lat: 41.8781, lng: -87.629798}"
            :zoom="12" :map-type-id="roadmap" :options="{styles: mapStyles}"
        >

        </gmap-map>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
          <vue-highcharts :options="heatmapOptions" ref="heatmapChart"></vue-highcharts>
      </div>
    </div>
  </div>
</template>

<script>
import * as VueGoogleMaps from 'vue2-google-maps'
import VueHighcharts from 'vue2-highcharts'
import Highcharts from 'highcharts'
import Heatmap from '../../node_modules/highcharts/modules/heatmap.js'
import Exporting from '../../node_modules/highcharts/modules/exporting.js'
import Data from '../../node_modules/highcharts/modules/data.js'
import BoostCanvas from '../../node_modules/highcharts/modules/boost-canvas.js'
import Boost from '../../node_modules/highcharts/modules/boost.js'


import axios from 'axios';

Heatmap(Highcharts)
Exporting(Highcharts)
Data(Highcharts)
BoostCanvas(Highcharts)
Boost(Highcharts)

import Vue from 'vue';

  Vue.use(VueGoogleMaps, {
    load: {
      key: 'AIzaSyAeRd_fOOHn4GCQSeVhgm7ioUjXypqj2C8',
      // libraries: 'places', //// If you need to use place input
    }
  })

export default {
  components: {
            VueHighcharts
        },
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      heatMapData: {}
    }
  },
  created() {
    axios.get('https://api.myjson.com/bins/riv3h')
    .then(function(response) {
      console.log(response)
      Vue.heatMapData = response.data
    })
    .catch(function(err) {
      console.error(err)
    })
  },
  computed: { 
    mapStyles() {
      return [{
          stylers: [{
            hue: '#890000'
          }, {
            visibility: 'on'
          }, {
            gamma: 0.5
          }, {
            weight: 0.5
          }]
        }, {
          elementType: 'labels',
          stylers: [{
            visibility: 'off'
          }]
        }, {
          featureType: 'water',
          stylers: [{
            color: '#890000'
          }]
        }];
    },
    heatmapOptions() {
     return { 
       data: {
        json: this.heatMapData
    },

    chart: {
        type: 'heatmap',
        margin: [60, 10, 80, 50]
    },

    boost: {
        useGPUTranslations: true
    },

    title: {
        text: 'Highcharts heat map',
        align: 'left',
        x: 40
    },

    subtitle: {
        text: 'Temperature variation by day and hour through 2013',
        align: 'left',
        x: 40
    },

    xAxis: {
        type: 'datetime',
        min: Date.UTC(2013, 0, 1),
        max: Date.UTC(2014, 0, 1),
        labels: {
            align: 'left',
            x: 5,
            y: 14,
            format: '{value:%B}' // long month
        },
        showLastLabel: false,
        tickLength: 16
    },

    yAxis: {
        title: {
            text: null
        },
        labels: {
            format: '{value}:00'
        },
        minPadding: 0,
        maxPadding: 0,
        startOnTick: false,
        endOnTick: false,
        tickPositions: [0, 6, 12, 18, 24],
        tickWidth: 1,
        min: 0,
        max: 23,
        reversed: true
    },

    colorAxis: {
        stops: [
            [0, '#3060cf'],
            [0.5, '#fffbbc'],
            [0.9, '#c4463a'],
            [1, '#c4463a']
        ],
        min: -15,
        max: 25,
        startOnTick: false,
        endOnTick: false,
        labels: {
            format: '{value}℃'
        }
    },

    series: [{
        boostThreshold: 100,
        borderWidth: 0,
        nullColor: '#EFEFEF',
        colsize: 24 * 36e5, // one day
        tooltip: {
            headerFormat: 'Temperature<br/>',
            pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
        },
        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
      }]
    }
    } 
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Hi,
I have this in my imports:

I'm missing something ?

thanks!

Hi there!

Firstly, wow! Thank you for this package, seriously! I'm in the process of removing dependencies that are outside of Vue so I can wire up unit tests (easier/cleaner).

On to the problem. As the title suggests I've ran into an issue where I cannot seem to get drilldown wired up.

This shows the data that I've got - showing the data is cool.
http://jsfiddle.net/gv1aeuuq/

I've followed the docs with setting things up but no drilldown.

import VueHighcharts from 'vue2-highcharts'
import Drilldown from '../../node_modules/highcharts/modules/Drilldown.js'
import Highcharts from 'highcharts'
Drilldown(Highcharts)

I've also tried (transpiles just fine on latest vue/webpack):

import VueHighcharts from 'vue2-highcharts'
import Drilldown from 'highcharts/modules/Drilldown.js'
import Highcharts from 'highcharts'
Drilldown(Highcharts)

And this is what's up in the <template> block:
<vue-highcharts :Highcharts="Highcharts" :options="options" ref="demoInventory"></vue-highcharts>

And I've tried:
<vue-highcharts :options="options" ref="demoInventory"></vue-highcharts>

The chart will render, labels are present but clicking on a wedge there's no drilldown.

vue-highcharts version "^1.1.9"
vue version "^2.5.2"

in README.md Document
props classes needs to be changed to 'classname'

reference on code 'VueHighcharts.vue'

How can I create a funnel chart?

In an attempt to eliminate the round corners, shadows, margins, paddings, etc. I did this that worked in development mode:

file: custom.css:

.vue-highcharts {
width: 100%;
display: inline-block;
margin: 0;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0 0 0px rgba(0, 0, 0, 0);
padding: 0px;
background: #fff;
}
result:

but build mode still resulting in this:

which are best practices to style the highcharts-class ?

https://api.hcharts.cn/highcharts#noData

If the data is empty, how to set the prompt content?

How can I apply global highcharts methods? For example, I'd like to set the thousands separator to comma, which in the Highcharts documentation is done by doing this (http://jsfiddle.net/highcharts/eeDnv/):

Highcharts.setOptions({
    lang: {
        decimalPoint: '.',
        thousandsSep: ','
    },
});

I've tried this.$refs.highchart.delegateMethod('setOptions')... but that gives an error (can't apply undefined). I've also tried this.$refs.highchart.chart.setOptions()... but that also gives an error that setOptions is not a function.

I've been looking for information on how to include highcharts-more.js. I've added the following but still get a highcharts error (#17) in the console.

import VueHighcharts from 'vue2-highcharts';
import loadHighchartsMore from 'highcharts/highcharts-more';
import Highcharts from 'highcharts'

loadHighchartsMore(Highcharts)

Vue.use(VueHighcharts, { Highcharts });

Any suggestions on how to resolve this?

Thanks

Hello i try to include export-data.js but not work.

How can i use it?

When using the component with Highmaps, the scroll functionality is not working properly, no matter which options you feed it (following the official Highcharts API of course).
After a little digging, I've found the problem to be in VueHighcharts.vue in the init() functions.
Suggested fix: If you try and initiate a map, use ' new _Highcharts.mapChart(this.$el, this.options) ' inside init().

I have no issues with installing and using it within my Laravel project. How do we load modules in though? I'm trying to get the drilldown module working with this but have had no luck.

How do I change the data of a series? I am able to remove series using the removeSeries() function but am unable to add series with data back.

Is there a way to use Indicators? I am able to import the scripts, but I can not use addSeries() to pass the data. The ema settings are beeing ignored.

this.$refs.stockOptions.addSeries( { id: 'aapl', name: 'AAPL Stock Price', data: data }, { type: 'ema', linkedTo: 'aapl' } );

Can I pass the argumets some other way?

Source: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/indicators/ema

Thank you

Hey,

I was trying to use this plugin with Nuxt.js and had no luck so far even with <no-ssr> option.

Can you please check the issue?

Thanks in advance

I want to redraw the high-charts on click of button

Error:

http://www.iamsuperman.cn/vue-highcharts/demo/bundle.js 404 (Not Found)

When the chart is rendered, it use a default border style that is not compatible with a lot of style guide lines. I had to use this to override the default styles:
.vue-highcharts { border: 0px; border-radius: 0px; box-shadow: 0 0 0; margin: 0px; }

As we would like to use this awesome lib in one of our projects we wonder whether you could add a license to this project? You know, legal departments and their complaints...

How can I use the data defined in the tooltip propertys in highchartoptions

https://codesandbox.io/s/z3m290vpxl

Hi,

Sorry for my ignorance but how do I disable useUTC in global options using this component?

I'm looking forward for your response.
Thanks,

假设我有个饼图，外围宽高都是150px，应该如何修改呢？目前class 为vue-highcharts 生成的宽高好大

After installation with npm I'm not seeing a dist folder being generated.

This is making it so that I can't resolve vue2-highcharts

The error is:

This dependency was not found:

* vue2-highcharts in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/ChartWidget.vue

To install it, you can run: npm install --save vue2-highcharts

I have old project that works. So thinking that this is version problem, I tried "vue2-highcharts": "1.1.19" in package.json and that works!

Must be latest version problem.

Hi, when I go to this page, the chart looks fine, but when reload the page, the chart width is offset from parent too much. Only happen in Safari

Greetings!

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

Hi again,
I try to load module like Exporting or Maps but it's not working.

import Exporting from 'highcharts/modules/exporting' import Drilldown from 'highcharts/modules/drilldown' import Highcharts from 'highcharts' // Load Drilldown module Drilldown(Highcharts); // Load Exporting module Exporting(Highcharts);

On my project, i need to create Highcharts, Highmaps graphs.
I try the same things on your projet vue-nuxt-demo and got the same problem to load modules.
The import works but not the loading.

How can i do this ?
Maybe you can add some example to do this ?

Thanks a lot for your answer :)

Do you have plans in the future on minimizing the filesize for this? As of now it quite large, would be great if one could use specific imports on which chart you wanted to use?

Like import {Chart} from 'vue2-highcharts';

I know that drill down is working because it works if I set directly in myOptions inside template

<template>
      <vue-highcharts :highcharts="Highcharts" :options="myOptions" ref="vueHighcharts"/>
</template>```

// in script
data() {
    return {
      // ...
      myOptions: {
          // ...
      }
   }
}

However, I want to set drill down dynamically by setting myOptions and mergeOption. And this does not work!

this.myOptions.drilldown.series = this.chartData.drilldown.series;
this.hichart.mergeOption(this.options);

Any guide how to do this?

Thanks in advance
Haris

Can this draw wind-rose chart

Hello, can we get a tooltip hover event, so when the tooltip appears or moves the event gets fired?

Thanks!

I'm trying to use annotations and it doesn't seems to work properly.

I'm loading the module like this:

import Annotation from '../../node_modules/highcharts/modules/annotations.js'
Annotation(Highcharts)

And after that adding some data throught the options:

annotations: [{ labels: [{ point: { x: 5.5, y: 30, xAxis: 0, yAxis: 0 }, text: 'Label' }, { point: { x: 18, xAxis: 0, y: 90, yAxis: 0 }, text: 'Aaaaaaa' }], labelOptions: { backgroundColor: 'rgba(255, 255, 255, 0.5)', borderColor: 'silver' } }],

But when the graph loads, it doesn't show any annotations, just a string "[object Object]" on the top-left corner (as shown in the link).

https://imgur.com/a/Kbs6R

I also tried to add highchartMore module but still not working.

It looks like the versions of Vue and HighCharts are locked to this:

  "dependencies": {
    "highcharts": "^5.0.7",
    "vue": "^2.1.0"
  },

Is this correct, if yes - how do I use different/newest versions?

Hi,

I'm trying to create dynamic chart. I've set up a periodic timer outside the option-configuration for the chart (so that I can destroy it later.)

The timer function is using axios to poll for data, and all that is working fine. I'm trying to call addPoint though, and am getting an error:

TypeError: p.splice is not a function

The code I'm using for addPoint is:

let highCharts = this.$refs.liveChart
highCharts.getChart().series[0].addPoint([result.data.b_v.x, result.data.b_v.y], true, true)

result.data.b_v.x. and .y do have the correct x and y values.

I also was looking to use your delegateMethod for this, but couldn't figure out how to set that up.

Any suggestions?

How I can use native Highchart method for xAxis - setCategories?
I've tried using delegateMethod, but it is not work.
Thanks.

Hi.

I've installed vue-highcharts just adding <script src="/static/js/vue-highcharts/dist/vue-highcharts.js"></script> to my html file, however I get many errors like webpack_require.

Check here: https://snag.gy/s9Xw4A.jpg

Is it normal? Why does it happen?

Also is there a documentation/guide on how to use this package with axios to plot some data I have in my database?

Thanks

when I have a chart with series and want to remove the actual series to put another one, I need to remove the actual series (like: http://jsfiddle.net/ux0f6vg8/).

I'm new in Vue. I'm not sure whether I can use vue2-highcharts with the meteogram as I cannot import the adjusted js file meteogram.