react-native-chart-kit icon indicating copy to clipboard operation
react-native-chart-kit copied to clipboard

Progress Ring: chartConfig.useShadowColorFromDataset Throws console error and breaks page render with type error

Open bElliott06 opened this issue 2 years ago • 0 comments

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
        />

bElliott06 avatar Jun 14 '22 13:06 bElliott06