Area Chart With Line Chart Overlay And Change Color Opacity
Background
For better visualization, sometimes you want to overlay your area chart with a line chart, so that you can change the outline color of each area. You can also change the opacity of the areas. See below screenshots as examples.
Before: The color of the fill and the outline of each area are the same. The opacity of the fill is 100%.
After: The color of the outline is white, and the opacity of the fill is 30%.
Before: The color of the fill and the outline of each area are the same. The opacity of the fill is 100%.
After: The color of the outline is darker than the color of the fill, and the opacity of the fill is 30%.
Solution
- For the outline color, create two values for each measure, one visualized on a line chart and another one on an area chart. Make sure that the line chart is placed on top of the area chart. You can then select the color for each outline (line chart) and each area (area chart).
- For the opacity of the fill, use the script below. The range for opacity is 0 to 1 (0 to 100%).
widget.on('ready', function(se,ev){
$('.highcharts-areaspline-series', element).css('fill-opacity', '0.3')
});Updated 03-02-2023
