How to reverse graph in CanvasJS

Question

i have a code that should reverse the CanvasJS graph , But when i give reversed : true for x-axis nothing changes.

Can anybody help me with this

<?php
 
 $dataPoints1 = array(
     array("label"=> "2006", "y"=> 3289)
 );
  
 $dataPoints2 = array(
     array("label"=> "2006", "y"=> 1827)
 );
  
 $dataPoints3 = array(
     array("label"=> "2006", "y"=> 355)
 );
  
 $dataPoints4 = array(
     array("label"=> "2006", "y"=> 80)
 );
  
 $dataPoints5 = array(
     array("label"=> "2006", "y"=> 1)
 );
  
 $dataPoints6 = array(
     array("label"=> "2006", "y"=> 1108)
 );
  
 ?>
 <script>
 window.onload = function () {
  
 var chart = new CanvasJS.Chart("chartContainer", {
     theme: "light2",
     animationEnabled: true,
     toolTip:{
         shared: true,
         reversed: true
    },
    axisX:{
        gridThickness: 0,
        tickLength: 0,
        lineThickness: 0,
        labelFormatter: function(){
        return " ";
        },
        reversed:true
    },
    axisY:{
        gridThickness: 0,
        tickLength: 0,
        lineThickness: 0,
        labelFormatter: function(){
        return " ";
        },
        includeZero: true
    },
    legend: {
         cursor: "pointer",
         itemclick: toggleDataSeries
     },
     data: [
         {
             type: "stackedColumn",
             name: "Europe",
             showInLegend: true,
             yValueFormatString: "#,##0 MW",
             dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
         },{
             type: "stackedColumn",
             name: "Asia-Pacific",
             showInLegend: true,
             yValueFormatString: "#,##0 MW",
             dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
         },{
             type: "stackedColumn",
             name: "Americas",
             showInLegend: true,
             yValueFormatString: "#,##0 MW",
             dataPoints: <?php echo json_encode($dataPoints3, JSON_NUMERIC_CHECK); ?>
         },{
             type: "stackedColumn",
             name: "China",
             showInLegend: true,
             yValueFormatString: "#,##0 MW",
             dataPoints: <?php echo json_encode($dataPoints4, JSON_NUMERIC_CHECK); ?>
         },{
             type: "stackedColumn",
             name: "Middle East and Africa",
             showInLegend: true,
             yValueFormatString: "#,##0 MW",
             dataPoints: <?php echo json_encode($dataPoints5, JSON_NUMERIC_CHECK); ?>
         },{
             type: "stackedColumn",
             name: "Rest of the world",
             showInLegend: true,
             yValueFormatString: "#,##0 MW",
             dataPoints: <?php echo json_encode($dataPoints6, JSON_NUMERIC_CHECK); ?>
         }
     ]
 });
  
 chart.render();
  
 function toggleDataSeries(e) {
     if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
         e.dataSeries.visible = false;
     } else {
         e.dataSeries.visible = true;
     }
     e.chart.render();
 }
  
 }
 </script>

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

And the output am getting is Output am Getting

Output needed

So the main problem is am having vertical stacked bar graph , but what i need is horizontal stack graph

Answer 1

You need to use Stacked Bar, which stacked the datapoints horizontally instead of Stacked Column, which stacks vertically.