0👍
Background in Highcharts is an SVG element, so if you want to add image background to it you should apply defs
pattern:
events: {
render: function() {
var chart = this,
renderer = chart.renderer,
bg = chart.plotBackground;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: 1,
id: 'bg-pattern',
patternContentUnits: 'objectBoundingBox'
});
renderer.image('https://avatars3.githubusercontent.com/u/15981345?s=400&v=4', 0, 0, 1, 1).attr({}).add(pattern);
bg.css({
color: 'url(#bg-pattern)'
});
}
}
Points opacity can be set via CSS:
.highcharts-point {
opacity: 0.5;
}
Live demo: http://jsfiddle.net/kkulig/694gs6qv/
Docs reference:
https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
API reference:
Source:stackexchange.com