Multiple Charts in a Page with Image positioned on top of it - CanvasJS JavaScript Charts

Multiple Charts in a Page with Image positioned on top of it - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartsContianer">
  <div id="chartContainer1" style="height: 100px; width: 100%;"></div>
  <div id="chartContainer2" style="height: 250px; width: 100%;"></div>
</div>
<img src="https://i.imgur.com/UdEmKU6.png" style = "width: 100px; position: absolute; top: 80px; right: 10% "/>
<table>
  <colgroup>
    <col style="background-color: #fb860b"/>
    <col style="background-color: #8dc63f"/>
    <col style="background-color: #00aeef"/>
    <col style="background-color: #e3c606"/>
    <col style="background-color: #a864a8"/>
    <col style="background-color: #f69679"/>
    <col style="background-color: #00aeef"/>
  </colgroup>
  <tr>
    <th>Physical Science</th>
    <th>Earth Science</th>
    <th>Global Studies</th>
    <th>Global Studies</th>
    <th>Life Science</th>
    <th>Physical Science</th>
    <th>U.S. Studies</th>
  </tr>
  <tr>
    <td>service-1</td>
    <td>service-1</td>
    <td>service-1</td>
    <td>service-1</td>
    <td>service-1</td>
    <td>service-1</td>
    <td>service-1</td>
  </tr>
  <tr>
    <td>service-2</td>
    <td>service-2</td>
    <td>service-2</td>
    <td>service-2</td>
    <td>service-2</td>
    <td>service-2</td>
    <td>service-2</td>
  </tr>
  <tr>
    <td>service-3</td>
    <td>service-3</td>
    <td>service-3</td>
    <td>service-3</td>
    <td>service-3</td>
    <td>service-3</td>
    <td>service-3</td>
  </tr>
</table>

CSS

#chartsContianer {
  background-image: -webkit-linear-gradient(#54c7f2, #bee2f7);
  background-image: -moz-linear-gradient(#54c7f2, #bee2f7);
  background-image: -o-linear-gradient(#54c7f2, #bee2f7);
  background-image: linear-gradient(#54c7f2, #bee2f7);
}
table {
  width: 100%;
  text-align: center;
  color: white;
}

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1", {
	backgroundColor: "transparent",
  axisX: {
  	lineThickness: 0,
    tickLength: 0,
    labelFontColor: "#fff"
  },
  axisY: {
  	lineThickness: 0,
    tickLength: 0,
    gridThickness: 0,
  	labelFormatter: function(e){
    	return "";
    },
    stripLines: [
    {
      	value: 0,
        label: "C",
        thickness: 0,
        labelFontColor: "#fff",
        labelPlacement: "outside",
        labelBackgroundColor: "transparent",
        labelFontSize: 14
      },
    	{
      	value: 50,
        label: "D",
        color: "#fff",
        labelFontColor: "#fff",
        labelPlacement: "outside",
        labelBackgroundColor: "transparent",
        labelFontSize: 14,
        lineDashType: "dash",
        showOnTop: true
      },{
      	value: 100,
        label: "E",
        thickness: 0,
        labelFontColor: "#fff",
        labelPlacement: "outside",
        labelBackgroundColor: "transparent",
        labelFontSize: 14
      }
    ]
  },
  dataPointWidth: 30,
  data: [{
  	type: "stackedBar100",
    dataPoints: [
    	{ x: 1, label: "LEVEL", y: 80, color: "#0c74cc" },
      { x: 1, label: "LEVEL", y: 20, color: "#fe870b" }
    ]
  }]
});
chart1.render();

var chart2 = new CanvasJS.Chart("chartContainer2", {
	backgroundColor: "transparent",
  axisX: {
  	lineThickness: 0,
    tickLength: 0,
  	labelFormatter: function(e){
    	return "";
    },
    stripLines: [
    	{
      	value: 55,
        label: "50,000 World Reads",
        color: "#fff",
        labelFontColor: "#000",
        labelBackgroundColor: "#fff",
        labelPlacement: "outside",
        labelFontSize: 16,
        labelMaxWidth: 200
      }
    ]
  },
	axisY: {
  	includeZero: false,
    lineThickness: 0,
    tickLength: 0,
    gridDashType: "dash",
    gridColor: "#fff",
    labelFormatter: function(e){
    	return "";
    }
  },
  data: [
    {
      type: "line",
      lineDashType: "dash",
      color: "#000",
      markerColor:...