How do you make a bar chart clickable in Apex Chart with Vue Js ?

The answer is simple

If you visit https://apexcharts.com/docs/chart-types/bar-chart/ you will be presented with data on how to create a bar chart with Apex Charts. A typical apex chart bar chart codes look like this.

options = {   
chart: {     
type: 'bar'   
   },   
plotOptions: { 
    bar: {
       horizontal: true     } 
  },  
 series: [{
     data: [{ 
      x: 'category A',   
     y: 10   
   }, 
{ 
     x: 'category B',     
     y: 18     }, 
{  
    x: 'category C',       
     y: 13     }]
   }]
 }

In my case, I had to fetch a large amount of live data, so my codes are a little more complicated and looks like this:

chart:{
series: [{
 name: "Energy (kWh):",
 data:[...values],
}],
chartOptions: {
 chart: {
 id:'barChart',
 type: 'bar',
 height: 250,
},
xaxis: {
 categories: [...names],
 labels: {
 style: {
 fontSize: '16px' },
 },
},
title: {
 text: 'Energy (kW)',
 color:'#7f7370'
},
dataLabels: {
 enabled: true,
 offsetY: 0,
 style: {
 fontSize: '30px',
 colors: ["#d3d3d3"] }
   },
  }
},

The values in my case are are an array of values. I have used the spread operator to insert all the values in the series data and I have also used the spread operator to insert all the labels in x-axis categories. I was receiving all my data as an object and had to convert my object to an array to feed the data. The names are the x-axis labels while the values are represented by the y-axis. My chart looks something like this.

Bar chart, data coming from codes above

My task was not just to display the data but to also make it clickable so that it routes to the next data.

I achieved this by the triggering the following event inside the chart codes:

events: {
  dataPointSelection: function(event, chartContext, config) {        
  console.log(config.dataPointIndex)
  }
},

I added the events inside the codes like this:

chart:{
 series: [{
 name: "Energy (kWh):",
 data:[...values],
}],
chartOptions: {
 chart: {
 id:'barChart',
 type: 'bar',
 height: 250,
 events: {
 dataPointSelection: function(event, chartContext, config) {
 console.log(config.dataPointIndex)
  }
 },
},
xaxis: {
 categories: [...names],
 labels: {
 style: {
 fontSize: '16px'
  },
 },
},
title: {
 text: 'Energy (kW)',
 color:'#7f7370'
},
dataLabels: {
 enabled: true,
 offsetY: 0,
 style: {
 fontSize: '30px',
 colors: ["#d3d3d3"]
   }
  },
 }
},

Now when we click on the chart we can receive the index as console log and see which bar chart was clicked. So if the first bar chart is clicked we will receive a 0 because in programming all indexing starts at 0. If the next bar chart is clicked the console log will display a 1 and so on.

What I did next was turned this dataPointIndex into a variable like this:

events: {
  dataPointSelection: function(event, chartContext, config) {        
  var point = config.dataPointIndex
  }
},

And later used this in my codes to make it clickable:

<apexchart  id="barChart" type="bar" height="380" :options="this.chart.chartOptions" :series="this.chart.series"
@click="selectedBar"></apexchart>

Then while the apex chart was clicked the clicking event was triggered which in turn triggered the method that I created

selectedBar(){
 var a = this.names[point]
 this.$router.push({path:`${a}`})
 this.$router.go()
}

Altogether, everything came together and worked out. The sky will always be clear and the future of all coders will be bright everywhere.

Spread the love like a spread operator

…Love

Samanja