Nitro App Builder: How do I configure colors used in Column chart?

[jcallahan]

Have four data values to be displayed "stacked" in a column chart, and would like each data value to be assigned the same unique color value when rendered across each of the year.

The example renderer given in the column chart documentation doesn't provide sufficient information to be useful to me- it sets the color for all bars to be the same, and doesn't address how to control multiple value colors.

Any help appreciated.

[richard.milone]

You can test "sprite._field" in the custom formatting section and set the color of any particular bar segment by field name. I attached a screenshot example but here's the code if you want to cut and paste. Also for future reference the custom formatting options pass in variables "sprite, config, rendererData and index". You can console.log any of those right from the custom formatting options area to see what values they contain and use those in your custom formatting code.

var store = rendererData.store,
    rec   = store.getAt(index);

// fyi, you can put the following line in and see these values on the console
// console.log(sprite, config, renderData, index);

if (sprite._field==='CONTRACT') {
    return setColor('#4CAF50');
} else if (sprite._field==='COMMERCIAL') {
    return setColor('#F44336');
} else if (sprite._field==='SUBDIVISION') {
    return setColor('#9575CD');
} else if (sprite._field==='SPECIALTY') {
    return setColor('#009688');
}

[jcallahan]

Richard:

Thank you.

That code changes the bar colors- I changed the colors to something more primary. See picture attached. However the colors in the legend don't agree with the colors used for each data value.

I'm not clear on how sprite, config, renderdata and index correspond to the visual elements I'm looking at. Maybe that would be more apparent if I understood what the console.log statement told me. Chrome doesn't seem to like adding that statement, and I can't upload the console logs with this reply.

[Johnny Major]

The legend not adjusting its colors based on your custom colors is a bug and we are looking into a fix for it. We will report back soon with more information.

Thanks

[Johnny Major]

[sean.lanktree]

FYI - the next update (currently at 5.2.20180920.0) will allow you to specify the colors you want for your chart series (without having to use the "Custom Formatting"). The colors you specify will also be consistent on the legend.

[jcallahan]

Not seeing any differences with 5.2.20180920.0

I see were the issue is addressed in the pending changes

[Johnny Major]

The update with the colors will be in the next update. We currently are not sure when the next update will be available.

[jcallahan]

Just installed Valence Framework 5.2.20181215.2

Looks like I need to remove the custom formatting code, and configure colors for each of the data fields (assigned sequentially?) in the UI

[sean.lanktree]

Yes, remove your custom formatting as choosing the colors in the UI will now handle your needs.