Highcharts.arcdiagram.App.js

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import _ from 'lodash';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsAccessibility from 'highcharts/modules/accessibility';
import HighchartsSankey from 'highcharts/modules/sankey';
import HighchartsArcDiagram from 'highcharts/modules/arc-diagram';
HighchartsExporting(Highcharts);
HighchartsAccessibility(Highcharts);
HighchartsSankey(Highcharts);
HighchartsArcDiagram(Highcharts);

const getOptions = (type) => ({
  chart: {
    type,
    width: 800,
    height: 600,
  },
  title: {
    text: _.startCase(`${type} chart`),
  },
  series: [
    {
      keys: ['from', 'to', 'weight'],
      linkWeight: 5,
      centeredLinks: true,
      dataLabels: {
        format: '{point.fromNode.name} → {point.toNode.name}: {point.weight}',
        nodeFormat: '{point.name}',
        color: 'black',
      },
      data: [
        ['A', 'B', 1],
        ['A', 'C', 1],
        ['A', 'D', 2],
        ['B', 'C', 2],
        ['C', 'D', 1],
        ['E', 'D', 3],
        ['E', 'F', 1],
      ],
    },
  ],
  credits: {
    enabled: false,
  },
});

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

export default App;