guage chart does not appear as my react app starts and got this in inspect svg[Attributes Style] { width: 0; height: 50; } ,

[hamzatahir-notell]

hamzatahir-notell commented 6 months ago

hamzatahir-notell commented 6 months ago

@antoniolago plz help

antoniolago commented 6 months ago

Hello @hamzatahir-notell can you provide more information about your setup? like react version, your code and/or a sandbox would be helpful in understanding your problem

NelisThomas commented 6 months ago

Also experiencing this issue.

React version: ^18.2.0

We are calling the component in the following manner:

<GaugeComponent
    className='gauge'
    maxValue={100}
    minValue={0}
    pointer={{ color: '#4C4C4C', width: 20 }}
    arc={{ cornerRadius: 0, padding: GAUGE_PADDING, subArcs: SUB_ARCS }}
    type={'semicircle'}
    value={value}
    labels={tickLabels: {
        defaultTickValueConfig: { hide: true },
        defaultTickLineConfig: { hide: true }
    },
    valueLabel: { hide: true }}
/>

Our Gauge component is inside of a tab component. When loading the page on an active tab where the Guage component is present it renders without issue. But when we switch to a different tab that also contains the Guage component, it renders the following SVG:

<svg width="0" height="50"><g transform="translate(-3, 16)"><g class="doughnut" transform="translate(3, 3)"><g class="subArc"><path d="M-2.996,-0.158A3,3,0,0,1,-2.463,-1.712L-2.102,-1.443A2.55,2.55,0,0,0,-2.546,-0.149Z" style="fill: rgb(50, 103, 29);"></path></g><g class="subArc"><path d="M-2.346,-1.87A3,3,0,0,1,-1.009,-2.825L-0.871,-2.396A2.55,2.55,0,0,0,-1.985,-1.601Z" style="fill: rgb(167, 196, 69);"></path></g><g class="subArc"><path d="M-0.821,-2.885A3,3,0,0,1,0.821,-2.885L0.684,-2.457A2.55,2.55,0,0,0,-0.684,-2.457Z" style="fill: rgb(240, 181, 5);"></path></g><g class="subArc"><path d="M1.009,-2.825A3,3,0,0,1,2.346,-1.87L1.985,-1.601A2.55,2.55,0,0,0,0.871,-2.396Z" style="fill: rgb(255, 102, 25);"></path></g><g class="subArc"><path d="M2.463,-1.712A3,3,0,0,1,2.996,-0.158L2.546,-0.149A2.55,2.55,0,0,0,2.102,-1.443Z" style="fill: rgb(207, 6, 2);"></path></g></g><g class="pointer" transform="translate(3, 3)"><path d="M 0 0 L -1.2343490298141935 -1.6989356881873894 L 0 0" fill="#4C4C4C"></path><circle cx="0" cy="0" r="0" fill="#4C4C4C"></circle></g></g></svg>

Even after fiddling with the values I'm unable to get that SVG to display anything. After refreshing the page, (with this tab selected) the component renders without issue

Here's what the SVG is supposed to look like:

<svg width="96" height="70.19418334960938"><g transform="translate(28.68, 28)"><g class="doughnut" transform="translate(19.319999999999993, 19.319999999999993)"><g class="subArc"><path d="M-19.293,-1.02A19.32,19.32,0,0,1,-15.863,-11.028L-13.538,-9.296A16.422,16.422,0,0,0,-16.394,-0.962Z" style="fill: rgb(50, 103, 29);"></path></g><g class="subArc"><path d="M-15.106,-12.045A19.32,19.32,0,0,1,-6.497,-18.195L-5.612,-15.433A16.422,16.422,0,0,0,-12.78,-10.312Z" style="fill: rgb(167, 196, 69);"></path></g><g class="subArc"><path d="M-5.29,-18.582A19.32,19.32,0,0,1,5.29,-18.582L4.405,-15.82A16.422,16.422,0,0,0,-4.405,-15.82Z" style="fill: rgb(240, 181, 5);"></path></g><g class="subArc"><path d="M6.497,-18.195A19.32,19.32,0,0,1,15.106,-12.045L12.78,-10.312A16.422,16.422,0,0,0,5.612,-15.433Z" style="fill: rgb(255, 102, 25);"></path></g><g class="subArc"><path d="M15.863,-11.028A19.32,19.32,0,0,1,19.293,-1.02L16.394,-0.962A16.422,16.422,0,0,0,13.538,-9.296Z" style="fill: rgb(207, 6, 2);"></path></g></g><g class="pointer" transform="translate(19.319999999999993, 19.319999999999993)"><path d="M -2.60956521705583 0.28316010979460127 L -7.949207752003403 -12.553945831926784 L 2.6095652170558297 -3.5087601097946015" fill="#4C4C4C"></path><circle cx="0" cy="-1.6127999999999998" r="3.2255999999999996" fill="#4C4C4C"></circle></g></g></svg>

