Column: Custom color is not applying to legend

[bveerabathini]

Custom color is not applying to legend of Column chart.
Have set like below, It is applying only to columns/bars of chart but not to Legend.

Expected behavior
Custom color should reflect in both column/bars and legend.

Version

• ids-enterprise: 4.55.2

Platform

• Infor Application/Team Name: Infor LN
• OS Version: Windows 10
• Browser Name: chrome
• Browser Version: Version 94.0.4606.81 (Official Build) (64-bit)

[tmcconechy]

Please use the template next time to get all information to us https://github.com/infor-design/enterprise/issues/new/choose which team are you on?

To Help you out.. I can easily reproduce reproduce this issue.

1. unzip this new example to app/views/components/column/example-legend.html
2. run it http://localhost:4000/components/column/example-legend.html
3. show legend -> notice legend is wrong color

example-legend.html.zip

[yohannahbautista]

@bveerabathini @tmcconechy @ericangeles
Hello, I have a few questions for this issue (all based on the modified example-legend.html):
The legend currently isn't changing color because it goes to the default color. If one is specified in the data, then the color will change. Could this be done instead?

    var dataset = [{
            data: [{
                name: 'Automotive',
                shortName: 'Auto',
                abbrName: 'A',
                value: 7,
                color: '#8ED1C6'
            }, {
                name: 'Distribution',
                shortName: 'Dist',
                abbrName: 'D',
                value: 10,
                color: '#8ED1C6'
            }, {
                name: 'Equipment',
                shortName: 'Equip',
                abbrName: 'E',
                value: 14,
                color: '#8ED1C6'
            }, {
                name: 'Fashion',
                shortName: 'Fash',
                abbrName: 'F',
                value: 10,
                color: '#8ED1C6'     
            }],
            name: 'Monthly Target',
            color: '#8ED1C6' // <-- can add a custom color here for legend
        }];

If not, can I suggest that the color change will depend on the legend color instead of all the data items' colors? Like if all of the columns will be the same color, legend included, maybe it would be simpler to have it follow the legend color?

    var dataset = [{
            data: [{
                name: 'Automotive',
                shortName: 'Auto',
                abbrName: 'A',
                value: 7
            }, {
                name: 'Distribution',
                shortName: 'Dist',
                abbrName: 'D',
                value: 10
            }, {
                name: 'Equipment',
                shortName: 'Equip',
                abbrName: 'E',
                value: 14
            }, {
                name: 'Fashion',
                shortName: 'Fash',
                abbrName: 'F',
                value: 10 
            }],
            name: 'Monthly Target',
            color: '#8ED1C6'
        }];

[bveerabathini]

@yohannahbautista ,
First option is working when we give at both places(i.e., in dataset and legend),But second option is not ,it is just reflecting in Legend only not in columns/bars.
Does the first approach suffice for this issue?
What if we have different color for each data item/ bar? How does Legends reflect those colors?

[tmcconechy]

@yohannahbautista I think that:

1. if one group it could be different colors for each bar (and would be no legend as it would be confusing)
2. but if more than one group the color should be on the group level since it applies to all in that group...

[yohannahbautista]

@tmcconechy @ericangeles
Hello, I think changing the column color options to allow grouped colors would take time because looking at the example page for grouped columns, it assigns colors per variable, not group: http://localhost:4000/components/column-grouped/example-index.html

I tried changing one group's color and it affects the other groups too (if I change Jan in Component A to red, the Jan in B and C also change to red), and I'll need to study the column group chart to figure out how to change colors.

@bveerabathini The first option is what's already in column chart. There isn't any implementation for the second option, that was just my suggestion.

If you assign different colors to each bar, currently the legend will go with the default color unless you also assign a legend color

Without legend color

With legend color

Should I still continue with changing the legend color or are the existing settings okay? If so, should this include the column group chart as well?

[tmcconechy]

I think this looks fine to me. I may have misunderstood how it was currently working. As long as you can set the colors and the legend matches in some way. It should be good

[ericangeles]

@tmcconechy do we need to fix anything here? If none, I guess we can already close this ticket.

[tmcconechy]

@ericangeles can we just make an example like in the original issue showing how to make a bunch of orange bars with the legend also showing orange? If we can do it by tweaking the data then thats good enough for me.

[nganotice]

This has been QA tested and passed on v4.59.0-dev.

https://main-enterprise.demo.design.infor.com/components/column/example-legend-colors.html

Moving this ticket to Done.

Thanks!