title: Solid bars in bar chart with react-native-chart-kit
body: <p>I am using <a href="https://www.npmjs.com/package/react-native-chart-kit" rel="nofollow noreferrer">https://www.npmjs.com/package/react-native-chart-kit</a> and am trying to make a chart to match the following design spec:</p>
  <p><a href="https://i.stack.imgur.com/UUvkp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UUvkp.png" alt="enter image description here" /></a></p>
  <p>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:</p>
  <p><a href="https://i.stack.imgur.com/KbCZG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KbCZG.png" alt="enter image description here" /></a></p>
  <p>I've been poring through the source code and playing with props and styles to no avail.. any help would be greatly appreciated!</p>
  <pre><code>const { width: screenWidth } = Dimensions.get('window');
  
  export type DataSet = {
    data: Array&lt;Number&gt;;
  };
  
  export type BarChartData = {
    labels: Array&lt;String&gt;;
    datasets: Array&lt;DataSet&gt;;
  };
  
  export interface SalesChartProps {
    data: BarChartData;
  }
  
  const chartConfig = {
    backgroundGradientFrom: '#Ffffff',
    backgroundGradientTo: '#ffffff',
    barPercentage: 1.3,
    decimalPlaces: 0, // optional, defaults to 2dp
    color: (opacity = 1) =&gt; `rgba(1, 122, 205, 1)`,
    labelColor: (opacity = 1) =&gt; `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&lt;SalesChartProps&gt; = (
    props: SalesChartProps,
  ) =&gt; (
    &lt;&gt;
      &lt;Text style={styles.chartTitle}&gt; Sales &lt;/Text&gt;
      &lt;BarChart
        style={styles.graphStyle}
        showBarTops={false}
        showValuesOnTopOfBars={true}
        withInnerLines={true}
        segments={3}
        data={props.data}
        width={screenWidth - 15}
        height={175}
        yAxisLabel=&quot;&quot;
        chartConfig={chartConfig}
        verticalLabelRotation={0}
      /&gt;
    &lt;/&gt;
  );
  
  const styles = StyleSheet.create&lt;{
    graphStyle: ViewStyle;
    chartTitle: TextStyle;
  }&gt;({
    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', () =&gt; &lt;SalesChart {...props} /&gt;);
  
  </code></pre>