How to show 2 text inputs with new lines on labels? Example: Weekly, Jan 1 - Jan 7

[smokiebacon]

How can one do a new line on the label data? I want to show weekly bars, so for example, 1 bar says Jan 1 on top, Jan 7 on bottom. The next bar will say Jan 8, then Jan 15 on bottom.

So far I have this (used chatGPT to generate part of this)
const aggregateDataByDate = (events) => {
const aggregatedData = {}

// Loop through the data and sum values for the same dates
events.forEach((entry) => {
  const date = entry.date
  const value = entry.duration
  // console.log("🚀 ~ file: TimelineSummary.js:15 ~ events.forEach ~ value:", value)

  if (aggregatedData[date]) {
    // If date exists in aggregatedData, add the value
    aggregatedData[date] += value
  } else {
    // If date doesn't exist, initialize it with the value
    aggregatedData[date] = value
  }
})

// Convert aggregatedData to the format expected by the chart library
const chartData = Object.keys(aggregatedData).map((date) => {
  console.log("🚀 ~ chartData ~ date:", date)
  return {
    value: aggregatedData[date],
    label: //HOW TO SHOW NEW LINES? 2 labels, 1 top 1 bottom
    labelTextStyle: { color: "white", fontSize: 10 },
  }
})
return chartData

}
const aggregatedData = aggregateDataByDate(events)

function getBiggestYAxis() {
const maxYAxisChartNumber = aggregatedData.map((item) => item.value)
return Math.max(...maxYAxisChartNumber)
}

const totalDuration = events.reduce((sum, event) => {
return sum + event.duration
}, 0)
console.log(Dimensions.get("screen").width, events.length)
return (
<>

Duration {totalDuration.toFixed(2)}
{new Date().getFullYear()}

<View style={{ marginTop: 10 }}>
<BarChart
height={90}
maxValue={getBiggestYAxis()}
data={aggregateDataByDate(events)}
spacing={40}
barWidth={40}
bar
labelWidth={30}
frontColor={"pink"}
noOfSections={3}
yAxisTextStyle={{ color: "white" }}
width={Dimensions.get("screen").width - 70}
/>

</>

[Abhinandan-Kushwaha]

Hi @smokiebacon
You can set the label in the data array as a single string, like- Jan 1 Jan 7
And add the prop xAxisTextNumberOfLines={2} to the <BarChart> component.