Is it possible to add image behind doughnut chart with transparency color in ng2chart?

Question

I have the requirement to add image behind ng2 doughnut chart with transparency color, the image will be in doughnut chart behind the color and not beyond that and not center of doughnut chart. is it possible to do it programtically. it is single image . AnyOne help appreciated.

Here is  plunker demo: https://plnkr.co/edit/lxwEBXQXseUrE6BsHI9h?p=preview

chart with transparency:

output be like this:

score 0 · Answer 1 · answered Nov 14 '17 at 12:25

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:

Is it possible to add image behind doughnut chart with transparency color in ng2chart?

1 Answers1