Is there a way to set background color and opacity in highcharts for a chart that is of type area?

According to the documentation you have to set the opacity by specifying the color as a rgb value and then adding an opacity value. However, when I do this I get the fill color of the chart to be black. Below is my code

<script type="text/javascript">
$(function() {
 var javascriptArray = <?php echo json_encode($array);?>;
 var newjavascriptArray = <?php echo json_encode($uniqueDates);?>;
 var valueArray = <?php echo json_encode($total); ?>;
 var js_array2 = [5, 10, 15];
  $('#container').highcharts({
  credits : {
  enabled: false
},
exporting:
{
  enabled: false
},
  chart: {
      backgroundColor: '#10416A',
      type: "area"

  },
  title: {
    style : {
      color: "white"
    },
      text: "Progress"
  },
  subtitle: {
    style : {
      color: "white"
    },
      text: 'Village Print & Media'
  },
  xAxis: {
  // gridLineWidth: 0,
  // lineWidth: 0,
  // minorGridLineWidth: 0,
    title:{
      style: {
        color : "white"
      },
        margin: 50,
        text: "February"
    },
    labels: {
    style : {
      color: "white"
    },
  },
    categories: newjavascriptArray
  },
  yAxis: {
    allowDecimals: false,
      title: {
        style: {
          color : "white"
        },
          text: "Points"
      },
      labels : {
        style: {
            color: "white"
        },
      },
  },

      plotOptions: {

        series: {
        color: "#00A6CE",
        lineColor: "#00A6CE",
        fillColor: 'rgb(0, 166, 206, 0.4)',
        // fillOpacity: 0.8,
        marker : {
          fillColor: "#00A6CE"
        },
         },
      line: {
          dataLabels: {
              enabled: false
          },
          enableMouseTracking: true
      }


  },
  legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 2,
      color: "white"
  },
  series: [{
      name: 'Points Ray',
      color: "white",
      dataLabels: {
        color:"white"
      },
      data: valueArray
  }]
 });
});

Is there a way to set background color and opacity in highcharts for a chart that is of type area?

According to the documentation you have to set the opacity by specifying the color as a rgb value and then adding an opacity value. However, when I do this I get the fill color of the chart to be black. Below is my code

<script type="text/javascript">
$(function() {
 var javascriptArray = <?php echo json_encode($array);?>;
 var newjavascriptArray = <?php echo json_encode($uniqueDates);?>;
 var valueArray = <?php echo json_encode($total); ?>;
 var js_array2 = [5, 10, 15];
  $('#container').highcharts({
  credits : {
  enabled: false
},
exporting:
{
  enabled: false
},
  chart: {
      backgroundColor: '#10416A',
      type: "area"

  },
  title: {
    style : {
      color: "white"
    },
      text: "Progress"
  },
  subtitle: {
    style : {
      color: "white"
    },
      text: 'Village Print & Media'
  },
  xAxis: {
  // gridLineWidth: 0,
  // lineWidth: 0,
  // minorGridLineWidth: 0,
    title:{
      style: {
        color : "white"
      },
        margin: 50,
        text: "February"
    },
    labels: {
    style : {
      color: "white"
    },
  },
    categories: newjavascriptArray
  },
  yAxis: {
    allowDecimals: false,
      title: {
        style: {
          color : "white"
        },
          text: "Points"
      },
      labels : {
        style: {
            color: "white"
        },
      },
  },

      plotOptions: {

        series: {
        color: "#00A6CE",
        lineColor: "#00A6CE",
        fillColor: 'rgb(0, 166, 206, 0.4)',
        // fillOpacity: 0.8,
        marker : {
          fillColor: "#00A6CE"
        },
         },
      line: {
          dataLabels: {
              enabled: false
          },
          enableMouseTracking: true
      }


  },
  legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 2,
      color: "white"
  },
  series: [{
      name: 'Points Ray',
      color: "white",
      dataLabels: {
        color:"white"
      },
      data: valueArray
  }]
 });
});

• javascript
• jquery
• html
• highcharts

1 Answer 1

http://api.highcharts./highcharts#plotOptions.area.fillOpacity

Note that when you set an explicit fillColor, the fillOpacity is not applied.

So you cannot use the fillOpacity property.

I've tried your code and fillColor: 'rgb(0, 166, 206, 0.4)' does not support the opacity, but it works correctly with fillColor: 'rgba(0, 166, 206, 0.4)'

Hope this help.