高图-阴影上的系列颜色

Question

I would like to use the series color in the shadow color.

If I hardcode the colors in each series individually I can achieve that, but I was wondering there is a way to do it automatically, without hardcore the color in each series?

Hardcode the color individually: https://jsfiddle.net/jzcwb3vn/

Highcharts.theme = {
    colors: ['#3498db', '#e74c3c'], 
    plotOptions: {
        line: {
            lineWidth: 3,
            marker: {
                enabled: false
            }
        }
    }
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

Highcharts.chart('container', {
  series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        shadow: {
          width: 8,
          opacity: 0.2,
          color: '#3498db'
        }
    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
        shadow: {
          width: 8,
          opacity: 0.2,
          color: '#e74c3c'
        }
    }]

});

Without the hardcode color: https://jsfiddle.net/jzcwb3vn/2/

Highcharts.theme = {
    colors: ['#3498db', '#e74c3c'], 
    plotOptions: {
        line: {
            lineWidth: 3,
            shadow: {
                width: 8,
              opacity: 0.2
            },
            marker: {
                enabled: false
            }
        }
    }
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

Highcharts.chart('container', {
  series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    }]

});

Answer 1

One way of doing this is using the load function to set the color of the shadow, after each series has gotten it's color. Like this:

chart: {
  events: {
    load: function() {
      let allSeries = this.series;
      for(var i = 0; i < allSeries.length; i++) {
        allSeries[i].update({shadow: {color: allSeries[i].color}}, false);
      }
      this.redraw();
    }
  }
},

 Highcharts.theme = { colors: ['#3498db', '#e74c3c'], plotOptions: { line: { lineWidth: 3, marker: { enabled: false }, shadow: { width: 8, opacity: 0.2, } } } }; // Apply the theme Highcharts.setOptions(Highcharts.theme); Highcharts.chart('container', { chart: { events: { load: function() { let allSeries = this.series; for(var i = 0; i < allSeries.length; i++) { allSeries[i].update({shadow: {color: allSeries[i].color}}, false); } this.redraw(); } } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], }, { data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5], }] }); 

 #container { min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto } 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <div id="container"></div> 

Working example: https://jsfiddle.net/jzcwb3vn/4/