Vue-chartjs draw multiple line graph

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
  }
]