如何以适当的方式在x轴上的react-C3图表中表示值

Question

I am creating a chart using react-C3 but the way of representing the values are very clumsy not able to identify the value of the point how to get the values in proper way

_getChartData(){
    let state = this.state, xAxisFields, yAxisFields;
    xAxisFields = state.x_axis.map(el => ({
        fieldName: el, 
        aggregationType: this.selectedAggregateFunValue.value || 'count'})
    )
    yAxisFields = state.y_axis.map(el => ({ 
      fieldName: el,
      aggregationType: this.selectedAggregateFunValue.value || 'count' })
    )
    let data = {
      dataSourceName: state.selectedDataSource,
      dataConnectionName: state.dataConnectionName,
      xAxisFields: xAxisFields.length ? xAxisFields : undefined,
      yAxisFields: yAxisFields.length ? yAxisFields : undefined,
    };
    ChartAction._getChartData(data);
  }

这是x轴和y轴的代码，其中图表数据呈现

export function _getChartData(data){
dispatcher.dispatch({
    type:'Loader',
    showLoader: true 

})

data.userName = 'selva';
let stringifiedData = JSON.stringify(data);
Api._callAPI( "/UIServices/rest/chartService/fetchDataForChart", 'POST', stringifiedData, (type,dt) => {
    if(type == 'success'){
        dispatcher.dispatch({
            type: 'ChartData',
            data: dt,
        })  
        dispatcher.dispatch({
            type:'Loader',
            showLoader: false 
          })

    }
});

}

在我正在呼叫服务的行动中

 _renderChart(){
    if(!this.state.isDataFetched)
      return null;
    switch(this.state.chartType){
        case 'area': return <AreaChartComponent data={{'data': {'columns': this.state.data.columns, type: 'area-spline'},axis:{x:{categories:this.state.data.columns[0].slice(1),type:"category"}}}}/>;
        case 'pie': return <PieChartComponent  data={{'data': {'columns': this.state.data.columns, type: 'pie'},axis:{x:{categories:this.state.data.columns[0].slice(1),type:"category"}}}}/>;
        case 'bar': return <BarChartComp data={{'data': {'columns': this.state.data.columns, type: 'bar'},axis:{x:{categories:this.state.data.columns[0].slice(1),type:"category"}}}} />
        case 'line' : return <LineChartComponent data={{'data': {'columns': this.state.data.columns, type: 'line'},axis:{x:{categories:this.state.data.columns[0].slice(1),type:"category"}}}}/>
        case 'scatter' : return <ScatterPlotComp data={{'data': {'columns': this.state.data.columns, type: 'scatter'},axis:{x:{categories:this.state.data.columns[0].slice(1),type:"category"}}}}/>
        case 'donut' : return <DonutChartComp data={{'data': {'columns': this.state.data.columns, type: 'donut'},axis:{x:{categories:this.state.data.columns[0].slice(1),type:"category"}}}}/>
        case 'stackbar': return <StackedBarComp data={{'data': {'columns': this.state.data.columns, type: 'bar'},axis:{x:{categories:this.state.data.columns[0].slice(1),type:"category"}}}} />
        case 'stackarea': return <StackedAreaComp data={{'data': {'columns': this.state.data.columns, type: 'area'},axis:{x:{categories:this.state.data.columns[0].slice(1),type:"category"}}}} />

    }
}

switchChart(chartType){
    this.setState({
        chartType
    });
} 

我根据不同类型的图表渲染图表。