How to Represent Color to Data

[neel132-zz]

trafficstars

Hi, This is very awesome library. I just want to ask that how can i represent my data to the color filled. If there are thousands of data I cannot statically assign color to each of them.

For Example :-
In screenshot How can i make user understand that upper color is for a and below is for b

Thanks in advance for your help

[marzolfb]

Thanks for the kind words. This is kind of a duplicate of #5 which asks about color support on charts in general but since your screenshot seems to point to use of colors on a StockLine specifically, I'll address that one specifically. Color handling/support across all charts is inconsistent but for this one, you can use the pallete property and pass in an array of r/g/b objects - the order of the colors you specified will be applied in the same order the data sets are specified. Here is a snippet from tweaking the basic StockLine chart in the example app:

let pallete = [
        {'r':25,'g':99,'b':201},
        {'r':24,'g':175,'b':35},
        {'r':190,'g':31,'b':69},
        {'r':100,'g':36,'b':199},
        {'r':214,'g':207,'b':32},
        {'r':198,'g':84,'b':45}
    ]

    return (
      <View>
        <StockLine data={data} options={options} pallete={pallete} xKey='x' yKey='y' />
      </View>
    )

[neel132-zz]

Thanks for your positive response :+1:

[evantahler]

2 notes for folks in the future:

• If you are using pallete, note the non-english spelling
• you will need to still provide the color option, or else see a fairly ambiguous error message

[marzolfb]

@evantahler Different chart types are in different "stages of evolution" in how one specifies color options. On your second point above, which chart type are you referring to specifically? I am surprised by the behavior you've observed (since I have not yet witnessed it) - we should probably track this in a separate issue and get it cleaned up. Would you be willing to open a new issue and specify the cart type(s) its applicable to?

[evantahler]

It was <StockLine>, per your example.
Using React Native v0.41.2, an "unhandled promise rejection"-type error occurs without suppling the color option in options.

[marzolfb]

Reopening this as we should address the error @evantahler mentions when using the pallette option without also using the color option.

As a side note when I try reproducing this on an iOS emulator, I get:

undefined is not an object (evaluating 'color.color')

rather than an "unhandled promise rejection"-type error as mentioned above. I'm assuming these are similar errors.

[shrupa]

Hi,

I am in a similar situation. I need to change the colors in line graph and following the instructions above, getting "Unhandled promise rejection" error. Any help is greatly appreciated!

[marzolfb]

@shrupa Just double-checking, did you see the note from evantahler above the need to use both pallette and color together?. Are you still seeing an error when you use that workaround? If so, do you have some example code/configuration that reproduces the problem?

[shrupa]

@marzolfb Yes, I am still getting the error when using both color and pallete properties as below- let options = { width: 340, height: 250, color: '#078B89', pallete : [{'r':25,'g':99,'b':201}, {'r':24,'g':175,'b':35}, {'r':190,'g':31,'b':69}, {'r':100,'g':36,'b':199}],

[shrupa]

Sorry, my bad! I had a typo in spelling of pallete. Resolved!