search

antoniolago / react-gauge-component

React gauge component for data visualization.
https://antoniolago.github.io/react-gauge-component/
MIT License
132 stars 19 forks source link

Error Config Stick label #51

Open buingocdu opened 2 months ago

buingocdu commented 2 months ago

I was try example, but tickLabels config not working

test

const kbitsToMbits = (value) => { if (value >= 1000) { value = value / 1000; if (Number.isInteger(value)) { return value.toFixed(0) + ' mbit/s'; } else { return value.toFixed(1) + ' mbit/s'; } } else { return value.toFixed(0) + ' kbit/s'; } } <GaugeComponent arc={{ nbSubArcs: 150, colorArray: ['#5BE12C', '#F5CD19', '#EA4228'], width: 0.3, padding: 0.003 }} labels={{ valueLabel: { fontSize: 40, formatTextValue: kbitsToMbits }, tickLabels: { type: "outer", ticks: [ { value: 100 }, { value: 200 }, { value: 300 }, { value: 400 }, { value: 500 }, { value: 600 }, { value: 700 }, { value: 800 }, { value: 900 }, { value: 1000 }, { value: 1500 }, { value: 2000 }, { value: 2500 }, { value: 3000 }, ], valueConfig: { formatTextValue: kbitsToMbits } } }} value={900} maxValue={3000} />

bondarev123 commented 3 weeks ago

I alse have a problem with ticks and labels. I tried to place labels closer to the chart but didn't have any effect. Also tick color change didn't work. I think these non-working settings are connected