How to create a bar and a line in a same graph using chart.js in React?

(Requirement: The bar has to start from the first tick(i.e label "a" below) in x axis whereas the line has to start from third tick(label "c" below)).

I have tried the following way.

import React from "react";
import Chart from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

class Barchart extends React.Component {
    //chart= null;

    componentDidMount(){
        this.configureChart();
    }

    configureChart = ()=>{
        let bardata=[7, 3, 2];
        let linedata=[ 0,0,0,75, 55, 80, 65];
        // xaxislabel=["a","b","c"]
        // xaxislabelline=["d","e","f","g"]
        const node=this.node;
        new Chart(node,{
            plugins: [ChartDataLabels],
            type:'',
            data:{
                datasets:[
                    {  
                    yAxisID:'A',
                        label: "Bar Dataset",
                        data: bardata ,
                        type: "bar",
                        backgroundColor: "#DE924B",
                        order:1
                      },

                      {

                        yAxisID:'B',
                        label: "Line Dataset 2",
                        data: linedata,
                       
                        type: "line",
                        fill: false,
                        borderColor: 'rgb(75, 192, 192)',
                        order:2
                      },
                ],
                labels:["a","b","c","d","e","f","g"]
            },
            options:{
                scales:{
                    yAxes:[
                        {   id:'A',
                            display:true,
                            ticks:{
                                beginAtZero:true
                            }
                        
                    },
                    {   id:'B',
                    display:true,
                    ticks:{
                        beginAtZero:true
                    }
                
            }
                    ],
                    xAxes:[
                        { id:'C',
                            display: true,
                            barThickness: 25,
                            ticks: {
                              beginAtZero: true,
                            }
                        
                    },
                    { id:'D',
                    display: true,
                
                    ticks: {
                        beginAtZero:true,
                        min:'c',

                        }
                    }
                
            },

                    ]
                }
            }
        })

    }

    render(){
        return(
            <div>
            <canvas
              style={{ width: 650, height: 165 }}
              ref={node => (this.node = node)}
            />
          </div>
        );
    }

      }
      

export default Barchart;

Below is the attached result I got.

I am not sure how to have the line graph start from label "c" of the main label(or have single label for both graphs).