Struggling to create consistent spacing between stacked bar charts in React using Recharts?

I have successfully created a stacked bar chart, but I am struggling to add a 10px spacing between two vertical stacked bar charts. I tried using barGap={8880} and barCategoryGap={100}, but it did not work as expected. Below is the code snippet and stackblitz link provided. Can anyone help me fix this issue?

Click here for StackBlitz example

import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts';
import './style.css';

const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

export default function App() {
  return (
    <BarChart width={500} height={300} data={data} margin={{ top: 5, right: 50, bottom: 5, left: 50 }}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="pv" stackId="a" fill="#8884d8" radius={[100, 100, 100, 100]} barGap={8880} barCategoryGap={100} />
      <Bar dataKey="uv" stackId="a" fill="#82ca9d" radius={[100, 100, 100, 100]} barGap={8880} barCategoryGap={100} />
    </BarChart>
  );
}

Answer №1

import './style.css';
import React from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'recharts';

const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 400,
    amt: 2400,
    gap: 1000,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
    gap: 1000,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
    gap: 1000,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
    gap: 1000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
    gap: 1000,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
    gap: 1000,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
    gap: 1000,
  },
];

export default function App() {
  return (
    <BarChart
      width={500}
      height={300}
      data={data}
      margin={{ top: 5, right: 50, bottom: 5, left: 50 }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar
        dataKey="pv"
        stackId="a"
        fill="#8884d8"
        radius={[100, 100, 100, 100]}
        barGap={8880}
        barCategoryGap={100}
      />
      <Bar dataKey="gap" stackId="a" fill="transparent" />
      <Bar
        dataKey="uv"
        stackId="a"
        fill="#82ca9d"
        radius={[100, 100, 100, 100]}
        barGap={8880}
        barCategoryGap={100}
      />
    </BarChart>
  );
}

I haven't been able to find a suitable solution yet, but here's a temporary fix that might work for you.

This workaround involves adding a transparent bar between the main bars as a gap. The size of the gap will be determined by the gap value in your data array. Make sure to include an additional value in your data array specifically for the gap!

Hoping this temporary fix helps address your issue for now!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can I deactivate JavaScript on my website directly from my server settings?

I'm currently attempting to link my Android application to a PHP script hosted on a free server. However, when my app tries to access the page, I receive an HTML message stating that JavaScript is disabled and needs to be enabled in order to view the ...

Guide on transforming a JSON string into an array of custom objects using the json2typescript NPM module within a TypeScript environment

I am looking to utilize the json2typescript NPM module to convert a JSON string into an array of custom objects. Below is the code I have written. export class CustomObject { constructor(private property1: string, private property2: string, private p ...

Validating Forms using JQuery

I am currently working on a jQuery AJAX code to validate specific fields in an HTML form before submission. If any errors occur during validation, I want the error message to be displayed in a div with the ID "response." However, the code doesn't seem ...

The content displayed in the PrimeNG p-table is limited to only the table name with no additional information

After upgrading Angular to version 9, I switched from p-dataTable to p-table in PrimeNG. With a table named users, I intended to display them on the screen upon rendering the view using the following HTML: users = ['one','two','thr ...

Having trouble getting Next.js 404 page to function properly with the .tsx extension?

My latest project involved creating a Next.js application using regular JavaScript, which led to the development of my 404 page. 404.js import { useEffect } from "react"; import { useRouter } from "next/router"; import Link from " ...

The issue with CSS right alignment not functioning as expected

My attempt to align text to the right using a CSS rule is not working as expected when applied to a font within a cell. Can anyone help me troubleshoot this issue? Take a look at my code snippet below: CSS: .font1 { font-size: 60px; text-align: ...

What are the key distinctions between Cordova and PhoneGap?

After reviewing multiple documents, it appears that Cordova is often described as a power booster for PhoneGap. However, I am interested in understanding the differences between the two during implementation. When creating a project using Cordova via the ...

The data in the textarea is lost once a script is executed

As a beginner in client side web programming, I am currently working on a simple code. In the initial part of the script, I assign a textarea with the text "Why is this text staying". When the user clicks on the submit button of the form, my goal is to c ...

Tips for arranging flex children on top of one another

I am looking to position and center both boxes so that they overlap in the middle of the screen, without specifying a fixed width and height. Additionally, I want to incorporate CSS transitions to make box 1 disappear and reveal box 2 upon clicking a butt ...

Caution: The value supplied to Material-ui Autocomplete is not valid

Currently, I am working on a project using React and material-ui. While working with the Autocomplete component in my form submission, I encountered a warning. Following the basic approach provided in the documentation, here's what I tried: let Form ...

Accessing variables within a frame using JavaScript.Is there a way to access variables within

I am having trouble accessing a Frame that is included within a frameset. The structure looks like this: IFRAME \ FRAMESET \FRAMESET \ FRAME I have been struggling to find a solution, I can only access the iframe ...

Retrieve the weekday dates for a specific year, month, and relative week number using Javascript or Typescript

I am in need of a custom function called getDaysOfWeekDates that can take a year, a month (ranging from 0 to 11), and the week number of each month (usually 4-5 weeks per month) as parameters, and return a list of dates containing each day of that particul ...

The event listener for 'load' is not functioning properly within the React (Gatsby) environment

I'm having trouble with a sticky scroll parallax effect when the page initially loads at a position other than the top. I'm utilizing the react-scroll-parallax library (https://www.npmjs.com/package/react-scroll-parallax). To address this issue, ...

Set up a jquery code that ensures a loading effect will only be displayed one time

After clicking on a specific icon, I dynamically add a loading message to the DOM. The issue arises when the user clicks twice, resulting in two instances of the loading message appearing simultaneously. How can I ensure that only one "loading..." message ...

Renaming the month in Material-UI React

Using DatePicker from Material Ui, I am trying to change the name of the month. How can this be achieved? For instance, I need to change August to Avqust or March to Mart enter image description here This is my code: <LocalizationProvider ...

Finding distinct outcomes from an already screened roster using AngularJS

I have an array containing objects structured like this: { "date":"11/11/2014", "time":"17.20.37", "car":"396", "driver":"Jenny", "from":"Old Office", "destination":"Log WH", "pax":"3","comment":"", "commenttime":"", "arrival":"17.20.48", "inserted":true, ...

The issue with Angular UI Select not displaying the selected item in the dropdown menu on Internet Explorer 11

Encountering a problem with the dropdown feature in UI Select not displaying the previously selected element. This issue is specific to IE11, as even the Angular UI Select demo replicates the same issue. Below is a screenshot illustrating the problem in I ...

Is there a method we can use to consistently retrieve and utilize props passed to a component, given that using wrapper.props().propname always results in undefined

When using enzyme to test a list component, I am trying to verify if the component renders a list with the same data that was passed through props. import React from 'react'; import { shallow, mount } from 'enzyme'; import renderer fro ...

An error occurred stating 'TypeError: jsdom.jsdom is not a function' while using the paper-node.js in the npm paper module

Recently, I added the webppl-agents library to my project, including webppl and webppl-dp. However, when attempting to execute the command line test, I encountered some difficulties. It seems that there is a dependency problem with jsdom from the npm paper ...

A blank page appears when deploying a React app on GitHub pages

As a beginner with react, I recently completed building my first application. Now, I am facing an issue while trying to deploy it on Github Pages – the page appears completely blank. Here are the steps I have taken so far: Installed gh-pages using: npm ...