0

enter image description here

I tried to achieve this kind of chart. But I couldn't get this exactly. Instead of that I got this.enter image description here

How can I get that exact thing that I want.

const getOptions = (type) => ({
  chart: {
    type:'pie',
    width: 500,
    height: 300,
  },
  title: {
    text: _.startCase(`${type} chart`),
  },
  plotOptions: {
    series: {
      borderWidth: 0
    },
    type: 'pie',
    size: '100%',
    innerSize: '90%',
    dataLabels:{
      distance: '-20px'
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  yAxis: {
    title: {
      text: 'Values',
    },
  },
  colors: ['#FCE700', '#F8C4B4', '#f6e1ea', '#B8E8FC', '#BCE29E'],
  series: [
    {
      data: [{
        y: 61.41,
        selected: true
    },{
        y: 20,
        selected: true
    }
  ],
      size: '100%',
      innerSize: '80%',
      dataLabels: {
        enabled: false,
        labelConnector: false,
      }
    },
  ],
});

function App() {
  return (
    <div>
      <HighchartsReact highcharts={Highcharts} options={getOptions('pie')} />
    </div>
  );
}

This is what I tried using react highcharts. Can anyone please help me with this.! Thanks in advance.

pranathi tammina
  • 25
  • 7

1 Answers1

0

Here is a simplified example of the chart you want to achieve:

let data = 81;
Highcharts.chart(container, {
  colors: ['#F2BD27', '#222222'],
  title: {
    text: data + '%',
    verticalAlign: 'middle'
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: false
      },
      borderWidth: 0
    }
  },
  series: [{
    type: 'pie',
    innerSize: '95%',
    data: [data, 100 - data]
  }]
});

Demo: https://codesandbox.io/s/highcharts-react-demo-forked-yr9zgf

magdalena
  • 2,657
  • 1
  • 7
  • 12
  • Thank you it is working in codesandbox and stackblitz, but in vs code it is showing some errors, like `demo.jsx:1 Uncaught SyntaxError: Cannot use import statement outside a module (at demo.jsx:1:1)` i.e, at import React from 'react ; I have installed all the dependencies and even the high-charts.But still getting this error. How can I get rid of that error? – pranathi tammina Jul 20 '23 at 09:03
  • You should probably just add "type": "module" to your package.json file. Otherwise, try to configure your chart again following the guidelines from here: https://github.com/highcharts/highcharts-react – magdalena Jul 20 '23 at 09:49
  • Thank you, but this doesn't have the exact solution. I added "type":"module". Still I am getting the same error. – pranathi tammina Jul 20 '23 at 10:29
  • I'm not able to help you without seeing the full code. You can try solutions from the other SO threads related to this error, e.g. https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import . If this doesn't help you, try to configure your project again and copy the chart options from my answer to the new project. – magdalena Jul 20 '23 at 10:37