React-native-chart-kit: <LineChart> with responsive number of x labels?

Created on 17 Jun 2020  路  1Comment  路  Source: indiespirit/react-native-chart-kit

I have an array of labels but the chart always shows them all and if there is not enough space they are all overlapping.

Is there no way for it to dynamically render only the number of labels that will fit in the horizontal space available? Like in Chart.js https://www.chartjs.org/samples/latest/charts/line/basic.html when you click 'add data' a bunch they dynamically only show however many fit and they never overlap.

Most helpful comment

I solved this by computing a labelRadix based on the number of labels I want to show and using that when passing labels to the chart:

const labelRadix = Math.max(Math.floor(labels.length / maxLabels), 1)

...

labels={labels.map((label, idx) =>
    idx % labelRadix === 0 ? label : '',
)}

>All comments

I solved this by computing a labelRadix based on the number of labels I want to show and using that when passing labels to the chart:

const labelRadix = Math.max(Math.floor(labels.length / maxLabels), 1)

...

labels={labels.map((label, idx) =>
    idx % labelRadix === 0 ? label : '',
)}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

trungtin2202 picture trungtin2202  路  3Comments

azui007 picture azui007  路  6Comments

NS-BOBBY-C picture NS-BOBBY-C  路  5Comments

briaclg picture briaclg  路  4Comments

violabg picture violabg  路  6Comments