StackedAreachart100 with no margin towards every sides of chart - CanvasJS Charts

StackedAreachart100 with no margin towards every sides of chart - CanvasJS Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="canvasjs-chart-container"  id="chartContainer" background="pink" style="transform: rotate(90deg); 
									transform-origin:bottom left; 
									position:absolute; height:102vw;
									width:102vh;
									top:-103vw;
									left:0vh; right:0vh; border: 1px solid black
									">
									</div>

CSS

html,body {
height:auto;
width:auto;
display: block;
 background-size: cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 margin:-6px; 
overflow: hidden;
			}

.canvasjs-chart-tooltip{
  transform: rotate(-90deg); 
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  toolTip: {
    reversed: false, // Change to false, true
    shared: true
  },
  axisY: {
    valueFormatString: " ",
    gridThickness: 0,
    margin: -5,
    tickThickness: 0
  },
  axisX: {
    valueFormatString: " ",
    gridThickness: 0,
    //minimum & maximum are set to mim & max values of x, so that there won't be gap between axis and first & last dataPoints
    minimum: 100.2,
    maximum: 102,
    tickThickness: 0,    
  },
  data: [{
    type: "stackedArea100",
    name: "Apatite",
    explodeOnClick: true,
    fillOpacity: 0.8,
    lineThickness: 0,
    dataPoints: [{
      x: 100.20,
      y: 9.00
    }, {
      x: 100.40,
      y: 9.00
    }, {
      x: 100.60,
      y: 12.00
    }, {
      x: 100.80,
      y: 11.00
    }, {
      x: 101.00,
      y: 12.00
    }, {
      x: 101.20,
      y: 2.00
    }, {
      x: 101.40,
      y: 14.00
    }, {
      x: 101.60,
      y: 11.00
    }, {
      x: 101.80,
      y: 10.00
    }, {
      x: 102.00,
      y: 8.00
    }, {
      x: 102.20,
      y: 13.00
    }, {
      x: 102.40,
      y: 5.00
    }, {
      x: 102.60,
      y: 12.00
    }, {
      x: 102.80,
      y: 8.00
    }],
    color: "#00004B",
    markerColor: "#00004B"
  }, {
    type: "stackedArea100",
    name: "Calcite",
    explodeOnClick: true,
    fillOpacity: 0.8,
    lineThickness: 0,
    dataPoints: [{
      x: 100.20,
      y: 4.00
    }, {
      x: 100.40,
      y: 14.00
    }, {
      x: 100.60,
      y: 12.00
    }, {
      x: 100.80,
      y: 9.00
    }, {
      x: 101.00,
      y: 14.00
    }, {
      x: 101.20,
      y: 5.00
    }, {
      x: 101.40,
      y: 11.00
    }, {
      x: 101.60,
      y: 7.00
    }, {
      x: 101.80,
      y: 11.00
    }, {
      x: 102.00,
      y: 8.00
    }, {
      x: 102.20,
      y: 9.00
    }, {
      x: 102.40,
      y: 4.00
    }, {
      x: 102.60,
      y: 12.00
    }, {
      x: 102.80,
      y: 13.00
    }, {
   ...