jquery - Highcharts - Area fillOpacity is mixing on multiple area charts -

i using highcharts (area chart)...

i trying use line color #f68936 , area background color 10% of opacity color. working expected when use 1 chart. getting issue in opacity background of front chart while combining more areas.

green background opacity mixing red color , showing different color :(

how can show original colors (background opacity) though has multiple areas.

online demo

---

expected result:

---

---

what getting below:

---

$(function () {    // in common between 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 // 1 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 // 1 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>

your post accurate description of how less-than-full opacity works. other result expecting?

if set something's opacity less 1, whatever behind partially visible - meaning "mix" foreground color.

this not expected behavior, possible behavior. means less opaque.

if want series same color series looks with opacity of less 1, on white background, need determine color is, , set fillcolor, opacity of 1.