vue-highcharts | : bar_chart : Highcharts component for Vue | Chart library
kandi X-RAY | vue-highcharts Summary
kandi X-RAY | vue-highcharts Summary
:bar_chart: Highcharts component for Vue
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of vue-highcharts
vue-highcharts Key Features
vue-highcharts Examples and Code Snippets
Community Discussions
Trending Discussions on vue-highcharts
QUESTION
I've created a donut chart using vue-highcharts/highcharts, and am trying to append text on mouseover to the center of the donut. I've got it appending static text, however I'm trying to return the data from the point I hover over, to display that in the center, however I can't seem to find any relevant data from within the event object. Does anyone know how I might be able to access that data?
...ANSWER
Answered 2020-Nov-13 at 10:17Use point.events
and a basic function instead of the arrow one.
QUESTION
I have a highmaps 'chart' and the only thing that I want is to redraw the whole map inside an external function. Let me explain better. The map draws itself immediatly when the page loads up but I fetch some data from an external service and set it to a variable. Then I would like to just redraw the chart so that the new data appears in the map itself. Below is my code.
...ANSWER
Answered 2018-Mar-26 at 07:31After a few days without any answer I found some marginal help online and came to a pretty satisfying conclusion on this problem so I hope it can help someone else.
So the first thing I did was to understand how created
and mounted
were different in Vue.js. I used the keyword created
at first when working on this project. Because of that, inside this function, I placed my ajax call that gave me data which I then loaded inside the 'chart' by using the .addSeries
method of the chart itself.
To reference the chart itself I used this: let chart: this.$refs.highcharts.chart
. This searches for the field refs
in any of your components/html elements and links it to the variable. So in the html there was something like this:
QUESTION
I'm using vue2-highcharts to build a pie chart. In my component, which contains the HighCharts chart, there is a Boolean variable named showOverlay
. I'm trying to change the showOverlay
value when a HighCharts click
event occurs.
The component code is:
...ANSWER
Answered 2018-Aug-09 at 22:25Inside your component's data, changing pieOptions.plotOptions.series.point.events.click
to an arrow-function would provide the Vue instance as this
inside the handler. The HighCharts series point (previously this
in your click
-handler) is stored in the event argument as point
, so your pieOptions
Vue data should look something like this:
QUESTION
I am trying to use vue-highcharts
with moment.js
.
ANSWER
Answered 2018-Jul-24 at 12:08Highcharts checks whether the moment.js
library is available on window
scope, and that's why you need to add it there. First, you need to import two modules:
QUESTION
I have a highchart in a html file which works fine. When I moved that to vue.js project it does not work. the code in html file is as below
...ANSWER
Answered 2018-Jul-20 at 17:10You can not directly access series
array of Vue wrapper for Highcharts. To access internal Highcharts object call getChart
method:
QUESTION
I have a Vue application that is using highchart with the vue-highcart component to plot maps.
I need to plot points on this maps based on the Latitude and Longitude and, according to Highmaps documentation, I have to use the Proj4js.
In plain old javascript I would simply use a
ANSWER
Answered 2018-May-01 at 14:17I ran into this myself just recently. If you did manage to resolve this yourself already, then I'll at least leave this here as a quick answer to others running into this.
There doesn't seem to be documentation from Highsoft on this particular part, yet. I should probably file a docs issue with them.
Here's how I was able to resolve it in a React project I'm on.
Step 1: Create a wrapper import for proj4 that puts it on `window`I made a separate "import wrapper" which, when I import it from anything that requires proj4 (which is just Highcharts) it imports the real proj4 from node_modules
and sticks it on window
as window.proj4
. This is what Highmaps looks for when it's trying to find proj4.
For the sake of example, pretend this file is in @/maps/lib/proj4.js
.
QUESTION
First of all let me introduce you to my project. I am desining a web application that will show some data about devices scattered around a country. To create this I used Vue.js and HighCharts (HighMaps for the map part). This is the result I have achieved now.
What I want to add now is the possibility for the end-user to click on a marked region and show all of the devices in that region. To do that I need the region's "ID", called code in HighMaps, to send a ajax request to my db and I would also like to make this new "div" a component so that I can use it freely in my application. I'll put a sketch image of what I mean (excuse me for my really bad paint skills :D):
The black lines are not important, what I would like to achieve is to show a new component besides the map (or wherever really). Next is my current code, I am using the one page, one component style so both template and script tags are in the same file and I omitted in the script tag all the unecessary things. Right now I just set up a div with curly brackets to update a variable on change, just to debug more easily. My main problem is that, in the plotOptions.series.point.events.click when I try to reference the this.foo variable it doesn't set it since the div doesn't update. I think that might be a scope issue but I wouldn't know where to start looking.
...ANSWER
Answered 2018-Mar-14 at 14:42https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.)
The this
you were accessing did not belong to the Vue instance. You can use an arrow function () => {/*function body*/}
to inherit the this
of the Vue instance.
An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target.
EDIT: For the added question of how do I do I get the Vue instance, and the object instance at the same time you can use a closure.
QUESTION
I'm kinda new to Vue.js but today I am trying to setup some sort of map to show data. I ended up picking Highmaps since it seemd like the best alternative of the bunch and also because I already used it (Highcharts) for other projects.
Now the problem arises because I am developing a component driven webapp but I want to import maps from Highmaps. Since they just use CDN paths I don't really know how to implement them by using the import statement. Below is some code to make you understand better.
ANSWER
Answered 2018-Mar-09 at 16:01I can see in the image you have an error:
Uncaught ReferenceError, HighCharts is not defined at ...
This is because, whenever you import a library for Vue, you should provide it as a component.
So, you have to add this:
QUESTION
I am trying to use mixitup on vue.js but every time mixitup target showing 0 elements in container.(mixer.getStatu().totalShow
)
Here my full vue.js component code
...ANSWER
Answered 2018-Feb-20 at 18:48Your setup is definitely a bit more complicated, but I setup an example repo just to make sure Vue.js and MixItUp could work well together since I also need to use them together.
https://github.com/jordanboston/mixitup-vue-example
This is just a basic example taken from the Kunk Labs site. I'm using the npm i -S mixitup
option and it is working well, at least for a basic example like this one.
Hope this could be of some help.
QUESTION
these few weeks Im working on a vue-cli project and I am trying to make a polar chart like this: https://www.highcharts.com/demo/polar-spider
As this chart required highchart-more file, so I install and import the highcharts and highchart-more library using npm. However After importing both file, i got the following error in my chrome console and the highchart cannot be load. Error
...ANSWER
Answered 2017-May-05 at 11:13Finally found an answer:
Edit main.js file like this:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install vue-highcharts
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page