MohamedBengezi commented 6 months ago

We're also hitting this same exact issue. As a workaround, I've made it so that when the tab that the Gauge is on is selected or switched to, I trigger a state refresh to make the gauges reload. That seems to work so far

hamzatahir-notell commented 6 months ago

// import React, { useEffect, useState } from 'react'; // import GaugeComponent from 'react-gauge-component'; // import './dashboard.css'; // let value = 30; // export const Speed = () => { // return ( // <GaugeComponent // className="guage-chart" // type="semicircle" // labels={{ // // valueLabel: { // // formatTextValue: () => Score ${value}, // // }, // tickLabels: { // hideMinMax: true, // }, // }} // arc={{ // // colorArray: ['#00FF15', '#e6dddc', '#e6dddc'], // padding: 0.0, // cornerRadius: 2.2, // width: 0.1, // subArcs: [ // { // limit: value > 15 ? 15 : value, // color: '#00FF15', // }, // { // limit: value > 15 && value <= 40 ? value : 40, // color: value <= 15 ? '#e6dddc' : '#83ebc3', // }, // { // limit: value > 40 && value <= 60 ? value : 60, // color: value <= 40 ? '#e6dddc' : '#e6e157', // }, // { // limit: value > 60 && value <= 80 ? value : 80, // color: value <= 60 ? '#e6dddc' : '#9c2d2d', // }, // { // limit: value > 80 && value <= 99 ? value : 99, // color: value < 81 ? '#e6dddc' : '#2f31ba', // }, // // { // // limit: value > 90 && value <= 99 ? value : 99, // // color: value < 91 ? '#e6dddc' : '#2f31ba', // // }, // { // limit: 100, // color: '#e6dddc', // }, // ], // }} // pointer={{ // type: 'blob', // animationDelay: 0, // width: 10, // }} // style={{ width: 300, height: 200 }} // value={value} // maxValue={100} // minValue={0} // marginInPercent={{ top: 0.08, bottom: 0.0, left: 0.07, right: 0.07 }} // /> // ); // };

i cant share the whole code because of complexity but this is how i am using the guage. Not using it now because of the issue. When my app starts , guage chart is not visible and inspect shows that svg[Attributes Style] { width: 0; height: 50; } but a slight change in screensize , even when i open inspect... guage appears... and on reload it disappers again.. and on screen size change it appears... i also tried to apdate my state as @MohamedBengezi said.. but no fix... if someone able to fix it then do tell me... Thanks! @antoniolago @NelisThomas

antoniolago commented 6 months ago

Hello guys, thanks for your inputs, I'm trying to reproduce but I may need more information and context, the demo page for example works, so it may have something to do with the way your components are being rendered, a codesandbox with the issue happening would be perfect so I can debug properly, but I'm investigating and will let you know what I find out.

ithustle commented 6 months ago

Same here. When I run my app, the chart doesn't show up. I have to make a change on my code and after a auto refresh of react/vite, then it shows up!! I have the same issue with react-gauge-chart and I moved away and come here looking for something different

rbedemann commented 5 months ago

Does happen for me, too. However, only in some situations. E.g. when I embed this component in a tab from bootstrap, it does not show when I switch to that tab. I have to resize the window by a tiny bit and then it shows up. Maybe that helps.

rbedemann commented 5 months ago

The issue seems to be here: https://github.com/antoniolago/react-gauge-component/blob/e73b83bb3a6fcf8288697f15718ed03da7f44dd8/src/lib/GaugeComponent/hooks/chart.ts#L84

