CODEWITHSUNDEEP
javascripthighcharts
mukesh.kumar
mukesh.kumar

Reputation: 1160

Highcharts - pie chart with html div at center

What I want to create in Highcharts.js in React Native:
this is what I want to create
I had 2 options :

  1. Render a circle at the centre on donut chart using chart.renderer.circle and then add Image, Text, Shadow or zIndex.
    But I couldn't figure out how to add Image/Text/Shadow to the rendered Circle.
    Here is a jsFiddle demo of this approach.
  2. Place a div just above the highcharts div container and apply shadow, Image, Text there.
    Here is a jsFiddle demo of this approach.

    The second approach pretty much worked, but there are many problems, like
    • Tooltips hide under the overlapping div
    • Width of the graph is larger than the mobile screen width.

Has anyone done this type of graph? Can you suggest me a better way to draw this graph?

Most Imp thing for me is shadow effect!

Upvotes: 1

Views: 3204

Answers (1)

ppotaczek
ppotaczek

Reputation: 39149

You can also use Highcharts.SVGRenderer class to add an image:

// Build the chart
Highcharts.chart('container', {
    ...
}, function(chart) {
    var textX = chart.plotLeft + (chart.series[0].center[0]);
    var textY = chart.plotTop + (chart.series[0].center[1]);

    chart.renderer.image(
        'https://www.highcharts.com/samples/graphics/sun.png',
        textX - 15,
        textY - 15,
        30,
        30
    ).add();
});

Live demo: https://jsfiddle.net/BlackLabel/zp7suewr/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image

Upvotes: 2

Related Questions