show two different stacked column data in one chart canvasjs react

Question

I want two stacked column data in one chart using canvasjs like this:

I have currently done something like this with the options: this achieves removing x axis and secondary y axis and showing two data together

{
        animationEnabled: true,
        options:{
        scales: {
            xAxes: [{ stacked:true}]
                }
        },
        axisY: {
            titleFontColor: "#4F81BC",
            lineColor: "#4F81BC",
            labelFontColor: "#4F81BC",
            tickColor: "#4F81BC",
            margin:24,
        },
        axisY2: {
            gridThickness: 0,
            tickLength: 0,
            lineThickness: 0,
            margin:24,
            labelFormatter: function(){
            return " ";
            }  
          },
        axisX:{
            gridThickness: 0,
            tickLength: 0,
            lineThickness: 0,
            margin:24,
            labelFormatter: function(){
            return " ";
            }
        },
        toolTip: {
            shared: true
        },
        legend: {
            cursor:"pointer",
        },
        data: [{
            type: "stackedColumn",
            name: "Proven Oil Reserves (bn)",
            legendText: "Proven Oil Reserves",
            showInLegend: false, 
            dataPoints:[
                { y: 30.25 },
            ]
        },
        {
            type: "stackedColumn",  
            name: "Oil Production (million/day)",
            legendText: "Oil Production",
            showInLegend: false,
            dataPoints:[
                { y: 17.46 },
    
            ]
        },
                   {
            type: "stackedColumn",  
            name: "Oil Production (million/day)",
            legendText: "Oil Production",
            axisYType:"secondary",
            margin:10,
            showInLegend: false,
            dataPoints:[
                {  y: 10.46 },
    
            ]
        },
        {
            type: "stackedColumn",  
            name: "Oil Production (million/day)",
            legendText: "Oil Production",
            axisYType:"secondary",
            margin:10,
            showInLegend: false,
            dataPoints:[
                { y: 10.46 },
    
            ]
        }
    ]
    }

it produces the result like:

what I need is to

1. give margin between two datasets
2. able to label datasets with text over them as seen in the image above

Answer 1

give margin between two datasets

There will be gap between datapoints when the x-values are different.

able to label datasets with text over them as seen in the image above

You can useindexlabels . Please refer CanvasJS Docs for more info / examples. Below is an working example.

 var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, axisX:{ gridThickness: 0, tickLength: 0, lineThickness: 0, labelFormatter: function(){ return ""; } }, axisY: { includeZero: true, tickLength: 0, lineThickness: 0, gridColor: "#ddd", labelFormatter: function(e) { return ""; } }, toolTip: { shared: true }, data: [{ type: "stackedColumn", indexLabel: "RM xyz", indexLabelFontColor: "#fff", dataPoints: [ { x: 1, y: 47, color: "#c63531" }, { x: 2, y: 32, color: "#449fc7" } ] }, { type: "stackedColumn", indexLabel: "RM xyz", indexLabelFontColor: "#fff", dataPoints:[ { x: 1, y: 32, color: "#bb8786" }, { x: 2, y: 27, color: "#74ab3e" } ] }] }); chart.render();

 <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="height: 300px; width: 100%;"></div>