Extra parameters on click of bar

[davithkb]

Is it possible to be able to click on a part of a stacked bar chart and then be create a table/open a new page where you can see all the For example: This is a chart with the conditions (very good,good,...) of various buildings. I would like for the user to click on that part of the chart and then see a table with all the objects. For this I think we would need custom parameters we can give with JSON.

This table is custom generated with options that the user can choose using JSON. For example, they want to see all the conditions of the churches in Sittart and Geleen and compare them to each other. After the graph is generated, the user wants to see which churches in Sittart have a bad state. So he would go to the 'goed' (which means good in English) bar of Sittart , click (or double click) on it and get a table with all the bad churches.

I hope I have explained my request good enough. I've read the documentation already and couldn't find anything.

[sleleko]

Try to use that https://apexcharts.com/docs/options/chart/events/

[davithkb]

Try to use that https://apexcharts.com/docs/options/chart/events/

But how do I add hidden parameters to a bar? So I can call those parameters when a user clicks on a bar.

[sleleko]

Try to use that https://apexcharts.com/docs/options/chart/events/

But how do I add hidden parameters to a bar? So I can call those parameters when a user clicks on a bar.

What is hidden parameters you want add?

[davithkb]

Try to use that https://apexcharts.com/docs/options/chart/events/

But how do I add hidden parameters to a bar? So I can call those parameters when a user clicks on a bar.

What is hidden parameters you want add?

An sql so I can get all the items of that bar in a table when a user clicks on the bar. So he knows what specific items that bar contains you know?

[davithkb]

Try to use that https://apexcharts.com/docs/options/chart/events/

But how do I add hidden parameters to a bar? So I can call those parameters when a user clicks on a bar.

What is hidden parameters you want add?

An sql so I can get all the items of that bar in a table when a user clicks on the bar. So he knows what specific items that bar contains you know?

There are 491 good objects in the city 'Geleen' as you can see on the screenshot. But my user wants to know which objects those are. He would simply click on the bar then a table would popup with all the good objects in 'Geleen' .

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hudsonsilvaoliveira]

Well, sorry for digging this up from it's grave, but I had the exact same problem and couldn't find anything anywhere to help. In my case I had a donut chart of categories, and when I clicked in a section, I wanted to be redirected to a list filtered by that same category.

Here is what I did, if anyone else happens to stumble upon this issue.

Here is my options object:

{
      series: [200, 99, 30],
      labels: ['Label 1', 'Label 2', 'Label 3'],
      xaxis: {
        categories: [55, 77, 99]
      },
      chart: {
        type: 'donut',
        events: {
          dataPointSelection: (event: any, chartContext: any, config: any) => {
            console.log(config);
            console.log(config.w.config.series[config.dataPointIndex])
            console.log(config.w.config.labels[config.dataPointIndex])
            console.log(config.w.config.xaxis.categories[config.dataPointIndex])
          }
        }
      }
 }

I ended up using the xaxis.categories property, that's not used on a donut chart, to send data through the dataPointSelection event, and then use it however I want inside my funcion.

If the xaxis.categories property it's actually used in the chart, then I would look for another property that's not being used.

If there's no intended way of doing this, creating a custom property would be a more decent approach, but I don't know how to do it.