PDA

View Full Version : [CLOSED] Chart Legend Series Color



Peter.Treier
Mar 01, 2018, 1:36 PM
Good Evening
I need to display two values in a column chart.
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

fabricio.murta
Mar 01, 2018, 5:36 PM
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 (http://examples2.ext.net/#/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 (https://www.google.com/search?q=site%3Aforums.ext.net+chat+legend+color&oq=site%3Aforums.ext.net+chat+legend+color), it shows several links with solutions.

In particular the first result, Column chart legend not showing correct color incase of merged chart (https://forums.ext.net/showthread.php?39981), albeit originally MVC, looks very promising as exactly what you need.

I hope this helps!

Peter.Treier
Mar 06, 2018, 4:29 PM
Good Evening...

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

Peter

fabricio.murta
Mar 07, 2018, 10:27 PM
Glad it helped, thanks for the feedback!