We have updated Flexmonster Software License Agreement, effective as of September 30, 2025 (list of changes)
Get Free Trial
Get Free Trial

Y-axis renders horizontally instead of vertically in production builds

posted on September 28th, 2025

Answered
Bogdan Ciceu asked on September 28, 2025

1. Clear Problem Description

"Y-axis renders horizontally instead of vertically in production builds, but works correctly in development mode"

2. Environment Details

  • Flexmonster version: react-flexmonster 2.9.112
  • React version: 18.2.0
  • Build tool: Vite
  • CSS processing: Tailwind + PostCSS + cssnano

3. The SVG Evidence

Included both SVG outputs, highlighting:

  • Coordinate swapping in tick transforms: translate(0,310.88) → translate(310.88,0)
  • Line orientation changes: x2="-6" y2="0" → y2="6" x2="0"
  • Text anchor changes: text-anchor: end → text-anchor: middle

  • local chart svg generated (using vite): ``<svg width="1171" height="363"><g transform="translate(130.984375, 10)"><g class="fm-y fm-axis"><g class="tick" transform="translate(0,310.87999725341797)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">0.0%</text></g><g class="tick" transform="translate(0,263.05230536827673)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">20,000,000.0%</text></g><g class="tick" transform="translate(0,215.2246134831355)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">40,000,000.0%</text></g><g class="tick" transform="translate(0,167.3969215979943)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">60,000,000.0%</text></g><g class="tick" transform="translate(0,119.56922971285306)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">80,000,000.0%</text></g><g class="tick" transform="translate(0,71.74153782771182)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">100,000,000.0%</text></g><g class="tick" transform="translate(0,23.913845942570596)" style="opacity: 1;"><line x2="-6" y2="0"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">120,000,000.0%</text></g><path class="domain" d="M-6,0H0V310.87999725341797H-6"></path><text class="fm-y fm-axis fm-axis-label fm-title" dy="-0.5em" transform="translate(-110.984375,155.43999862670898) rotate(-90)" style="text-anchor: middle;">Sum of Month Dollar Burn</text><line class="fm-refline" x1="0" x2="1040.015625" y1="263.05230536827673" y2="263.05230536827673"></line><line class="fm-refline" x1="0" x2="1040.015625" y1="215.2246134831355" y2="215.2246134831355"></line><line class="fm-refline" x1="0" x2="1040.015625" y1="167.3969215979943" y2="167.3969215979943"></line><line class="fm-refline" x1="0" x2="1040.015625" y1="119.56922971285306" y2="119.56922971285306"></line><line class="fm-refline" x1="0" x2="1040.015625" y1="71.74153782771182" y2="71.74153782771182"></line><line class="fm-refline" x1="0" x2="1040.015625" y1="23.913845942570596" y2="23.913845942570596"></line></g><g class="fm-x fm-axis" transform="translate(0,310.87999725341797)"><g class="tick" transform="translate(520.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;"></text></g><path class="domain" d="M0,6V0H1040.015625V6"></path><g class="fm-axis-dividers"></g><g class="fm-level" transform="translate(0, 6)"><text class="fm-label" dy="0.38em" transform="translate(520.5, 8)" style="text-anchor: middle; cursor: pointer;">+ 1111<title>Click to expand</title></text></g><text class="fm-x fm-axis fm-title" dy="1.2em" transform="translate(520.0078125, 22.31999969482422)" style="text-anchor: middle;">Components</text></g><g><path class="fm-line" d="M520.5,310.87999725341797Z" style="stroke: rgb(238, 35, 44);"></path><circle class="fm-circle" cx="520.5" cy="310.87999725341797" r="4" style="stroke: rgb(238, 35, 44);"><title>Sum of Month Dollar Burn: $0`

  • and prod svg generated (using vite build): <svg width="1171" height="363"><g transform="translate(835.3492431640625, 10)"><g class="fm-y fm-axis"><g class="tick" transform="translate(310.87999725341797,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">0.0%</text></g><g class="tick" transform="translate(263.05230536827673,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">20,000,000.0%</text></g><g class="tick" transform="translate(215.2246134831355,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">40,000,000.0%</text></g><g class="tick" transform="translate(167.3969215979943,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">60,000,000.0%</text></g><g class="tick" transform="translate(119.56922971285306,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">80,000,000.0%</text></g><g class="tick" transform="translate(71.74153782771182,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">100,000,000.0%</text></g><g class="tick" transform="translate(23.913845942570596,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;">120,000,000.0%</text></g><path class="domain" d="M0,6V0H310.87999725341797V6"></path><text class="fm-y fm-axis fm-axis-label fm-title" dy="-0.5em" transform="translate(-815.3492431640625,155.43999862670898) rotate(-90)" style="text-anchor: middle;">Sum of Month Dollar Burn</text><line class="fm-refline" x1="0" x2="335.6507568359375" y1="263.05230536827673" y2="263.05230536827673"></line><line class="fm-refline" x1="0" x2="335.6507568359375" y1="215.2246134831355" y2="215.2246134831355"></line><line class="fm-refline" x1="0" x2="335.6507568359375" y1="167.3969215979943" y2="167.3969215979943"></line><line class="fm-refline" x1="0" x2="335.6507568359375" y1="119.56922971285306" y2="119.56922971285306"></line><line class="fm-refline" x1="0" x2="335.6507568359375" y1="71.74153782771182" y2="71.74153782771182"></line><line class="fm-refline" x1="0" x2="335.6507568359375" y1="23.913845942570596" y2="23.913845942570596"></line></g><g class="fm-x fm-axis" transform="translate(0,310.87999725341797)"><g class="tick" transform="translate(168.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text dy=".71em" y="9" x="0" style="text-anchor: middle;"></text></g><path class="domain" d="M0,6V0H335.6507568359375V6"></path><g class="fm-axis-dividers"></g><g class="fm-level" transform="translate(0, 6)"><text class="fm-label" dy="0.38em" transform="translate(168.5, 8)" style="text-anchor: middle; cursor: pointer;">+ 1111<title>Click to expand</title></text></g><text class="fm-x fm-axis fm-title" dy="1.2em" transform="translate(167.82537841796875, 22.31999969482422)" style="text-anchor: middle;">Components</text></g><g><path class="fm-line" d="M168.5,310.87999725341797Z" style="stroke: rgb(238, 35, 44);"></path><circle class="fm-circle" cx="168.5" cy="310.87999725341797" r="4" style="stroke: rgb(238, 35, 44);"><title>Sum of Month Dollar Burn: $0`

4. Reproduction Steps

  1. Run yarn dev - Y-axis displays correctly on the left
  2. Run yarn build and serve production build - Y-axis displays horizontally on top
  3. Same data, same configuration, only difference is build mode

5. Suspected Cause

The library appears to be incorrectly detecting axis orientation in production builds, possibly due to:

  • CSS minification affecting layout calculations
  • Container size detection differences
  • JavaScript minification affecting internal logic

The same code and data produces completely different SVG output between dev and production.

Any ideas what configuration may be causing this kind of issues? thank you!

 

3 answers

Public
Nadia Khodakivska Nadia Khodakivska ⋅ Flexmonster ⋅ September 30, 2025

Hello Bogdan,

Thank you for reaching out to us.

Our team could not reproduce the described behavior on our side. Please check if there are any custom configurations in the bundler (Vite) that may affect the CSS styles. You can also try to exclude Flexmonster stylesheets from bundler processing.

Please let us know if it works for you. Looking forward to hearing from you.

Kind regards,
Nadia

Public
Dan Dezmirean ⋅ September 30, 2025

Hello Nadia,

I'm Bogdan's colleauge and I'll follow up on this thread further. 

1) We've checked and the flexmonster's css is added via CDN, 

  <!-- Load Flexmonster CSS from CDN to avoid bundler processing -->
  <link href="https://cdn.flexmonster.com/2.9.112/flexmonster.min.css" rel="stylesheet" />