When the element is not being rendered in the DOM (e.g. because it's not displayed due to display: none on itself or a parent element), the getBoundingClientRect() returns 0 for height and width. So the calculcations happen based on that value.

When the element is being displayed later, the re-rendering and re-calculation of those values is not being triggered. However, if you resize the window it is...because there's an eventlistener for the window resize.

So from my point of view, the solution would be to trigger re-rendering for those specific DOM changes in the same way as it happens for a window resize.

rbedemann commented 5 months ago

I added a potential fix via https://github.com/antoniolago/react-gauge-component/pull/41.

Let me know what you think.

antoniolago commented 5 months ago

Just made some tests, @rbedemann is right and his fix solves the issue, thanks for this.

41 is merged and launched in version 1.2.1

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[hamzatahir-notell]

hamzatahir-notell commented 6 months ago

@antoniolago plz help

antoniolago commented 6 months ago

Hello @hamzatahir-notell can you provide more information about your setup? like react version, your code and/or a sandbox would be helpful in understanding your problem

NelisThomas commented 6 months ago

Also experiencing this issue.

React version: ^18.2.0

We are calling the component in the following manner:

<GaugeComponent
    className='gauge'
    maxValue={100}
    minValue={0}
    pointer={{ color: '#4C4C4C', width: 20 }}
    arc={{ cornerRadius: 0, padding: GAUGE_PADDING, subArcs: SUB_ARCS }}
    type={'semicircle'}
    value={value}
    labels={tickLabels: {
        defaultTickValueConfig: { hide: true },
        defaultTickLineConfig: { hide: true }
    },
    valueLabel: { hide: true }}
/>

Our Gauge component is inside of a tab component. When loading the page on an active tab where the Guage component is present it renders without issue. But when we switch to a different tab that also contains the Guage component, it renders the following SVG:

<svg width="0" height="50"><g transform="translate(-3, 16)"><g class="doughnut" transform="translate(3, 3)"><g class="subArc"><path d="M-2.996,-0.158A3,3,0,0,1,-2.463,-1.712L-2.102,-1.443A2.55,2.55,0,0,0,-2.546,-0.149Z" style="fill: rgb(50, 103, 29);"></path></g><g class="subArc"><path d="M-2.346,-1.87A3,3,0,0,1,-1.009,-2.825L-0.871,-2.396A2.55,2.55,0,0,0,-1.985,-1.601Z" style="fill: rgb(167, 196, 69);"></path></g><g class="subArc"><path d="M-0.821,-2.885A3,3,0,0,1,0.821,-2.885L0.684,-2.457A2.55,2.55,0,0,0,-0.684,-2.457Z" style="fill: rgb(240, 181, 5);"></path></g><g class="subArc"><path d="M1.009,-2.825A3,3,0,0,1,2.346,-1.87L1.985,-1.601A2.55,2.55,0,0,0,0.871,-2.396Z" style="fill: rgb(255, 102, 25);"></path></g><g class="subArc"><path d="M2.463,-1.712A3,3,0,0,1,2.996,-0.158L2.546,-0.149A2.55,2.55,0,0,0,2.102,-1.443Z" style="fill: rgb(207, 6, 2);"></path></g></g><g class="pointer" transform="translate(3, 3)"><path d="M 0 0 L -1.2343490298141935 -1.6989356881873894 L 0 0" fill="#4C4C4C"></path><circle cx="0" cy="0" r="0" fill="#4C4C4C"></circle></g></g></svg>

Even after fiddling with the values I'm unable to get that SVG to display anything. After refreshing the page, (with this tab selected) the component renders without issue

Here's what the SVG is supposed to look like:

<svg width="96" height="70.19418334960938"><g transform="translate(28.68, 28)"><g class="doughnut" transform="translate(19.319999999999993, 19.319999999999993)"><g class="subArc"><path d="M-19.293,-1.02A19.32,19.32,0,0,1,-15.863,-11.028L-13.538,-9.296A16.422,16.422,0,0,0,-16.394,-0.962Z" style="fill: rgb(50, 103, 29);"></path></g><g class="subArc"><path d="M-15.106,-12.045A19.32,19.32,0,0,1,-6.497,-18.195L-5.612,-15.433A16.422,16.422,0,0,0,-12.78,-10.312Z" style="fill: rgb(167, 196, 69);"></path></g><g class="subArc"><path d="M-5.29,-18.582A19.32,19.32,0,0,1,5.29,-18.582L4.405,-15.82A16.422,16.422,0,0,0,-4.405,-15.82Z" style="fill: rgb(240, 181, 5);"></path></g><g class="subArc"><path d="M6.497,-18.195A19.32,19.32,0,0,1,15.106,-12.045L12.78,-10.312A16.422,16.422,0,0,0,5.612,-15.433Z" style="fill: rgb(255, 102, 25);"></path></g><g class="subArc"><path d="M15.863,-11.028A19.32,19.32,0,0,1,19.293,-1.02L16.394,-0.962A16.422,16.422,0,0,0,13.538,-9.296Z" style="fill: rgb(207, 6, 2);"></path></g></g><g class="pointer" transform="translate(19.319999999999993, 19.319999999999993)"><path d="M -2.60956521705583 0.28316010979460127 L -7.949207752003403 -12.553945831926784 L 2.6095652170558297 -3.5087601097946015" fill="#4C4C4C"></path><circle cx="0" cy="-1.6127999999999998" r="3.2255999999999996" fill="#4C4C4C"></circle></g></g></svg>

MohamedBengezi commented 6 months ago

We're also hitting this same exact issue. As a workaround, I've made it so that when the tab that the Gauge is on is selected or switched to, I trigger a state refresh to make the gauges reload. That seems to work so far

hamzatahir-notell commented 6 months ago

// import React, { useEffect, useState } from 'react'; // import GaugeComponent from 'react-gauge-component'; // import './dashboard.css'; // let value = 30; // export const Speed = () => { // return ( // <GaugeComponent // className="guage-chart" // type="semicircle" // labels={{ // // valueLabel: { // // formatTextValue: () => Score ${value}, // // }, // tickLabels: { // hideMinMax: true, // }, // }} // arc={{ // // colorArray: ['#00FF15', '#e6dddc', '#e6dddc'], // padding: 0.0, // cornerRadius: 2.2, // width: 0.1, // subArcs: [ // { // limit: value > 15 ? 15 : value, // color: '#00FF15', // }, // { // limit: value > 15 && value <= 40 ? value : 40, // color: value <= 15 ? '#e6dddc' : '#83ebc3', // }, // { // limit: value > 40 && value <= 60 ? value : 60, // color: value <= 40 ? '#e6dddc' : '#e6e157', // }, // { // limit: value > 60 && value <= 80 ? value : 80, // color: value <= 60 ? '#e6dddc' : '#9c2d2d', // }, // { // limit: value > 80 && value <= 99 ? value : 99, // color: value < 81 ? '#e6dddc' : '#2f31ba', // }, // // { // // limit: value > 90 && value <= 99 ? value : 99, // // color: value < 91 ? '#e6dddc' : '#2f31ba', // // }, // { // limit: 100, // color: '#e6dddc', // }, // ], // }} // pointer={{ // type: 'blob', // animationDelay: 0, // width: 10, // }} // style={{ width: 300, height: 200 }} // value={value} // maxValue={100} // minValue={0} // marginInPercent={{ top: 0.08, bottom: 0.0, left: 0.07, right: 0.07 }} // /> // ); // };

i cant share the whole code because of complexity but this is how i am using the guage. Not using it now because of the issue. When my app starts , guage chart is not visible and inspect shows that svg[Attributes Style] { width: 0; height: 50; } but a slight change in screensize , even when i open inspect... guage appears... and on reload it disappers again.. and on screen size change it appears... i also tried to apdate my state as @MohamedBengezi said.. but no fix... if someone able to fix it then do tell me... Thanks! @antoniolago @NelisThomas

antoniolago commented 6 months ago

Hello guys, thanks for your inputs, I'm trying to reproduce but I may need more information and context, the demo page for example works, so it may have something to do with the way your components are being rendered, a codesandbox with the issue happening would be perfect so I can debug properly, but I'm investigating and will let you know what I find out.

ithustle commented 6 months ago

Same here. When I run my app, the chart doesn't show up. I have to make a change on my code and after a auto refresh of react/vite, then it shows up!! I have the same issue with react-gauge-chart and I moved away and come here looking for something different

rbedemann commented 5 months ago

Does happen for me, too. However, only in some situations. E.g. when I embed this component in a tab from bootstrap, it does not show when I switch to that tab. I have to resize the window by a tiny bit and then it shows up. Maybe that helps.

rbedemann commented 5 months ago

The issue seems to be here: https://github.com/antoniolago/react-gauge-component/blob/e73b83bb3a6fcf8288697f15718ed03da7f44dd8/src/lib/GaugeComponent/hooks/chart.ts#L84

When the element is not being rendered in the DOM (e.g. because it's not displayed due to display: none on itself or a parent element), the getBoundingClientRect() returns 0 for height and width. So the calculcations happen based on that value.

When the element is being displayed later, the re-rendering and re-calculation of those values is not being triggered. However, if you resize the window it is...because there's an eventlistener for the window resize.

So from my point of view, the solution would be to trigger re-rendering for those specific DOM changes in the same way as it happens for a window resize.

rbedemann commented 5 months ago

I added a potential fix via https://github.com/antoniolago/react-gauge-component/pull/41.

Let me know what you think.

antoniolago commented 5 months ago

Just made some tests, @rbedemann is right and his fix solves the issue, thanks for this.

41 is merged and launched in version 1.2.1

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[hamzatahir-notell]

@antoniolago plz help

[antoniolago]

Hello @hamzatahir-notell can you provide more information about your setup? like react version, your code and/or a sandbox would be helpful in understanding your problem

[NelisThomas]

Also experiencing this issue.

React version: ^18.2.0

We are calling the component in the following manner:

<GaugeComponent
    className='gauge'
    maxValue={100}
    minValue={0}
    pointer={{ color: '#4C4C4C', width: 20 }}
    arc={{ cornerRadius: 0, padding: GAUGE_PADDING, subArcs: SUB_ARCS }}
    type={'semicircle'}
    value={value}
    labels={tickLabels: {
        defaultTickValueConfig: { hide: true },
        defaultTickLineConfig: { hide: true }
    },
    valueLabel: { hide: true }}
/>

Our Gauge component is inside of a tab component. When loading the page on an active tab where the Guage component is present it renders without issue. But when we switch to a different tab that also contains the Guage component, it renders the following SVG:

<svg width="0" height="50"><g transform="translate(-3, 16)"><g class="doughnut" transform="translate(3, 3)"><g class="subArc"><path d="M-2.996,-0.158A3,3,0,0,1,-2.463,-1.712L-2.102,-1.443A2.55,2.55,0,0,0,-2.546,-0.149Z" style="fill: rgb(50, 103, 29);"></path></g><g class="subArc"><path d="M-2.346,-1.87A3,3,0,0,1,-1.009,-2.825L-0.871,-2.396A2.55,2.55,0,0,0,-1.985,-1.601Z" style="fill: rgb(167, 196, 69);"></path></g><g class="subArc"><path d="M-0.821,-2.885A3,3,0,0,1,0.821,-2.885L0.684,-2.457A2.55,2.55,0,0,0,-0.684,-2.457Z" style="fill: rgb(240, 181, 5);"></path></g><g class="subArc"><path d="M1.009,-2.825A3,3,0,0,1,2.346,-1.87L1.985,-1.601A2.55,2.55,0,0,0,0.871,-2.396Z" style="fill: rgb(255, 102, 25);"></path></g><g class="subArc"><path d="M2.463,-1.712A3,3,0,0,1,2.996,-0.158L2.546,-0.149A2.55,2.55,0,0,0,2.102,-1.443Z" style="fill: rgb(207, 6, 2);"></path></g></g><g class="pointer" transform="translate(3, 3)"><path d="M 0 0 L -1.2343490298141935 -1.6989356881873894 L 0 0" fill="#4C4C4C"></path><circle cx="0" cy="0" r="0" fill="#4C4C4C"></circle></g></g></svg>

Even after fiddling with the values I'm unable to get that SVG to display anything. After refreshing the page, (with this tab selected) the component renders without issue

Here's what the SVG is supposed to look like:

<svg width="96" height="70.19418334960938"><g transform="translate(28.68, 28)"><g class="doughnut" transform="translate(19.319999999999993, 19.319999999999993)"><g class="subArc"><path d="M-19.293,-1.02A19.32,19.32,0,0,1,-15.863,-11.028L-13.538,-9.296A16.422,16.422,0,0,0,-16.394,-0.962Z" style="fill: rgb(50, 103, 29);"></path></g><g class="subArc"><path d="M-15.106,-12.045A19.32,19.32,0,0,1,-6.497,-18.195L-5.612,-15.433A16.422,16.422,0,0,0,-12.78,-10.312Z" style="fill: rgb(167, 196, 69);"></path></g><g class="subArc"><path d="M-5.29,-18.582A19.32,19.32,0,0,1,5.29,-18.582L4.405,-15.82A16.422,16.422,0,0,0,-4.405,-15.82Z" style="fill: rgb(240, 181, 5);"></path></g><g class="subArc"><path d="M6.497,-18.195A19.32,19.32,0,0,1,15.106,-12.045L12.78,-10.312A16.422,16.422,0,0,0,5.612,-15.433Z" style="fill: rgb(255, 102, 25);"></path></g><g class="subArc"><path d="M15.863,-11.028A19.32,19.32,0,0,1,19.293,-1.02L16.394,-0.962A16.422,16.422,0,0,0,13.538,-9.296Z" style="fill: rgb(207, 6, 2);"></path></g></g><g class="pointer" transform="translate(19.319999999999993, 19.319999999999993)"><path d="M -2.60956521705583 0.28316010979460127 L -7.949207752003403 -12.553945831926784 L 2.6095652170558297 -3.5087601097946015" fill="#4C4C4C"></path><circle cx="0" cy="-1.6127999999999998" r="3.2255999999999996" fill="#4C4C4C"></circle></g></g></svg>

[MohamedBengezi]

We're also hitting this same exact issue. As a workaround, I've made it so that when the tab that the Gauge is on is selected or switched to, I trigger a state refresh to make the gauges reload. That seems to work so far

[hamzatahir-notell]

// import React, { useEffect, useState } from 'react'; // import GaugeComponent from 'react-gauge-component'; // import './dashboard.css'; // let value = 30; // export const Speed = () => { // return ( // <GaugeComponent // className="guage-chart" // type="semicircle" // labels={{ // // valueLabel: { // // formatTextValue: () => Score ${value}, // // }, // tickLabels: { // hideMinMax: true, // }, // }} // arc={{ // // colorArray: ['#00FF15', '#e6dddc', '#e6dddc'], // padding: 0.0, // cornerRadius: 2.2, // width: 0.1, // subArcs: [ // { // limit: value > 15 ? 15 : value, // color: '#00FF15', // }, // { // limit: value > 15 && value <= 40 ? value : 40, // color: value <= 15 ? '#e6dddc' : '#83ebc3', // }, // { // limit: value > 40 && value <= 60 ? value : 60, // color: value <= 40 ? '#e6dddc' : '#e6e157', // }, // { // limit: value > 60 && value <= 80 ? value : 80, // color: value <= 60 ? '#e6dddc' : '#9c2d2d', // }, // { // limit: value > 80 && value <= 99 ? value : 99, // color: value < 81 ? '#e6dddc' : '#2f31ba', // }, // // { // // limit: value > 90 && value <= 99 ? value : 99, // // color: value < 91 ? '#e6dddc' : '#2f31ba', // // }, // { // limit: 100, // color: '#e6dddc', // }, // ], // }} // pointer={{ // type: 'blob', // animationDelay: 0, // width: 10, // }} // style={{ width: 300, height: 200 }} // value={value} // maxValue={100} // minValue={0} // marginInPercent={{ top: 0.08, bottom: 0.0, left: 0.07, right: 0.07 }} // /> // ); // };

i cant share the whole code because of complexity but this is how i am using the guage. Not using it now because of the issue. When my app starts , guage chart is not visible and inspect shows that svg[Attributes Style] { width: 0; height: 50; } but a slight change in screensize , even when i open inspect... guage appears... and on reload it disappers again.. and on screen size change it appears... i also tried to apdate my state as @MohamedBengezi said.. but no fix... if someone able to fix it then do tell me... Thanks! @antoniolago @NelisThomas

[antoniolago]

Hello guys, thanks for your inputs, I'm trying to reproduce but I may need more information and context, the demo page for example works, so it may have something to do with the way your components are being rendered, a codesandbox with the issue happening would be perfect so I can debug properly, but I'm investigating and will let you know what I find out.

[ithustle]

Same here. When I run my app, the chart doesn't show up. I have to make a change on my code and after a auto refresh of react/vite, then it shows up!! I have the same issue with react-gauge-chart and I moved away and come here looking for something different

[rbedemann]

Does happen for me, too. However, only in some situations. E.g. when I embed this component in a tab from bootstrap, it does not show when I switch to that tab. I have to resize the window by a tiny bit and then it shows up. Maybe that helps.

[rbedemann]

The issue seems to be here: https://github.com/antoniolago/react-gauge-component/blob/e73b83bb3a6fcf8288697f15718ed03da7f44dd8/src/lib/GaugeComponent/hooks/chart.ts#L84

When the element is not being rendered in the DOM (e.g. because it's not displayed due to display: none on itself or a parent element), the getBoundingClientRect() returns 0 for height and width. So the calculcations happen based on that value.

When the element is being displayed later, the re-rendering and re-calculation of those values is not being triggered. However, if you resize the window it is...because there's an eventlistener for the window resize.

So from my point of view, the solution would be to trigger re-rendering for those specific DOM changes in the same way as it happens for a window resize.

[rbedemann]

I added a potential fix via https://github.com/antoniolago/react-gauge-component/pull/41.

Let me know what you think.

[antoniolago]

Just made some tests, @rbedemann is right and his fix solves the issue, thanks for this.

41 is merged and launched in version 1.2.1