Skip to Content
avatar image
Former Member

Filter between Bar chart and line chart series colors


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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Dec 22, 2014 at 09:57 PM

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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Dec 30, 2014 at 07:34 AM

    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.


    charts.jpg (125.8 kB)
    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      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

      scriptchart.JPG (49.0 kB)
      css.JPG (133.3 kB)
      charts.jpg (81.8 kB)
  • avatar image
    Former Member
    Dec 30, 2014 at 09:18 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      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