Victory: trouble with dataAttributes to style fill color of bar chart

[janusch]

Somehow I cannot get the dataAttributes prop to play nicely.

I have a simple bar chart and want to set the fill color of the bars with dataAttribute prop, just like in the examples. However, only the first fill color is applied to all bars. The way I understood it is to supply an object array with the prop fill set to a color for each bar.
It is working fine on the documentation/examples page, now I am wondering if I am using a different version of VictoryBar than the example page? Or did I miss some other prop to make this work?

dataAttributes={[
     {fill: "cornflowerblue"},
     {fill: "tomato"},
     {fill: "orange"},
     {fill: "gold"}
 ]}

Here is the whole bar chart:

<VictoryBar
        width={width}
        domain={{x: [0, items.length], y: [0, 100]}}
        data={data}
        dataAttributes={[
            {fill: "cornflowerblue"},
            {fill: "tomato"},
            {fill: "orange"},
            {fill: "gold"}
        ]}
 />

Would be very helpful to hear if you are having similar problems!
Let me know if I should refrain from opening the issues in your repo and rather use SO or alike to solve this kind of issues.

[boygirl]

@janusch the dataAttributes array is used for styling a _series_ of data. If you just have one series of data and you want the bars to be different colors, you can style the data directly like:

data={[
  {x: 1, y: 2, fill: "red", opacity: 0.5...}
  ...
]}

maybe this prop needs a better name...

[janusch]

Thanks a lot for the pointer, worked like a charm! Also upgrade from 0.0.2 to 0.0.3 was flawless.
I am starting to understand victory better and how it translates to the underlying d3 functionality. Does the data prop directly translate to d3's .data() function, or are there limitations?

[boygirl]

Right now the data prop is pretty naive. Just a array (or array of arrays) of data objects that need to have x and y values to work. The data prop is probably going to stay pretty simple, but in the near future we will be adding accessor functions to make it more flexible. What I mean by that is...

data={{[
  {name: "cat", amount: "2234", error: 3},
  {name: "dog", amount: "4567", error: 4},
  {name: "bird", amount: "5555", error: 0}
]}}
x="name"
y={(data) => parseInt(data.amount) + data.error + 1}

• support assigning an arbitrary key name as x or y (as in the x accessor above)
• support assigning and transforming data via a function (as in the y accessor)

[janusch]

Cool, that is a neat idea. I am running the data through similar transformations just to construct the data prop as well. I think it makes a lot of sense to send data into the component as x and y because they are common on a graph, whereas the shape of the data prop is more arbitrary.
Similar to the presentation of the graph, some styling is done via style prop and other times its a prop by itself. I am looking forward to the next releases, ready to adapt to breaking changes ;)

[sibelius]

fill inside data stills works?

[wootencl]

For anyone else that stumbles upon this see here regarding fill and data.

[meerkat-citronella]

For anyone else that stumbles upon this see here regarding fill and data.

how is this supposed to work? where do you put the color in?