I would like to remove the X axis labels APEXCHARTS in NextJs. Image Exmple I would like to remove the number labels that go from 2100 to 8000. I already tried with dataLabels, but it didn't work.
And I would also like to add points to each line, it could be one or more points. ....................................................................................................................................................................................................
'use client'
import ReactApexChart from 'react-apexcharts';
import React, { Component } from 'react';
import { Show } from '@chakra-ui/react';
interface GraficoDumbbleState {
series: {
data: { x: string; y: [number, number] }[];
dataLabels?: {
enabled: boolean;
};
}[];
options: {
chart: {
height: number;
type: string;
zoom: {
enabled: boolean;
},
};
colors: string[];
plotOptions: {
bar: {
horizontal: boolean;
isDumbbell: boolean;
dumbbellColors: string[][];
};
};
title: {
text: string;
};
legend: {
show: boolean;
showForSingleSeries: boolean;
position: string;
horizontalAlign: string;
customLegendItems: string[];
};
fill: {
type: string;
gradient: {
gradientToColors: string[];
inverseColors: boolean;
stops: number[];
};
};
grid: {
xaxis: {
lines: {
show: boolean;
},
};
yaxis: {
lines: {
show: boolean;
};
yaxis: {
lines: {
show: boolean
}
};
};
};
};
}
class GraficoDumbble extends Component<{}, GraficoDumbbleState> {
constructor(props: any) {
super(props);
this.state = {
series: [
{
data: [
{
x: 'Amarela',
y: [2100, 8000]
},
{
x: 'Branca',
y: [2100, 8000]
},
{
x: 'Indígina',
y: [2100, 8000]
},
{
x: 'Parda',
y: [2100, 8000]
},
{
x: 'Preta',
y: [2100, 8000]
}
],
dataLabels: {
enabled: false
},
}
],
options: {
chart: {
height: 390,
type: 'rangeBar',
zoom: {
enabled: false
},
},
colors: ['#808080', '#808080'],
plotOptions: {
bar: {
horizontal: true,
isDumbbell: true,
dumbbellColors: [['#808080', '#808080']],
}
},
title: {
text: '',
},
legend: {
show: false,
showForSingleSeries: false,
position: 'top',
horizontalAlign: 'left',
customLegendItems: ['Female', 'Male']
},
fill: {
type: 'gradient',
gradient: {
gradientToColors: ['#808080'],
inverseColors: false,
stops: [0, 100]
}
},
grid: {
xaxis: {
lines: {
show: false
},
},
yaxis: {
lines: {
show: false
},
yaxis: { lines: { show: false } }
}
}
},
};
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options as any} series={this.state.series} type="rangeBar" height={390} />
</div>
<div id="html-dist"></div>
</div>
);
}
}
export default GraficoDumbble;
We need to set xaxis object property labels property show to false, reference documentation
path to set: options.xaxis.labels.show to false
...
grid: {
...
},
xaxis: {
labels: {
show: false,
}
},
...