Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gridXValues and theme are not working on nivo/bar server side rendering #2368

Closed
LinaLiao2021 opened this issue Jun 20, 2023 · 2 comments
Closed
Labels

Comments

@LinaLiao2021
Copy link

LinaLiao2021 commented Jun 20, 2023

Describe/explain the bug
It doesn't seem like the prop gridXValues and theme work on the @nivo/bar server side rendering. I tried version 0.60.0, 0.74.1 and 0.83.0

Example code

const barChartData = [
{ missedCallsCount: 54, outgoingCallsCount: 78, inComingCallsCount: 78, Name: "Olivia Bennett" },
{ missedCallsCount: 147, outgoingCallsCount: 153, inComingCallsCount: 153, Name: "Mason Sinclair" },
{ missedCallsCount: 125, outgoingCallsCount: 223, inComingCallsCount: 223, Name: "Isabella Morgan" },
{ missedCallsCount: 60, outgoingCallsCount: 64, inComingCallsCount: 64, Name: "Amelia Jenkins" },
{ missedCallsCount: 4, outgoingCallsCount: 102, inComingCallsCount: 102, Name: "Ethan Blackwood" },
]

const renderBarChart = () => {
const props = {
  data: barChartData,
  width: 700,
  height: 400,
  indexBy: 'Name',
  keys: ['inComingCallsCount', 'outgoingCallsCount', 'missedCallsCount'],
  minValue: 'auto',
  maxValue: 'auto',
  colors: ["pink", "grey", "blue"],
  layout: 'horizontal',
  enableLabel: false,
  enableGridX: true,
  enableGridY: false,
  gridXValues: [0, 100, 200, 300, 400, 500],
  theme: {
    axis: {
      ticks: {
        text: {
          fontSize: 17,
          fill: "green",
          fontFamily: 'Arial, sans-serif',
          fontWeight: 500
        }
      }
    }
  },
  margin: {
    top: 100,
    right: 100,
    bottom: 40,
    left: 200
  },
  axisBottom: {
    tickValues: [0, 500]
  },

}

const rendered = renderToStaticMarkup(
  React.createElement(
    Bar,
    Object.assign(
      {
        animate: false,
        isInteractive: false,
      },
      props,
    )
  )
);

return `<?xml version="1.0" ?>${rendered}`;
};

Expected behavior

  • The Grid X should show on 0, 100, 200, 300, 400, 500, but it shows on 0, 50, 100,150, 200,250, 300,350 400,450 500

  • The axis left and bottom text style should change , but it doesn’t.

Screenshots
Here is the svg generated on the server

Screenshot 2023-06-20 at 12 23 00 PM

@stale
Copy link

stale bot commented Oct 15, 2023

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@stale stale bot added the stale label Oct 15, 2023
Copy link

stale bot commented Dec 15, 2023

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

@stale stale bot closed this as completed Dec 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant