recharts
recharts copied to clipboard
recharts
ComposedCharts - Area + Bar causes white gap around edges of area graph.
In all examples of composed charts with area/line and bar, there is a white space around the area/line chart on the edges of the graph.
See: https://jsfiddle.net/alidingling/9xopwa9v/
Is there a way to move this gap, so that the line will come out of the 'edge' of the graph, the same as if a normal line/area chart was being used?
With ComposedChart + Bar Graph
Without ComposedChart
I do require the bars as well, I realise you can use type="point" on the XAxis but then it breaks the bars.
@ro-savage - Use <XAxis dataKey="name" scale="point"/> and this will solve the probem. Please refer solution https://jsfiddle.net/yntoefxv/
Thanks for the response @Durgaprasad-Budhwani
However, I'd this reserves the issue that now the bar are over the edge of the graph.
Ideally there would be a way to have the line/area graph start at the beginning of the 'grid' rather than the center. The area/line would then take up a whole grid each, basically moving
I am facing a similar issue... Have you come across any optimal way of dealing it..? @ro-savage If yes, please share it!
We just accepted it as 'the way it is'. I think to change it would require a PR to recharts with an option to position is differently.
But, there should some workaround with which we can handle it Is there a way we can take control over those svgs to position them..? Can we atleast extend the area and line chart to the Y-Axis, preserving the position of the bars..?
Bump because this is still very much an issue as more complicated charts have to get created mixing the area and bar components.
Bump too, I am trying to have an area element start at the y-axis and end at the end of the graph rather than having random space between the area graph and left and right axies Thanks!!
