have option in frontend to change graph from stacked to grouped and vice versa in apexcharts

Question

I want to have options of choosing 'Stack' or 'Group' in this apex chart. By selecting any of the option, the same graph should change accordingly.

Answer 1

You will have to define 2 icons named Stacked and Grouped in the tools dictionary of toolbar. Clicking on stacked would update the options and set stacked as True while clicking on grouped would update the options and set stacked as False.

Check this code below:

options = {

    toolbar{
        tools:{
              show: true,
              download: false,
              selection: true,
              customIcons: [{
                index: 1,
                title: 'Grouped',
                class: 'custom-icon',
                icon: '<p width="50">Grouped</p>',
                click: function (chart, options, e) {
                  chart.updateOptions({ 

                    chart:{
                      stacked: false

                    },

                  },)
                  },
              },
              {
                index: 0,
                title: 'Stacked',
                class: 'custom-icon',
                icon: '<p width="50">Stacked</p>',

                click: function (chart, options, e) {
                  chart.updateOptions({ 

                    chart:{
                      stacked: true

                    },
                  },)
              },
          }],
       },
    },
}

Also a little css change in apexcharts.css here:

.apexcharts-toolbar {
  width: 150px;
}

And one last change in custom css here:

div.apexcharts-toolbar-custom-icon{
    width: 60px;
    color: white;
}

Output: https://i.sstatic.net/xyvtl.jpg