Change the viewPort?

[oscarthroedsson]

Hey!
New to Recharts and trying to implement it on my web-page.

When I try to implement the BarChart (https://recharts.org/en-US/examples/SimpleBarChart) the viewport on the right side is a lot bigger then the left side. I would like to get it even on all four sides. Is their a way I can make this happen?

You can look on the img I have provided.

Thanks for the understanding that I am new to this and would like all the help and explanation possible.

[ckifer]

Hi, welcome!

There is some default margin on the charts so they fit the space that they are in.

You can adjust that margin to whatever fits your needs. Here it is at 0
https://codesandbox.io/s/simple-bar-chart-forked-7jl977?file=/src/App.tsx

This still has some extra space on the left and the bottom (we need room for the axes) but you should be able to adjust those numbers to what looks best to you

[ckifer]

Are you using ResponsiveContainer?

https://codesandbox.io/s/simple-bar-chart-forked-7jl977?file=/src/App.tsx

Your chart shouldn't go out of bounds of your container if you do that.

Other than that you can set negative margin (wouldn't recommend, but maybe it can help a little but without ill effect) or you can set the width of your YAxis (also don't recommend because then large numbers will get cut off if that width is fixed)

[ckifer]

[oscarthroedsson]

What!?!?!, how did you do that? Before you read on, I wanna say thank you for your time and sorry if I´am annoying.

INFO: The code below is in a component. Except the two dives, I have another, look at the end to see the div containing the components.

This is my code to the following img.
This divs are not showing in my code example:

`return (

  <div className="xs:w-4/5 p-3 bg-white rounded-md temp ">
  
    <ResponsiveContainer width="100%" height={100}>
  
      <BarChart className="barChart" width={500} height={100} data={data}>
  
        <CartesianGrid />
  
        <XAxis dataKey="name" fontSize={11} />
  
        <YAxis fontSize={11} />
  
        <Tooltip />
  
        <Bar dataKey="pv" fill="#8884d8" />
  
      </BarChart>
  
    </ResponsiveContainer>
  
  </div>

</div>

);`

This is on a wider screen, no matter which breakpoint I look. at, it is the same.

Calling my divs parent 1 and 2 to make it easy.

-> Took away margin from p2 (marginbottom = mb-3)
This gave a few px better placement.

It doesnt matter if I change other class rules, it does not affect the chart in any positive or negative way.

The div containing the components. We are in WeekData with the code above.
`

`

[ckifer]

I guess its hard to do anything without an actual reproduction. I can wrap things in divs and get the same result as above - everything is as tight to the container as possible without cutting things off. On the left and the bottom
https://codesandbox.io/s/simple-bar-chart-forked-7jl977?file=/src/App.tsx

Can you try to modify the sandbox to represent the issue better?

[oscarthroedsson]

Here is what i do different, if it matter.

Code I don´t copy in to the component:
import React, { PureComponent } from 'react';

I have this in my app.jsx
import { useState, useEffect } from "react";

and this i have in my main.jsx
import React from "react"; import ReactDOM from "react-dom/client"; import Router from "./routes/router";

Do i need this: import React, { PureComponent } from 'react'; ?

instead of:
`
export default class Example extends PureComponent {
static demoUrl = 'https://codesandbox.io/s/simple-bar-chart-tpz8r';

render() {
return(
)}
i have this: export default function WeekData() {
return (

<BarChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>

Undersök mer

);
}`

This is my code in sandbox.
https://codesandbox.io/s/simple-bar-chart-forked-svl9m5?file=/src/App.tsx

And i still have the problem.

[oscarthroedsson]

LoL, didnt see you -margin.

It looks okey..

Thank you for your time and help.

[ckifer]

Sure thing. We'll look at making this better in the future