question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to access or get value of specific graph on chart plot by click event?

See original GitHub issue

I used vue-chartjs for drawing some chart like line, bar, …

In my project, there are many cases using specific value or lable of data in chart. Using tooltip option of vue-chartjs, I can check that value or label of data item when hovered.

I want to know how to access or get information of specific data matched with point or bar in graph when clicked(not hovered). Here is my code about chart options.

chartOptions: { responsive: false, onClick: function(evt){ //Some logic to get value of label of specific data...(type, label, value, ...) }

Environment

  • vue.js version: 2.5.2
  • vue-chart.js version: 3.3.2
  • npm version: 5.6.0

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

9reactions
gabrielcabolacommented, Nov 27, 2018

onClick: function (evt, item) { var label = item[0][‘_model’].label }

4reactions
pranavkumar389commented, Dec 8, 2019

onClick: function (evt, item) { var label = item[0][‘_model’].label }

This is for the first dataset, as only the 0th index is considered. How to tackle this problem for chart having multiple datasets?

Read more comments on GitHub >

github_iconTop Results From Across the Web

vue.js - How to access or get value of specific graph on chart ...
This solution use the getElementAtEvent method of chartjs, but to use that you need reference to the Chart itself, not the Vue component....
Read more >
How to access or get value of specific graph on chart plot by ...
This solution use the getElementAtEvent method of chartjs, but to use that you need reference to the Chart itself, not the Vue component....
Read more >
How to Display Clicked Data Points in the Table in Chart JS
Got a question or special request about a specific item? ... WHAT Our goal is to help YOU learn how to draw charts...
Read more >
Click events in JavaScript - Plotly
Detailed examples of Click Events including changing color, size, log axes, and more in JavaScript.
Read more >
Data plot click mouse event - FusionCharts
Click on a column plot to trigger data plot click event.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found