Fired Up for Highcharts - Cartesian

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/highcharts-more.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/modules/funnel.js" type="text/javascript"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 300px;
    height: 185px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    background-image: url('https://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');
}
#chart_div svg { height: 185px; }
img { z-index: -1; }

JavaScript

$(function () {
   Highcharts.setOptions({
      colors: ["rgba(255,0,0,0.2)"]
   });
   var options = {
      chart: {
         renderTo: "chart_div",
         type: 'areaspline',
         animation: {
            duration: 0
         },
         //style: {
         //   fontFamily: "Helvetica, Arial",
         //   fontSize: "8px",
         //},
         backgroundColor: "transparent",
         plotBackgroundColor: "transparent",
      },
      title: {
         text: "",
      },
      legend: {
         enabled: false,
      },
      xAxis: {
         title: {
            text: "",
         },
         labels: {
            enabled: false,
         },
         crosshair: false,
         lineWidth: 1,
         //lineColor: "rgba(255,255,255,0.3)",
         gridLineWidth: 0,
         minorGridLineWidth: 0,
         tickWidth: 0,
         minorTickWidth: 0,
         plotLines: [],
      },
      yAxis: {
         title: {
            text: "",
         },
         labels: {
            enabled: false,
         },
         crosshair: false,
         lineWidth: 1,
         //lineColor: "rgba(255,255,255,0.3)",
         gridLineWidth: 1,
         gridLineDashStyle: "Solid",
         gridLineColor: "rgba(255,255,255,0.3)",
         minorGridLineWidth: 0,
         tickWidth: 0,
         minorTickWidth: 0,
         plotLines: [],
         plotBands: [],
      },
      plotOptions: {
         series: {
            animation: {
               duration: 0
            },
            enableMouseTracking: false,
            dataLabels: {
            },
            marker: {
               enabled: false,
               states: {
                  hover: {
                     enabled: false
                  }
               },
            },
         },
      },
      //tooltip: {
      //   enabled: false,
      //},
      //labels: {
      //   style: {
      //      fontSize: "8px",
      //      fontWeight: "normal",
      //      color: "#ffffff",
      //     ...