palerdot/react-d3-speedometer

Responsive for small screen

Closed this issue · 1 comments

Hi all, Hi @palerdot ,
I'm using react-d3-speedometer and I created a speedometer successfully. Now a day, I have to create 6 speedometers on a line in small screen, so I had set width = 120 and height = 60 and I used fluidWidth={true} option.
This is my code:

    <div width: "120px",
    height: "60px",
    'text-align': 'center'}}
    <ReactSpeedometer
      value={value}
      fluidWidth={true}
      forceRender={true}
      segments={segments ? segments : 3}
      needleTransitionDuration={duration ? duration : 600}
      maxValue={maxValue ? maxValue : 600}
      startColor={startColor ? startColor : "green"}
      endColor={endColor ? endColor : "red"}
      needleTransition="easeElastic"
      currentValueText="${value}"
    /> </div>

As a result:
44444444444

Please have a look into it and kindly suggest me to resolve the issue.
Sorry for my english.
Thanhnv from Thinklabs - Vietnam

@thanh121094 Right now, mobile/small screen display is a constraint in this library because there is no reliable way to scale all the different small components (like needle, subsegments, text) etc in a coherent way. I will gladly consider PRs for this. But this is going to be a limitation for the time being.