[CLOSED] Column chart legend not showing correct color incase of merged chart

  1. #1

    [CLOSED] Column chart legend not showing correct color incase of merged chart

    Scenario: - One column and two line chart in single graph

    Issue: - Legend of column chart is not showing the corresponding color from graph. It is taking the color of line series.

    I tried finding solution from other existing threads in the forum and implemented the override method of column series as suggested in one of the other thread. However, after that it is only taking color of one column for both legends.

    Please find attached the images for reference.

    Below is the code for same: -

    Model: -

    namespace Widgets
    {
    public class DummyDTO
        {
    
            public int Year { get; set; }
            public int Initial_Count { get; set; }
            public int Final_Count { get; set; }
            public int Full_time_Salary { get; set; }
            public int Part_time_Hourly { get; set; }
    
            public static List<DummyDTO> GetDummyData()
            {
                List<DummyDTO> list = new List<DummyDTO>();
                list.Add(new DummyDTO() { Year = 2005, Initial_Count = 7, Final_Count = 54, Full_time_Salary = 75, Part_time_Hourly = 19 });
                list.Add(new DummyDTO() { Year = 2006, Initial_Count = 10, Final_Count = 82, Full_time_Salary = 197, Part_time_Hourly = 37 });
                list.Add(new DummyDTO() { Year = 2007, Initial_Count = 17, Final_Count = 89, Full_time_Salary = 329, Part_time_Hourly = 59 });
                list.Add(new DummyDTO() { Year = 2008, Initial_Count = 14, Final_Count = 156, Full_time_Salary = 509, Part_time_Hourly = 114 });
                list.Add(new DummyDTO() { Year = 2009, Initial_Count = 33, Final_Count = 242, Full_time_Salary = 841, Part_time_Hourly = 208 });
                list.Add(new DummyDTO() { Year = 2010, Initial_Count = 37, Final_Count = 315, Full_time_Salary = 1231, Part_time_Hourly = 312 });
                list.Add(new DummyDTO() { Year = 2011, Initial_Count = 30, Final_Count = 506, Full_time_Salary = 1815, Part_time_Hourly = 498 });
                list.Add(new DummyDTO() { Year = 2012, Initial_Count = 48, Final_Count = 527, Full_time_Salary = 2453, Part_time_Hourly = 687 });
                list.Add(new DummyDTO() { Year = 2013, Initial_Count = 0, Final_Count = 3, Full_time_Salary = 2452, Part_time_Hourly = 683 });
                list.Add(new DummyDTO() { Year = 2014, Initial_Count = 0, Final_Count = 0, Full_time_Salary = 2440, Part_time_Hourly = 683 });
    
                return list;
            }
    
        }
    }
    JavaScript: -

    Ext.chart.series.Column.override({
            getLegendColor: function (index) {
                var me = this,
                    colorLength = me.colorArrayStyle.length;
    
                if (me.style && me.style.fill) {
                    return me.style.fill;
                }
                else {
                    return me.colorArrayStyle[me.seriesIdx % colorLength];
                }
            }
        });
    View: -

    @model List<Widgets.DummyDTO>
    @{
        var X = Html.X();
    }
    
    @(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).RenderStyles(ResourceLocationType.None))
    @(X.Container()
            .ID("container_DummyTalentChart")
            .Height(320)
            .Margin(0).Padding(0)
            .Items(
                X.Container().ID("container_DummyTalentChart2").Layout(LayoutType.Fit).Height(300).Items(
                X.Chart()
                    .ID("DummyTalentChart")
                    .Shadow(true)
                    .StyleSpec("background:#fff;")
                    .Animate(true)
                    .LegendConfig(X.ChartLegend().Position(LegendPosition.Bottom))
                    .Store(X.Store()
                    .ID("DummyTalenAcqStore")
                        .Data(Model)
                        .Model(X.Model()
                            .Fields(
                                X.ModelField().Name("Year"),
                                X.ModelField().Name("Initial_Count"),
                                X.ModelField().Name("Final_Count"),
                                X.ModelField().Name("Full_time_Salary"),
                                X.ModelField().Name("Part_time_Hourly")
    
                            )
                        )
                    )
                    .Axes(
                            X.NumericAxis()
                                .Fields(new[] { "Initial_Count", "Final_Count" })
                                .Title("Acquisition Count (Initial & Final)")
                                .LabelTitle(X.SpriteAttributes().Font("bold 12px Arial;"))
                                .Position(Position.Left)
                                .MajorTickSteps(5)
                                .Label(X.AxisLabel().Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');") ),
                            X.CategoryAxis()
                                .Position(Position.Bottom)
                                .Fields("Year"),
                            X.NumericAxis()
                                .Title("EE Type")
                                .LabelTitle(X.SpriteAttributes().Font("bold 12px Arial;"))
                                .Fields(new[] { "Full_time_Salary","Part_time_Hourly" })
                                .Grid(true)
                                .Position(Position.Right)
                                .MajorTickSteps(5)
                                .Label(X.AxisLabel().Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');"))
                    )
                    .Series(                        
                            X.LineSeries()
                            .SeriesID("LineSeriesInitialCount")
                            .Axis(Position.Left)
                            .Smooth(3)
                            .XField("Year")
                            .YField("Initial_Count")
                            .HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
                            .MarkerConfig(new SpriteAttributes { Type = SpriteType.Circle, Size = 4, Radius = 4, StrokeWidth = 0 })
                            .Tips(X.ChartTip()
                                .TrackMouse(true)
                                .Width(80)
                                .Height(25)
                                .Renderer(r => r.Handler = "this.setTitle(storeItem.get('Year') + ': ' + storeItem.get('Initial_Count'));")
                            ),
                            X.LineSeries()                        
                            .SeriesID("LineSeriesFinalCount")
                            .Axis(Position.Left)
                            .Smooth(3)
                            .XField("Year")
                            .YField("Final_Count")
                            .HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
                            .MarkerConfig(new SpriteAttributes { Type = SpriteType.Circle, Size = 4, Radius = 4, StrokeWidth = 0 })
                            .Tips(X.ChartTip()
                                .TrackMouse(true)
                                .Width(80)
                                .Height(25)
                                .Renderer(r => r.Handler = "this.setTitle(storeItem.get('Year') + ': ' + storeItem.get('Final_Count'));")
                            ),
                            X.ColumnSeries()             
                            .SeriesID("TalentClassificationColumnSeries")
                            .Axis(Position.Right)
                            .XField("Year")
                            .YField(new[] { "Full_time_Salary", "Part_time_Hourly" })
                            .Tips(Html.X().ChartTip()
                                .TrackMouse(true)
                                .Width(100)
                                .Height(25)
                                )
                           )
                        )
            )
    )
    Attached Thumbnails Click image for larger version. 

Name:	BeforeApplyingOverrideMethod.png 
Views:	14 
Size:	33.6 KB 
ID:	13721   Click image for larger version. 

Name:	AfterApplyingOverrideMethod.png 
Views:	12 
Size:	33.7 KB 
ID:	13731  
    Last edited by Daniil; Jul 23, 2014 at 1:29 PM. Reason: [CLOSED]
  2. #2
    Hi @alscg,

    Please use this override:
    Ext.chart.series.Column.override({
        getLegendColor: function (index) {
            var me = this,
                colorLength = me.colorArrayStyle.length;
    
            if (me.style && me.style.fill) {
                return me.style.fill;
            }
            else {
                return me.colorArrayStyle[me.seriesIdx + index % colorLength];
            }
        }
    });
  3. #3
    This works. Thanks.

Similar Threads

  1. [CLOSED] Legend in Column Chart
    By Tactem in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 08, 2013, 11:29 AM
  2. [OPEN] [#357] Column Chart legend showing incorrect
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 13
    Last Post: Oct 22, 2013, 4:00 AM
  3. [CLOSED] Chart.Legend background color ?
    By Zenalyse in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 19, 2013, 1:57 PM
  4. [CLOSED] How can change color for only one chart column
    By tactime10 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 12, 2013, 8:08 AM
  5. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM

Posting Permissions