Chart Types Example

GaugeChart.tsx

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

export const GaugeChart = () => {
  const options = {
    chart: {
      type: 'gauge',
      plotBorderWidth: 0,
      plotShadow: false
    },
    pane: {
      startAngle: -90,
      endAngle: 89.9,
      center: ['50%', '75%'],
      size: '110%'
    },
    yAxis: {
      tickPixelInterval: 72,
      tickPosition: 'inside',
      tickLength: 10,
      tickWidth: 2
    }
  };
  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

PieChart.tsx

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

export const PieChart = () => {
  const options = {
    chart: {
      type: 'pie'
    },
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f}%'
        },
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              // Handle click events
            }
          }
        }
      }
    }
  };
  return <HighchartsReact highcharts={Highcharts} options={options} />;
};