How to remove x-axis baseline in column chart of @ant-design/plots

Question

I am finding difficulty in removing baseline from column chart. Here is my code and visual example.

import { Column } from '@ant-design/plots';

const config = {
        data: [...dataArr, ...data],
        isStack: true,
        xField: 'year',
        yField: 'value',
        seriesField: 'type',
        colorField: 'type', // or seriesField in some cases
        color: ['#d62728', '#2ca02c', '#000000'],

        yAxis: {
            grid: {
                line: null
            }
        },

        xAxis: {
            grid: {
                closed: false,
                alignTick: false,
                line: null
            }
        },

        label: {
            position: 'middle' // 'top', 'bottom', 'middle'
        },
        interactions: [
            {
                type: 'active-region',
                enable: false
            }
        ],
        connectedArea: {
            style: (oldStyle) => {
                return {
                    fill: 'rgba(0,0,0,0.2)',
                    stroke: oldStyle.fill,
                    lineWidth: 1
                };
            }
        }
    };

    return <Column style={{ background: 'rgb(27, 27, 27)', padding: '20px 0 20px 20px' }} {...config} />;
};

I tried docs in https://charts.ant.design/en/api/plots/column. But still could not find the solution

Answer 1

To get rid of the actual x axis line, one can set the property:

xAxis: { line: { style: { lineWidth: 0 } } }

to also eliminate the tick lines:

xAxis: {
   line: { style: { lineWidth: 0 } },
   tickLine: { style: { lineWidth: 0 } },
}

In case the grid lines parallel to the x axis need also be hidden, one has to set yAxis.grid (the grid properties are registered to the axis perpendicular to the grid lines)

yAxis: {
   grid: { line: { style: { lineWidth: 0 } } },
},

All these are in the documentation on charts ant design, though that is a document only partially translated to English, for which I had to apply Chrome's "translate to English" (for the whole document) so it became readable.

Here's a stackblitz fork of a standard example using all those options.