Vue-chartjs draw multiple line graph - vue.js

Question

I am trying to draw line chart. I have data set in form
{
line_1:{
rt:[1,2,3,4,5,6],
int:[2,3,4,5,6,7]
},
line_2:{
rt:[1,2,3,4,5,6],
int:[2,3,4,5,6,7]
}
}
What I have tried:
showChart(){
this.renderChart({
labels: this.data.line_1.rt,
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: his.data.line_1.intensity,
}
]
}, {responsive: true, maintainAspectRatio: false})
}
Now I want "rt" to be at x axis and intensity array of every line is different. I am able to draw a single line but not able to draw multiple.
Here is how my chart component looks like:
<script>
let VueChartJs = require('vue-chartjs');
export default VueChartJs.Line.extend({
props:['data', 'status'],
watch: {
// whenever question changes, this function will run
status: function (newStatus) {
if(newStatus === true){
this.showChart();
}
}
},
methods :{
showChart(){
console.log(this.data);
this.renderChart({
labels: this.data.groups[0]['peaks'][0].eic.rt,
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: this.data.groups[0]['peaks'][0].eic.intensity
}
]
}, {responsive: true, maintainAspectRatio: false})
}
},
mounted () {
}
})
</script>

Answer 1

For multiple lines, you have to add multiple datasets ;)
datasets: [
{
label: 'Line One',
backgroundColor: '#f87979',
data: this.data.groups[0]['peaks'][0].eic.intensity
},
{
label: 'Line two',
backgroundColor: '#f87979',
data: this.data.groups[0]['peaks'][0].eic.intensity
}
]