How to access or get value of specific graph on chart plot by click event?
See original GitHub issueI 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:
- Created 5 years ago
- Comments:7 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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?