Semi-Transparent Spline Area with Highcharts

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>
<div id="chart_div"></div>

JavaScript

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