How to use the @elastic/charts.DataGenerator function in @elastic/charts

render() {
    const dg = new DataGenerator();
    const data1 = dg.generateGroupedSeries(20, 1);
    const data2 = dg.generateGroupedSeries(20, 5);

    const isDarkTheme = this.props.theme.includes('dark');
    const theme = isDarkTheme
      ? EUI_CHARTS_THEME_DARK.theme
      : EUI_CHARTS_THEME_LIGHT.theme;

    const customColors = {
      colors: {
        vizColors: colorPalette('#FFFFE0', '#017F75', 5),
      },
    };

    const data1CustomSeriesColors = new Map();
    const data1DataSeriesColorValues = {

createCategoryChart = numCharts => {
    const dg = new DataGenerator();
    const data = dg.generateGroupedSeries(20, numCharts).map(item => {
      const index = Number(item.g);
      item.g = `Category ${index + 1}`;
      return item;
    });

    this.setState({
      data,
      dataString: "[{x: 1, y: 5.5, g: 'Category 1'}]",
      vizColors: palettes.euiPaletteColorBlind.colors,
      chartType: 'LineSeries',
    });
  };

render() {
    const {
      data,
      dataString,
      vizColors,
      chartType,
      numCharts,
      colorType,
      colorTypeIdSelected,
    } = this.state;

    const dg = new DataGenerator();
    const isDarkTheme = this.props.theme.includes('dark');
    const theme = isDarkTheme
      ? EUI_CHARTS_THEME_DARK.theme
      : EUI_CHARTS_THEME_LIGHT.theme;

    let ChartType = CHART_COMPONENTS[chartType];

    const isBadChart = !this.state.grouped && numCharts > 5;
    const isComplicatedChart = this.state.grouped;

    const customTitle =
      colorType === 'Highlight' ? (
        
          <h4>
             My number of
            issues compared to others</h4>