Styjun

How to avoid using System.String with Rfc2898DeriveBytes in C#

Can others monetize my project with GPLv3?

What is the hex versus octal timeline?

Is it appropriate for a prospective landlord to ask me for my credit report?

Why is Boris Johnson visiting only Paris & Berlin if every member of the EU needs to agree on a withdrawal deal?

What's that rattling noise from parked jets?

Why didn’t Doctor Strange stay in the original winning timeline?

Ask for a paid taxi in order to arrive as early as possible for an interview within the city

Do I have to learn /o/ or /ɔ/ separately?

Why would the US President need briefings on UFOs?

Why were movies shot on film shot at 24 frames per second?

Repetitive validation of Console inputs

Why doesn't mathematics collapse even though humans quite often make mistakes in their proofs?

Avoiding racist tropes in fantasy

How big would a Daddy Longlegs Spider need to be to kill an average Human?

Why are isotropic tensors not considered scalars?

The teacher logged me in as administrator for doing a short task, is the whole system now compromised?

Is a butterfly one or two animals?

Church Booleans

(Why) May a Beit Din refuse to bury a body in order to coerce a man into giving a divorce?

To "hit home" in German

Why doesn't the Falcon-9 first stage use three legs to land?

Why don't politicians push for fossil fuel reduction by pointing out their scarcity?

Why my earth simulation is slower than the reality?

Return value from dataPointSelection event in Apexcharts

How to implement click event or data point selection on apexCharts?VueJS - how component gets global data item?How to remove Vuejs "scope is undefined' warning?Laravel event not being BroadcastVuex: passing state property via propscomputed nested property VuejsVueJs Nested props coming through undefinedVue component data property not updating after parent data changesComponent's props return null when called upon in childVue.js with vue-chartjs - pulling data from APIVue - passing params to route as props is undefined

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

I have a question related to this question and this answer but they don't solve my question completely. I'm using vue and apexcharts and I would like to return a value or update a variable from an event. Is it possible to return something instead of printing it in the console?

Something like this:

 events: 
 dataPointSelection: function (event, chartContext, config) 
 this.active = this.series[config.seriesIndex];
 
 

The problem that I face is that "this" makes reference to the overall vue component and therefore "series" and "active" cannot be found.

Here is the code that gives me"TypeError: this.series is undefined" when I click on a point data. The series data I get from the parent component and it looks like this:

["name":"S-1","data":[[2.65,100], [6.67,100]], "name":"S-2","data":[[0,50],[2.65,50]]]

<script>
 import VueApexCharts from 'vue-apexcharts';

 export default 
 name: "myGraph",
 components: 
 apexchart: VueApexCharts,
 ,
 props: 
 series: 
 ,
 data: () => (
 active: undefined,
 chartOptions: 
 chart: 
 width: '100%',
 animations: 
 enabled: false
 ,
 events: 
 dataPointSelection: function (event, chartContext, config) 
 this.active = this.series[config.seriesIndex];
 
 
 ,
 tooltip: 
 intersect: true,
 shared: false
 ,
 markers: size: 1,
 
 ),
 
 }
</script>

The idea is that on dataPointSelection, it should activate that serie in order to access later on other information that will be store in that object.

vue.js apexcharts

share|improve this question

asked Mar 27 at 15:05

HermiHermi

1355 bronze badges

add a comment | 

2

I have a question related to this question and this answer but they don't solve my question completely. I'm using vue and apexcharts and I would like to return a value or update a variable from an event. Is it possible to return something instead of printing it in the console?

Something like this:

 events: 
 dataPointSelection: function (event, chartContext, config) 
 this.active = this.series[config.seriesIndex];
 
 

The problem that I face is that "this" makes reference to the overall vue component and therefore "series" and "active" cannot be found.

Here is the code that gives me"TypeError: this.series is undefined" when I click on a point data. The series data I get from the parent component and it looks like this:

["name":"S-1","data":[[2.65,100], [6.67,100]], "name":"S-2","data":[[0,50],[2.65,50]]]

<script>
 import VueApexCharts from 'vue-apexcharts';

 export default 
 name: "myGraph",
 components: 
 apexchart: VueApexCharts,
 ,
 props: 
 series: 
 ,
 data: () => (
 active: undefined,
 chartOptions: 
 chart: 
 width: '100%',
 animations: 
 enabled: false
 ,
 events: 
 dataPointSelection: function (event, chartContext, config) 
 this.active = this.series[config.seriesIndex];
 
 
 ,
 tooltip: 
 intersect: true,
 shared: false
 ,
 markers: size: 1,
 
 ),
 
 }
</script>

The idea is that on dataPointSelection, it should activate that serie in order to access later on other information that will be store in that object.

vue.js apexcharts

share|improve this question

asked Mar 27 at 15:05

HermiHermi

1355 bronze badges

add a comment | 

I have a question related to this question and this answer but they don't solve my question completely. I'm using vue and apexcharts and I would like to return a value or update a variable from an event. Is it possible to return something instead of printing it in the console?

Something like this:

 events: 
 dataPointSelection: function (event, chartContext, config) 
 this.active = this.series[config.seriesIndex];
 
 

The problem that I face is that "this" makes reference to the overall vue component and therefore "series" and "active" cannot be found.

Here is the code that gives me"TypeError: this.series is undefined" when I click on a point data. The series data I get from the parent component and it looks like this:

["name":"S-1","data":[[2.65,100], [6.67,100]], "name":"S-2","data":[[0,50],[2.65,50]]]

<script>
 import VueApexCharts from 'vue-apexcharts';

 export default 
 name: "myGraph",
 components: 
 apexchart: VueApexCharts,
 ,
 props: 
 series: 
 ,
 data: () => (
 active: undefined,
 chartOptions: 
 chart: 
 width: '100%',
 animations: 
 enabled: false
 ,
 events: 
 dataPointSelection: function (event, chartContext, config) 
 this.active = this.series[config.seriesIndex];
 
 
 ,
 tooltip: 
 intersect: true,
 shared: false
 ,
 markers: size: 1,
 
 ),
 
 }
</script>

The idea is that on dataPointSelection, it should activate that serie in order to access later on other information that will be store in that object.

vue.js apexcharts

share|improve this question

asked Mar 27 at 15:05

HermiHermi

1355 bronze badges

 events: 
 dataPointSelection: function (event, chartContext, config) 
 this.active = this.series[config.seriesIndex];
 
 

["name":"S-1","data":[[2.65,100], [6.67,100]], "name":"S-2","data":[[0,50],[2.65,50]]]

<script>
 import VueApexCharts from 'vue-apexcharts';

 export default 
 name: "myGraph",
 components: 
 apexchart: VueApexCharts,
 ,
 props: 
 series: 
 ,
 data: () => (
 active: undefined,
 chartOptions: 
 chart: 
 width: '100%',
 animations: 
 enabled: false
 ,
 events: 
 dataPointSelection: function (event, chartContext, config) 
 this.active = this.series[config.seriesIndex];
 
 
 ,
 tooltip: 
 intersect: true,
 shared: false
 ,
 markers: size: 1,
 
 ),
 
 }
</script>

share|improve this question

asked Mar 27 at 15:05

HermiHermi

1355 bronze badges

share|improve this question

asked Mar 27 at 15:05

HermiHermi

1355 bronze badges

asked Mar 27 at 15:05

HermiHermi

1355 bronze badges

asked Mar 27 at 15:05

HermiHermi

1355 bronze badges

1 Answer
1

active

oldest

votes

1

The easiest way is to bind the event directly in the component

<apexchart type="bar" @dataPointSelection="dataPointSelectionHandler"></apexchart>

methods: 
 dataPointSelectionHandler(e, chartContext, config) 
 console.log(chartContext, config)
 

Another way is to use ES6 arrow functions in your chart configuration

computed: 
 chartOptions: function() 
 return 
 chart: 
 events: 
 dataPointSelection: (e, chart, opts) => 
 // you can call Vue methods now as "this" will point to the Vue instance when you use ES6 arrow function
 this.VueDemoMethod();
 
 
 ,
 
 

share|improve this answer

answered Mar 27 at 18:15

junedchhipajunedchhipa

50966 silver badges1212 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55380444%2freturn-value-from-datapointselection-event-in-apexcharts%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

The easiest way is to bind the event directly in the component

<apexchart type="bar" @dataPointSelection="dataPointSelectionHandler"></apexchart>

methods: 
 dataPointSelectionHandler(e, chartContext, config) 
 console.log(chartContext, config)
 

Another way is to use ES6 arrow functions in your chart configuration

computed: 
 chartOptions: function() 
 return 
 chart: 
 events: 
 dataPointSelection: (e, chart, opts) => 
 // you can call Vue methods now as "this" will point to the Vue instance when you use ES6 arrow function
 this.VueDemoMethod();
 
 
 ,
 
 

share|improve this answer

answered Mar 27 at 18:15

junedchhipajunedchhipa

50966 silver badges1212 bronze badges

add a comment | 

1

The easiest way is to bind the event directly in the component

<apexchart type="bar" @dataPointSelection="dataPointSelectionHandler"></apexchart>

methods: 
 dataPointSelectionHandler(e, chartContext, config) 
 console.log(chartContext, config)
 

Another way is to use ES6 arrow functions in your chart configuration

computed: 
 chartOptions: function() 
 return 
 chart: 
 events: 
 dataPointSelection: (e, chart, opts) => 
 // you can call Vue methods now as "this" will point to the Vue instance when you use ES6 arrow function
 this.VueDemoMethod();
 
 
 ,
 
 

share|improve this answer

answered Mar 27 at 18:15

junedchhipajunedchhipa

50966 silver badges1212 bronze badges

add a comment | 

The easiest way is to bind the event directly in the component

<apexchart type="bar" @dataPointSelection="dataPointSelectionHandler"></apexchart>

methods: 
 dataPointSelectionHandler(e, chartContext, config) 
 console.log(chartContext, config)
 

Another way is to use ES6 arrow functions in your chart configuration

computed: 
 chartOptions: function() 
 return 
 chart: 
 events: 
 dataPointSelection: (e, chart, opts) => 
 // you can call Vue methods now as "this" will point to the Vue instance when you use ES6 arrow function
 this.VueDemoMethod();
 
 
 ,
 
 

share|improve this answer

answered Mar 27 at 18:15

junedchhipajunedchhipa

50966 silver badges1212 bronze badges

<apexchart type="bar" @dataPointSelection="dataPointSelectionHandler"></apexchart>

methods: 
 dataPointSelectionHandler(e, chartContext, config) 
 console.log(chartContext, config)
 

computed: 
 chartOptions: function() 
 return 
 chart: 
 events: 
 dataPointSelection: (e, chart, opts) => 
 // you can call Vue methods now as "this" will point to the Vue instance when you use ES6 arrow function
 this.VueDemoMethod();
 
 
 ,
 
 

share|improve this answer

answered Mar 27 at 18:15

junedchhipajunedchhipa

50966 silver badges1212 bronze badges

answered Mar 27 at 18:15

junedchhipajunedchhipa

50966 silver badges1212 bronze badges

answered Mar 27 at 18:15

junedchhipajunedchhipa

50966 silver badges1212 bronze badges