如何在react C3js中对X轴点进行分组？

import React from 'react';
import C3Chart from 'react-c3js';
import 'c3/c3.css';

const Chart = () => {
  // 定义数据格式
  const data = {
    columns: [
      ['Group 1', 30, 200, 100, 400, 150, 250],
      ['Group 2', 50, 20, 10, 40, 15, 25],
      // 更多数据组...
    ],
    categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5', 'Category 6'],
    groups: [['Group 1', 'Group 2']], // 分组配置
  };

  // 配置C3js图表
  const config = {
    axis: {
      x: {
        type: 'category',
        categories: data.categories,
      },
    },
    data: {
      columns: data.columns,
      groups: data.groups,
    },
  };

  return <C3Chart data={data} axis={config.axis} />;
};

export default Chart;