Giter Site home page Giter Site logo

Comments (8)

kingwang09 avatar kingwang09 commented on August 17, 2024 3

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

thanks for using our charts. :)

from react-native-pure-chart.

ahmedu007 avatar ahmedu007 commented on August 17, 2024 3

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

from react-native-pure-chart.

kingwang09 avatar kingwang09 commented on August 17, 2024

@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.

from react-native-pure-chart.

ahmedu007 avatar ahmedu007 commented on August 17, 2024

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?

from react-native-pure-chart.

kingwang09 avatar kingwang09 commented on August 17, 2024

@ahmedu007

can i show your applied screen?

from react-native-pure-chart.

kingwang09 avatar kingwang09 commented on August 17, 2024

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

from react-native-pure-chart.

ahmedu007 avatar ahmedu007 commented on August 17, 2024

simulator screen shot - iphone 8 plus - 2018-05-10 at 12 30 05

<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

from react-native-pure-chart.

JP6720 avatar JP6720 commented on August 17, 2024

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

from react-native-pure-chart.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.