javascriptreactjsreact-vis

cannot remove gap between bars from React vis graph

I have the following: 

<XYPlot xType="ordinal" width={300} height={300} xDistance={0}>
    <VerticalGridLines />
    <HorizontalGridLines />
    <XAxis />
    <VerticalBarSeries className="vertical-bar-series-example" data={greenData} />
    <LabelSeries data={labelData} getLabel={d => d.y} />
</XYPlot>

and some mocked data like so:

const greenData = [
    {x: 34, y: 200},
    {x: 35, y: 220},
    {x: 36, y: 240},
    {x: 37, y: 260},
    {x: 38, y: 280},
    {x: 39, y: 300}
];

const labelData = greenData.map((d, idx) => ({
  x: Math.max(greenData[idx].x),
  y: d.y
}));

however I cannot find a solution to remove the gap between bars:

enter image description here

Solution

  • The issue is that you're using a VerticalBarSeries which will produce a bar graph (with spacing between each bar). If you're looking for a histogram, which will not have spacing between each bar. You need to use VerticalRectSeries to create the histogram.

    histograms documentation

    <XYPlot xType="ordinal" width={300} height={300}>
    <VerticalGridLines />
    <HorizontalGridLines />
    <XAxis />
    <VerticalRectSeries className="vertical-bar-series-example" data={greenData} />
    <LabelSeries data={labelData} getLabel={d => d.y} />
</XYPlot>