1

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

enter image description here


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

kikon
  • 3,670
  • 3
  • 5
  • 20
Fahad Ali
  • 13
  • 4
  • I'm afraid I don't understand what you are trying to achieve. Maybe you can add images with how the chart is now and how you want it to become. Or even better, make a runnable example, possibly with stackblitz or codesandbox. – kikon Aug 02 '23 at 06:03
  • Yes I edited and added image.I need help – Fahad Ali Aug 02 '23 at 06:57
  • If you want to get rid of the actual x axis line, you can do that through `xAxis: { line: { style: { lineWidth: 0 } } }`, see [stackblitz forked from standard example](https://stackblitz.com/edit/react-cg9zdy?file=index.js) – kikon Aug 02 '23 at 09:20
  • 1
    Thanks above method worked for me.Really helpful – Fahad Ali Aug 02 '23 at 09:27

1 Answers1

0

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.

kikon
  • 3,670
  • 3
  • 5
  • 20