Highcharts - Area fillOpacity is mixing on multiple area charts

Question

I am using Highcharts (Area Chart)...

I am trying to use line color as #f68936 and area background color as 10% of opacity to its color. Its working as expected when I use one chart. Where as I am getting an issue in opacity background of front chart while combining more areas.

Green background opacity is mixing with Red color and showing different color :(

How can I show original colors (background opacity) though it has multiple areas.

Online demo

Expected Result:

What I am getting as like below:

$(function () {
  // Everything in common between the charts
  var commonOptions = {
    colors: ['#f68936', '#70ba47', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
    chart: {
      style: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12px',
        color: '#585858',
      }
    },
    title: {
      text: null
    },
    subtitle: {
      text: null
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#bbb",
        }
      },
      labels: {
        style:{ color: '#bbb' },
      },
      lineWidth: 1,
      tickLength: 0,
    },
    yAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#bbb",
        }
      },
      offset:-6,
      labels: {
        style:{ color: '#bbb' },
        //format:'{value}K',
      },
      tickInterval: 100,
      lineWidth: 1,
      gridLineDashStyle: 'dash',
    },
    series: [{
      //backgroundColor: "rgba(0 ,0, 0, 1)",
    }],

    // Area Chart
    plotOptions: {
      series: {
        fillOpacity: 0.1
      },
      area: {
        lineWidth: 1,
        marker: {
          lineWidth: 2,
          symbol: 'circle',
          fillColor: 'white',
          radius:3,
        },
        legend: {
          radius: 2,
        }
      }
    },
    tooltip: {
      useHTML: true,
      shared: true,
      backgroundColor: '#5f5f5f',
      borderWidth: 0,
      style: {
        padding:10,
        color: '#fefefe',
      }
    },
    legend: {
      itemStyle: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12',
        color: '#666666',
      },
      marker: {
        symbol: 'square',
        verticalAlign: 'middle',
        radius: '4',
      },
      symbolHeight: 6,
      symbolWidth: 6,
    },
  };

  // -----------------------------------------------------
  $('.areaChartTwoWay').each(function() {
    $(this).highcharts(Highcharts.merge(commonOptions, {
      chart: { type: 'area' },
      xAxis: {
        title: { text: 'Date', },
        type: 'datetime',
        dateTimeLabelFormats: {
          day: '%eth %b'
        },
      },
      yAxis: {
        title: { text: 'Count', },
      },
      series: [{
        name: 'Forwards',
        color: '#f68936',
        marker: { lineColor: '#f68936', fillColor: 'white', },
        data: [185, 290, 198, 220, 180, 140, 220, 335, 197, 240],
        legendIndex:1,
        pointStart: Date.UTC(2016, 2, 11),
        pointInterval: 24 * 3600 * 1000 // one day
      }, {
        name: 'Unique opens',
        color: '#70ba47',
        marker: { lineColor: '#70ba47', fillColor: 'white', },
        data: [90, 95, 98, 80, 70, 68, 85, 71, 64, 90],
        legendIndex:0,
        pointStart: Date.UTC(2016, 2, 11),
        pointInterval: 24 * 3600 * 1000 // one day
      }]
    }))

  });

  $('.highcharts-grid > path:last-child').remove();
  $('.highcharts-markers > path:last-child').remove();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px; margin: 0 auto"></div>

score 1 · Answer 1 · answered Apr 19 '16 at 17:37

Your post is an accurate description of how less-than-full opacity works. What other result were you expecting?

If you set something's opacity to less than 1, whatever is behind it will be partially visible - meaning it will "mix" with the foreground color.

This is not only the expected behavior, it is the only possible behavior. It is what it means to be less than fully opaque.

If you want your series to be the same color as what your series looks like with an opacity of less than 1, over a white background, then you need to determine what that color actually is, and set it as your fillColor, with an opacity of 1.

score 0 · Answer 2 · answered Apr 19 '16 at 10:01

0

You have two possibilities:

use stacking per series: http://www.highcharts.com/demo/area-stacked
use arearange series: http://www.highcharts.com/demo/arearange

answered Apr 19 '16 at 10:01

Sebastian Bochan

37,348
3
49
75

Hi **@Sebastian Bochan** thanks for the answer. But I am dynamically calculating the yAxis value to set the max yAxis value. In this case, if I use this option, yAxis values I am not able to control :( Please refer this link for the same: [Demo is here for the same](http://stackoverflow.com/questions/36590538/highcharts-yaxis-tickinterval-to-max-data) – Reddy Apr 19 '16 at 10:22
1

You can control the y axis just as fully with a stacked or non-stacked series. The question is whether or not your data series make more sense stacked or not stacked. – jlbriggs Apr 19 '16 at 17:39

Highcharts - Area fillOpacity is mixing on multiple area charts

2 Answers2