CODEWITHSUNDEEP
chartsantd
nerdess
nerdess

Reputation: 10930

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

Upvotes: 1

Views: 3910

Answers (2)

nerdess
nerdess

Reputation: 10930

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.

Upvotes: 3

DevThiman
DevThiman

Reputation: 1138

There is an Open Bug in AntD GitHub [BUG] Label of column charts are being cut out if label position is set to 'top' officials for this issue. Some member of ant design team has given an answer as set limitInPlot: true in config. I tried that but didn't work.

I tried with adjusting height prop and offsetY in lable prop inside config. This is just tricky option for you to achieve what you want.

Option 1 -

label: {
  position: "top",
  offsetY: 15, // change offset to this then value will not crop as before but just overlap with chart.
  formatter: ({ value }) => value
}

enter image description here

Option 2 -

xAxis: false,
height: 750, // increase the chart height and it will show the value with a gap. But this will create a scroll. 
autoFit: false,

enter image description here

Option 3 -

You can use mix of above two options with adjusting right values. This will get what you want without a scroll. below values got this result.

xAxis: false,
height: 500, // adjust height
autoFit: false,
legend: {
  position: "bottom",
  flipPage: false
},
interactions: [
  {
    type: "element-active"
  }
],
label: {
  position: "top",
  offsetY: 12, // adjust offset
  formatter: ({ value }) => value
}

enter image description here

This is the sandboxcode.

Hope this will help to overcome your issue.

Upvotes: 0

Related Questions