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.
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 : '',
)}
Most helpful comment
I solved this by computing a
labelRadixbased on the number of labels I want to show and using that when passing labels to the chart: