Bar Chart colors

[ahmedu007]

Hi,

Thanks for the amazing Library, it looks really nice and performs well too. Just a question. Is there a way to change the colours of the individual barchats instead of rendering them uniformly in 1 color?

e.g: let sampleData = [ { seriesName: 'test2', data: [140, 160], color: [colors.lightNavy, colors.Red], }, ];

So that both the charts have their own individual colors?. I've tried passing primaryColor, secondary and other props, but nothing seems to be working. Any help or advice would be appreciated.

Thanks

[kingwang09]

@ahmedu007

Thank you for using react native pure chart.

we can only one color by one series.

if you want to individual color by data, you should split data by multi series.

[ahmedu007]

Thankyou @kingwang09 for such a quick response. I've tried that, but then the width of the bars get really narrow. I only have 2 bars to render on the whole screen so I need them to be quite wide. i've set the defaultColumnWidth to 500 and it works, but is there a way to give a gap in the middle of the two bars?

[kingwang09]

@ahmedu007

can i show your applied screen?

[kingwang09]

if you want to give a gap in the middle of the two bars, can you try using defaultColumnMargin? (not try using defaultColumnWidth)

[ahmedu007]

<PureChart
            height={height(55.2)}
            defaultColumnWidth={width(50)}
            data={sampleData}
            defaultColumnMargin={40}
            type="bar"
            numberOfYAxisGuideLine={5}
            backgroundColor="rgba(0,0,0,0.5)"
            // highlightColor="yellow"
            // primaryColor="blue"
          />

So this is what I want to do. 2 different bars with different colours. I've tried using defaultColumnMargin as you suggested already, but your default right margin for the 0 index is set to 0 in the source code. Ideally if there is a prop that can be set on individual charts it would be perfect.

@kingwang09

[kingwang09]

i understand what you mean. we'll try implement individual column gap until next release.

thanks for using our charts. :)

[ahmedu007]

Thankyou. Ideally if you can implement a way to pass a colour prop to individual bar charts (not a multiSeries) that would be awesome

[JP6720]

How to set different colors for all bars in single series.https://www.google.com/url?sa=i&url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F50501714%2Frender-bar-chart-with-different-colors-in-react-native&psig=AOvVaw3MfiJGIYYyk5GobB1xP9zh&ust=1588427154810000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJi_89bmkukCFQAAAAAdAAAAABAI