Solid bars in bar chart with react-native-chart-kit

问题

I am using https://www.npmjs.com/package/react-native-chart-kit and am trying to make a chart to match the following design spec:

I can get most of the options to work with the code attached at the end of this question, however I can't seem to figure out how to remove the opacity of each individual bar, so it ends up looking like this:

I've been poring through the source code and playing with props and styles to no avail.. any help would be greatly appreciated!

const { width: screenWidth } = Dimensions.get('window');

export type DataSet = {
  data: Array<Number>;
};

export type BarChartData = {
  labels: Array<String>;
  datasets: Array<DataSet>;
};

export interface SalesChartProps {
  data: BarChartData;
}

const chartConfig = {
  backgroundGradientFrom: '#Ffffff',
  backgroundGradientTo: '#ffffff',
  barPercentage: 1.3,
  decimalPlaces: 0, // optional, defaults to 2dp
  color: (opacity = 1) => `rgba(1, 122, 205, 1)`,
  labelColor: (opacity = 1) => `rgba(0, 0, 0, 1)`,

  style: {
    borderRadius: 16,
    fontFamily: 'Bogle-Regular',
  },
  propsForBackgroundLines: {
    strokeWidth: 1,
    stroke: '#efefef',
    strokeDasharray: '0',
  },
  propsForLabels: {
    fontFamily: 'Bogle-Regular',
  },
};

const SalesBarChart: FunctionComponent<SalesChartProps> = (
  props: SalesChartProps,
) => (
  <>
    <Text style={styles.chartTitle}> Sales </Text>
    <BarChart
      style={styles.graphStyle}
      showBarTops={false}
      showValuesOnTopOfBars={true}
      withInnerLines={true}
      segments={3}
      data={props.data}
      width={screenWidth - 15}
      height={175}
      yAxisLabel=""
      chartConfig={chartConfig}
      verticalLabelRotation={0}
    />
  </>
);

const styles = StyleSheet.create<{
  graphStyle: ViewStyle;
  chartTitle: TextStyle;
}>({
  graphStyle: {
    flex: 1,
    paddingRight: 25,
  },
  chartTitle: {
    paddingLeft: 20,
    paddingBottom: 20,
    paddingTop: 10,
    fontFamily: 'Bogle-Regular',
    fontSize: 16,
  },
})

//storybook file:
const data: BarChartData = {
  labels: ['9/19', '9/20', '9/21', '9/22', '9/23', '9/24', '9/25'],
  datasets: [
    {
      data: [5, 0, 2, 4, 6, 3, 0],
    },
  ],
};

const props = {
  data,
};

storiesOf('SalesChart', module)
  .addDecorator(withKnobs)
  .add('BarChart', () => <SalesChart {...props} />);

回答1:

I don't think it's possible to do this as of now for the BarChart component as the fill of the Rect components that represent the bars are all set to a gradient fillShadowGradient (https://github.com/indiespirit/react-native-chart-kit/blob/master/src/BarChart.tsx).

You can however change the color for these bars and their opacity by changing the following properties in the chartConfig:

fillShadowGradient: 'blue',
fillShadowGradientOpacity: 1,

If the opacity is set to 1 the color does look more solid, but the gradient remains.

An alternative approach is to use a StackedBarChart and put each element in your data in their own array so the bars don't stack:

const CustomStackedChart = () => {
  const data = {
    labels: ['9/19', '9/20', '9/21', '9/22', '9/23', '9/24', '9/25'],
    legend: [],
    data: [[5], [0], [2], [4], [6], [3], [0]],
    barColors: ['blue'],
  };
  return (
    <StackedBarChart
      style={styles.graphStyle}
      segments={3}
      data={data}
      width={300}
      height={175}
      chartConfig={chartConfig}
    />
  );
};

The StackedBarChart does allow a solid color. The color can be set by setting the barColors prop inside the data object.

The problem with this approach is that you can't have the bar labels on top of the bars like you have in your picture:

If you really want to create something custom you could create a custom chart component that extends AbstractChart, but this is quite a lot of work to create if the only thing you really want to change is the color of the bars to solid.

https://github.com/indiespirit/react-native-chart-kit#abstract-chart.

来源：https://stackoverflow.com/questions/64035350/solid-bars-in-bar-chart-with-react-native-chart-kit

标签

react-native

react-native-chart-kit