[CLOSED] Chart Legend Series Color

[Peter.Treier]

Good Evening
I need to display two values in a column chart.


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

[fabricio.murta]

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!

[Peter.Treier]

Good Evening...

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

Peter

[fabricio.murta]

Glad it helped, thanks for the feedback!