[CLOSED] Chart Legend Series Color

  1. #1

    [CLOSED] Chart Legend Series Color

    Good Evening
    I need to display two values in a column chart.
    Click image for larger version. 

Name:	2018-03-01_15-34-04.png 
Views:	1 
Size:	11.4 KB 
ID:	25116

    My markup looks like this

            <ext:Chart ID="mainChart" runat="server" Shadow="true" Animate="true" Theme="statisticTheme:gradients" Cls="chart">
              <Store>
                <ext:Store runat="server" AutoDataBind="true">
                  <Model>
                    <ext:Model runat="server">
                      <Fields>
                        <ext:ModelField Name="X" Type="Object" />
                        <ext:ModelField Name="Y1" Type="Object" />
                        <ext:ModelField Name="Y2" Type="Object" />
                      </Fields>
                    </ext:Model>
                  </Model>
                </ext:Store>
              </Store>
    
              <Axes>
                <ext:NumericAxis Fields="Y1,Y2" Grid="True" MajorTickSteps="0" Title="<%$ I18n: Label_Count %>">
                  <Label>
                    <Renderer Handler="return Ext.util.Format.number(value, '00');" />
                  </Label>
                </ext:NumericAxis>
    
                <ext:CategoryAxis Position="Bottom" Fields="X" Title="<%$ I18n: Label_Day %>" />
              </Axes>
    
              <Series>
                <ext:ColumnSeries Axis="Left" Highlight="true" XField="X" YField="Y1,Y2" Titles="Import, Export">
                  <Tips runat="server" TrackMouse="true" MaxWidth="10" MinWidth="0" MaxHeight="20">
                    <Renderer Handler="this.setTitle(storeItem.get('Y1'));" />
                  </Tips>
                  <Renderer Fn="chartRenderer"></Renderer>
                </ext:ColumnSeries>
    
              </Series>
              <LegendConfig Position="Top" />
            </ext:Chart>
    The column renderer code
    function chartRenderer(sprite, record, attr, index, store) {
      var color1 = 'rgb(0, 0, 255)';
      var color2 = 'rgb(255, 0, 0)';
    
      return Ext.apply(attr, {
        fill: index % 2 === 0 ? color1 : color2
      });
    };
    The Problem now, the legend doesn't know the color I've changed in the renderer :-(

    What can I do to solve that ?

    Kind Regards
    Peter
    Last edited by fabricio.murta; Mar 07, 2018 at 11:27 PM.
  2. #2
    Hello @Peter.Treier!

    Indeed, if you use a renderer to set the colors of the bars, the legend will have no means to know what you did.

    You should try instead setting a custom theme for your chart, this way the legend should follow. Look at this example: Chart > Column > Browser Stats. It defines a rather complex (gradient-filled) theme.

    But, as it shows no legend, there might be a chance you don't get it to work either even thru using the themes. There are several discussions in the forums already about chart legends' colors not following customizations. Check out this google search results, it shows several links with solutions.

    In particular the first result, Column chart legend not showing correct color incase of merged chart, albeit originally MVC, looks very promising as exactly what you need.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Good Evening...

    I found a solution with your links. Thanks for the input !

    Peter
  4. #4
    Glad it helped, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 6
    Last Post: Aug 16, 2017, 5:27 PM
  2. Replies: 4
    Last Post: Jul 17, 2017, 6:29 PM
  3. Replies: 2
    Last Post: Jul 23, 2014, 2:02 PM
  4. [CLOSED] Configure Legend of Line Chart Series
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 31
    Last Post: Oct 19, 2013, 5:32 AM
  5. Replies: 14
    Last Post: Dec 21, 2012, 5:23 AM

Posting Permissions