Search code examples
chartsantd

antd column chart: label value is displayed outside of chart

I have a fairly simple ant column chart, this is it:

import React from "react";
import ReactDOM from "react-dom";
import { Column } from "@ant-design/plots";

const DemoColumn = () => {
const data = [
{
  type: "Value 1",
  value: 315801
},
{
  type: "Value 2",
  value: 222095
},
{
  type: "Value 3",
  value: 10800
}
];

const config = {
data,
loading: data.length === 0,
xField: "type",
yField: "value",
seriesField: "type",
  yAxis: {
    label: {
      formatter: (v) => v
    }
  },
  xAxis: false,
  height: 200,
  autoFit: false,
  legend: {
    position: "bottom",
    flipPage: false
  },
  interactions: [
    {
      type: "element-active"
    }
  ],
  label: {
     position: "top",
     offsetY: 8,
     formatter: ({ value }) => value
   }
 };
 return <Column {...config} />;
};

ReactDOM.render(<DemoColumn />, document.getElementById("container"));

The problem is, that the number of Value 1 is hanging off the chart. I tried setting the padding but this did not help, it acutally screwed the whole chart up?!?

enter image description here

Here is also a fiddle: https://codesandbox.io/s/cool-microservice-gbrbm9?file=/index.js:0-929

Solution

  • Fixed it myself by adding

    appendPadding: 10

    Another dynamic solution would be sth like this:

    yAxis: {
            max:  maxValue + 40
        },

    maxValue would be the highest value of the chart plus some padding.