I have implemented a bar chart similar to the image shown. The chart consists of two stacks grouped together, each stack containing multiple datasets. This implementation involves the use of Vue.js and vue-chartjs.
https://i.sstatic.net/OOex2.jpg
For handling click events on the chart, I am utilizing the onClick option provided by Chart.js. The e parameter represents the event object, and i contains an array of datasets used in the chart. By accessing the index of a dataset, we can determine which group was clicked. However, identifying which specific stack within the group was clicked remains a requirement.
onClick: (e, i ) => {
console.log(i[0]._index)
}
The data utilized for generating the chart includes:
this.datacollection = {
labels: [...Object.keys(total)],
datasets: [
{
label: 'Started',
stack: 'Stack 0',
backgroundColor: 'rgb(112,108,236,0.2)',
borderColor: 'rgb(112,108,236,0.3)',
borderWidth: 5,
data: Object.values(active)
},
{
label: 'Assigned (all)',
stack: 'Stack 0',
backgroundColor: 'rgb(137,37,252 , 0.2)',
borderColor: 'rgb(137,37,252 , 0.2)',
borderWidth: 5,
data: Object.values(total),
},
// Additional dataset configurations...
]
}
Chart options include:
{
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
stacked: true
}
],
yAxes: [
{
ticks: {
beginAtZero: true
},
stacked: false
}
]
},
onClick: (e, i) => { console.log(i[0]._index) }
}
If you require further details or wish to view the complete code sample, refer to the specified files:
test.vue:<template>
<div>
<bar-chart :chart-data="datacollection" :options="options"></bar-chart>
</div>
</template>
// Code block for test.vue...
BarChart.js:
import { Bar , mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['chartData' , 'options'],
mounted () {
if (this.chartdata)
this.renderChart(this.chartdata)
}
}