cancel
Showing results for 
Search instead for 
Did you mean: 

Filter between Bar chart and line chart series colors

Former Member
0 Kudos


Hi,

I have requirement in design studio dashboard as follows -

I have two charts first one is horizontal bar chart with 10 materials for current week and second one is line chart with same materials for last five weeks trend. when I select one material from bar chart only that material should get filter in the second line chart and which is working good but the issue is with colors.

Whatever the material I select in first bar chart only one color is getting in the second line chart for all the materials even they are different in first bar chart, for example if I select blue color material in first one, blue color is coming in line chart and if I select yellow color material bar still blue (first color in the bar chart as default) color is coming. I want same color as in the first chart.

Currently showing as                                          Required as Below

Bar Chart       Line Chart                                   Bar Chart       Line Chart

Blue        --->  Blue                                             Blue        --->  Blue

Yellow    --->   Blue                                             Yellow    --->   Yellow

Orange  --->   Blue                                              Orange  --->   Orange

This one can we directly  do in design Studio or we need to do through CSS?

Thanks,

Ap

Accepted Solutions (0)

Answers (3)

Answers (3)

Former Member
0 Kudos

Hi,

You have to use three different charts if you need three different colors, the way design studio series color working is like this,

Suppose you have 3 series

1 Red

2 Green

3 Blue

If you remove say series 2 then the colour will show up like this

1 Red

3 Green

Regards,

Fazith Ali Z

Former Member
0 Kudos

Hi Fazith Ali,

I can't do it with three charts I need only two charts and after filtering the colors should match between two charts.

Thanks,

AP

Former Member
0 Kudos

Hi,

I meant 1+3 charts

for the second part of the chart, you have to create three charts with the three series color data respectively and just call them using setVisible function according to the selection made,

Regards,

Fazith Ali Z

Former Member
0 Kudos

Hi,

I think you have mapped materials as Legends, so technically when you select one material in bar chart it filters on that particular material to line chart, this implies the legend for the line chart remains to be a single member (ie material selected), that is why you get one color as default ie blue.

If you want different colors use Swap Axes option for Line chart.

Former Member
0 Kudos

Hi Kavya,

Thanks for your reply, yes as you attached in your charts after selection you are also getting the "East and South Africa" as blue only where it's color should be an orange. My legend should be as material only and even though I changed rows and columns and used swap axes it is coming same by default blue only.

So I'm worried about is it doable by CSS or in any other way or is it a bug and can't do it?

Thanks,

AP

Former Member
0 Kudos

Hi,

It's not a bug as by default in Design Studio if you have one Legend item, blue color is assigned irrespective of the selections made.

Using CSS you could achieve your requirement. I have given a snippet of the CSS classes that we need to overwrite for line chart.

For further enhancements you could explore using F12 key in browser.

Thanks,

Kavya

TammyPowlas
Active Contributor
0 Kudos

Would you please share which version of Design Studio you are using?

Former Member
0 Kudos

I'm using Design Studio version 1.3 and Service pack 2.