Custom ChartSeriesLabels and Positioning ChartLegend

import React, {useState} from 'react';
import {Paper, Typography} from '@material-ui/core';
import {RectangleLegendIcon, SaturnusIcon} from 'assets/icons';
import {GridItem} from 'components/CustomGrid';
import styles from './ChartPredictionAnalytic.module.scss';
import {
  Chart,
  ChartLegend,
  ChartSeries,
  ChartSeriesItem,
  ChartSeriesLabels,
} from '@progress/kendo-react-charts';

const seriesData = [
  {
    value: 28,
    label: 'Order Received',
    visible: true,
  },
  {
    label: 'Hot Prospect',
    value: 7,
    visible: true,
  },
  {
    label: 'Warm Prospect',
    value: 4,
    visible: true,
  },
  {
    label: 'Cold Prospect',
    value: 6,
    visible: true,
  },
];

const seriesColors = ['#41b548', '#ff4151', '#ff9900', '#33a8fc'];

const ChartContainer = () => {
  const [series, setSeries] = useState(seriesData);
  const handleLegendItemClick = (e, seriesItem) => {
    let newSeries = series.map(item => {
      if (item.name === seriesItem.name) {
        item.visible = !item.visible;
      }
      return item;
    });
    setSeries(newSeries);
  };

  const labelContent = e => e.value;
  const sumValue = series.reduce(
    (sum, currentValue) => sum + currentValue.value,
    0
  );

  const donutCenterRender = () => (
    <span>
      <h3>{sumValue}</h3>
    </span>
  );

  return (
    <GridItem xs={12} sm={6}>
      <Paper className={styles['card']}>
        <div className={styles['section']}>
          <Chart
            donutCenterRender={donutCenterRender}
            seriesColors={seriesColors}
            onLegendItemClick={handleLegendItemClick}>
            <ChartSeries>
              <ChartSeriesItem
                data={series}
                startAngle={150}
                categoryField="label"
                field="value"
                type="donut"
                holeSize={50}>
                <ChartSeriesLabels
                  content={labelContent}
                  position="outsideEnd"
                  background="none"
                />
              </ChartSeriesItem>
            </ChartSeries>
            <ChartLegend visible={false} />
          </Chart>
          <div className={styles['custom-legend']}>
            {series.map((item, idx) => {
              const {label} = item;
              const styleLegend = {
                color: item.color,
                opacity: item.visible ? 1 : 0.5,
              };
              if (label === 'Order Received') {
                return (
                  <button
                    key={idx}
                    style={{...styleLegend}}
                    onClick={e => handleLegendItemClick(e, item)}
                    className={styles['custom-legend-child']}>
                    <RectangleLegendIcon className={item.color} />
                    <Typography className={styles['custom-legend-text']}>
                      {label}
                    </Typography>
                  </button>
                );
              } else if (label === 'Hot Prospect') {
                return (
                  <button
                    key={idx}
                    style={{...styleLegend}}
                    onClick={e => handleLegendItemClick(e, item)}
                    className={styles['custom-legend-child']}>
                    <RectangleLegendIcon className={item.color} />
                    <Typography className={styles['custom-legend-text']}>
                      {label}
                    </Typography>
                  </button>
                );
              } else if (label === 'Warm Prospect') {
                return (
                  <button
                    key={idx}
                    style={{...styleLegend}}
                    onClick={e => handleLegendItemClick(e, item)}
                    className={styles['custom-legend-child']}>
                    <SaturnusIcon />
                    <Typography className={styles['custom-legend-text']}>
                      {label}
                    </Typography>
                  </button>
                );
              } else if (label === 'Cold Prospect') {
                return (
                  <button
                    key={idx}
                    style={{...styleLegend}}
                    onClick={e => handleLegendItemClick(e, item)}
                    className={styles['custom-legend-child']}>
                    <SaturnusIcon />
                    <Typography className={styles['custom-legend-text']}>
                      {label}
                    </Typography>
                  </button>
                );
              }
            })}
          </div>
        </div>
      </Paper>
    </GridItem>
  );
};

export default ChartContainer;

              <ChartSeriesItem
                data={series} // filter series to only include the items with visible true. You can use standard array filtering