palerdot / react-d3-speedometer

React Speedometer component using d3.js ⚛️
https://palerdot.in/react-d3-speedometer/
MIT License
230 stars 57 forks source link

Custom Segment Labels should be an array with length of 10 #178

Open juarez-eliud opened 8 months ago

juarez-eliud commented 8 months ago

Not allow adding more than 10 custom labels: (ncaught Error: Custom Segment Labels should be an array with length of 10 at _renderLabels (index.js:1:1))

<ReactSpeedometer key={vCal} width={width} value={80} needleColor="#464a4f" minValue={0} maxValue={100} valueTextFontSize="30px" paddingVertical={30} ringWidth={35} customSegmentStops={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]} customSegmentLabels={[ { text: '0%', position: 'OUTSIDE', color: '#555', fontSize: '10px', }, { text: '10%', position: 'OUTSIDE', color: '#555', fontSize: '10px', }, { text: '20%', position: 'OUTSIDE', color: '#555', fontSize: '10px', }, { text: '30%', position: 'OUTSIDE', color: '#555', fontSize: '10px', }, { text: '40%', position: 'OUTSIDE', color: '#555', fontSize: '10px', }, { text: '50%', position: 'OUTSIDE', color: '#555', fontSize: '10px', }, { text: '60%', position: 'OUTSIDE', color: '#555', fontSize: '10px', }, { text: '70%', position: 'OUTSIDE', color: '#555', fontSize: '10px', }, { text: '80%', position: 'OUTSIDE', color: '#555', fontSize: '10px', }, { text: '90%', position: 'OUTSIDE', color: '#555', fontSize: '10px', }, { text: '100%', position: 'OUTSIDE', color: '#555', fontSize: '10px', }, ]} segmentColors={[ '#FF3936', '#FF3936', '#FF3936', '#FF3936', '#FF3936', '#FF3936', '#FF3936', '#FF3936', '#FAE230', '#2AC264', ]} needleTransition="easeElastic" needleHeightRatio={0.8} textColor={getTextColor(vCal)} currentValueText="#{value}%" currentValuePlaceholderStyle="#{value}" />