Custom Segment Labels should be an array with length of 10

[juarez-eliud]

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}"
/>

[emmethamell]

The customSegmentLabels array must have length - 1 elements based on customSegmentStops. If you want 11 custom labels, you need 12 values in customSegmentStops array.

Change customSegmentStops={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]} to customSegmentStops={[0, 9, 18, 27, 36, 45, 54, 63, 72, 81, 90, 100]}