react-native-chart-kit
react-native-chart-kit copied to clipboard
Progress Ring: chartConfig.useShadowColorFromDataset Throws console error and breaks page render with type error
Device: Mac OS Catalina Browser: Chrome Version: 6.12.0
When using the chart options useShadowColorFromDataset on Progress Rings console throws an error (see bellow) and rendering is broken (shows white screen) Upon cursory review it looks like data is initially undefined and the logic around AbstractChart.tsx:491:16 is unable to handle an undefined value. setting useShadowColorFromDataset = false fixes the issue, but does not use the colors inside the dataset.
Currently am able to work around by using withCustomBarColorFromData={true} inside the element. Progress ring having access to this property via chartConfig makes it very confusing. This feature is useful across all charts. it would be nice to see some uniformity with config features.
Console error
TypeError: Cannot read properties of undefined (reading 'map')
at t.renderDefs (AbstractChart.tsx:491:16)
at t.render (ProgressChart.tsx:166:17)
at Bi (react-dom.production.min.js:187:188)
at Hi (react-dom.production.min.js:186:173)
at Bs (react-dom.production.min.js:269:427)
at kl (react-dom.production.min.js:250:347)
at wl (react-dom.production.min.js:250:278)
at _l (react-dom.production.min.js:250:138)
at fl (react-dom.production.min.js:243:163)
at react-dom.production.min.js:123:115
Chart config
const chartConfig: AbstractChartConfig = {
backgroundColor: Colors.common.transparent,
backgroundGradientToOpacity: 0,
backgroundGradientFromOpacity: 0,
color: (opacity = 0) => `rgba(0,0,0,${opacity})`,
decimalPlaces: 2,
useShadowColorFromDataset: true,
style: {
borderRadius: 16
}
};
Data Object
const testData: ProgressChartData = {
labels: ['A', 'B', 'C'],
data: [0.1, 0.5, 0.95],
colors: [Colors.common.blue, Colors.common.backgroundGray, Colors.common.alertRed]
};
Chart Element
<ProgressChart
data={data.data}
chartConfig={chartConfig}
absolute
/>