</head>

we've also forced vite to keep it out of its rollup:

rollupOptions: {
  output: {
    entryFileNames: (_assetInfo) => {
      return `assets/[name]-${isoDateNow}.js
 },
chunkFileNames: (_assetInfo) => {
return assets/[name]-${isoDateNow}.js
 },
assetFileNames: (assetInfo) => {
// Keep Flexmonster CSS separate and unminified
 const fileName = assetInfo.names?.[0] || assetInfo.name || ''
 if (fileName.includes('flexmonster')) {
return assets/flexmonster.[ext]
 }
return assets/[name]-${isoDateNow}.[ext]`
 },
},

2) We've noticed that the svg with the chart that gets rendered in the bundle version has a bigger size than the one running locally (see attached screenshots) 

Waiting for your response, we're completely stuck on this matter. Thank you!

Attachments:
Screenshot 2025-09-30 at 16.16.59.png
Screenshot 2025-09-30 at 16.16.46.png

Public
Nadia Khodakivska Nadia Khodakivska ⋅ Flexmonster ⋅ October 2, 2025

Hello Dan,

Thank you for sharing the details.

In the screenshots provided, we noticed that there are additional styles applied to SVG. We recommend checking if any custom CSS rules might override Flexmonster styles and cause the container to resize.

Please let us know if it helps.

Kind regards,
Nadia

Please login or Register to Submit Answer