I want to hide de Y-axis from Line component in Ant design charts (React)
My current versions are:
- React: 18.3.1
- antd: 5.19.3
- ant-design/charts: 2.1.2
I am using the module
import { Line } from '@ant-design/plots';
With this setting object:
{
data: datasets || [],
xField: 'label',
yField: 'value',
width: data.hasLegends ? 1300 : 1600,
seriesField: 'type',
color,
smooth: true,
xAxis: {
label: {
style: {
fill: NEUTRAL_BLACK,
fontSize: 12,
},
formatter: upperCase,
},
},
yAxis: false,
position: 'right',
legend: false,
theme: {
styleSheet: {
fontFamily: 'Foundry Monoline Extra Bold',
},
},
label: {
style: {
fontFamily: 'Foundry Monoline Medium',
fontSize: 12,
textAlign: 'center',
},
transform: [{ type: 'overlapDodgeY'}],
textBaseline: 'bottom',
textAlign: 'center',
formatter: (text, record) => {
let value = '';
if ('accounting_type' in record) {
switch (record.type) {
case TYPE_REVENUE:
value = Formatter.toCurrency(record.value);
break;
case TYPE_EXPENSE:
value = `-${Formatter.toCurrency(record.value)}`;
// this prevents an overlap of "$0.00" and "-$0.00"
if (record.value == 0 && datasets.length === TWO_VALUES_PER_MONTH) value = ``;
break;
default:
value = Formatter.toCurrency(record.value);
break;
}
} else {
value = Formatter.toCurrency(record.value);
}
// Retornar el valor formateado como moneda
return value;
},
},
point: {
shape: 'circle',
size: 3,
style: {
r: 4,
},
},
tooltip: false,
interactions: [
{
type: 'marker-active',
},
],
shapeField: 'smooth',
}
I have even tried this setting from documentation, but it doesn’t work as I expected
axis: {
x: {},
y: {},
}
In this documentation there isn’t a mention from y-axis hide: https://ant-design-charts.antgroup.com/en/options/plots/component/axis
I really appreciate any feedback 😉