Ant design bar chart hide label - reactjs

Question

I use ant design bar chart in my react project.
https://codesandbox.io/s/9qmjm0k7yw
Doc: https://pro.ant.design/components/Charts
I want to show the data with x-axis as date format (29/09/2018 for example). If I show like 30 days, it would not have enough space for all the label so it looks weird.
I want to hide the label of bar chart. Like this
if (more than 15 days) chart shows label
else hide label
Or is there any way that I show the chart for 30 days but only show the label for let's say 10 days?
How can I hide the label?

Answer 1

Unfortunately what you want to do is not supported by Antd-Pro Charts. It is stated in the docs that they designed the charts components with focus on ease-of-use over customization.
However Antd-Pro Charts are just a simplified subset of BizCharts (which itself is a port of G2) with reduced api options. If you need complicated chart options consider using the parent BizCharts library instead. You can do what you want by adjusting the < Axis > object in BizCharts.

Answer 2

In my example below, I have used a Column chart with x field of "week" and y field of "views". I did not want to display the label on the x field.
render() {
// console.log(this.state.data)
const config = {
data: this.state.data,
title: {
visible: true,
text: 'Your Stats',
},
xField: 'week',
yField: 'views',
meta: {
week: {
alias: " "
}
}
};
return (
<React.Fragment>
<Column {...config} />
</React.Fragment>
);
}
The data used is as follows:
Which yielded this outcome:

Answer 3

In order to develop your own project, I strongly recommend that you keep all of your software business in your own project, and use third party libraries just for their own business, rather than manipulating your software business because they simply change these libraries and To apply these changes, you may need to do a lot of work.
it does not only give you more performance but also increases your ability to develop.
for your topic, you can simply get an array and handle whatever you want and pass your processed array to component