Results 1 to 10 of 10

Thread: Line chart will use the series fill color as the legend marker even if not set.

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Answers
    5

    Default Line chart will use the series fill color as the legend marker even if not set.

    I have a line chart with the series set to be:
    Code:
    series: [{
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'dt',
                yField: 'data1',
                title: 'My-PC',
                showMarkers: false,
                style:
                    {
                        stroke: '#ffffff',
                        'stroke-width': 2,
                        opacity: 1
    }
    Note that I do not have the fill set in the style.

    In sencha-charts-debug.js (release candiate version) line 13518, the color for the legend marker is determined:

    Code:
    /**
         * Returns a string with the color to be used for the series legend item.
         */
        getLegendColor: function(index) {
            var me = this, fill, stroke;
    
    
            if (me.style) {
                fill = me.style.fill;
                stroke = me.style.stroke;
                if (fill && fill != 'none') {
                    return me.getColorFromStyle(fill);
                }
                return me.getColorFromStyle(stroke);
            }
    
    
            return '#000';
        },
    It seems that in this code, it will always return the fill color even if I did not set one. It appears to be using a default of '#115Fa6' that was the style.fill value (which I did not set). If I set the fill value in my code to the same as the stroke then I get the right color as my legend marker. Is this the way its supposed to work? It seems that the getLegendColor function will never return the stroke color even if I just set the stroke and not the fill.

    Also- do you think you can put the version of code in sencha-charts-debug.js at the top of the file? That way I would be sure of the version I am testing with.

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    168

    Default

    Hi,

    Thanks for the report. By default there's a fill color in the series. The display of the fill color can be toggled by using `fill: true` or false in the series (and not style object) configuration, but there's a default fill style color that gets inherited by the default theme. I think you should be able to override this in the line series with:

    Code:
    style: {
      fill: 'none'
    }
    I understand this is a bug and will remove the fill check if the fill option in the line series is set to false:

    Code:
    series: [{
      type: 'line',
      fill: false,
      style: {
        stroke: '#ccc',
        //etc...
      }
    }]
    Thanks again for the report, and please let me know if the `fill: 'none'` workaround works for you.

  3. #3
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Answers
    5

    Default

    I used the fill:false in the series definition and can confirm that works as you say. Thanks for the reply.

    For the other issue concerning putting the release number and date on the debug js files. Think thats a possibility?

  4. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17

    Default

    The version is kept as a property on the Chart component.

  5. #5
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Answers
    5

    Default

    Now that I got the legend marker set for a line series, I am coming up with a different issue for a column series.
    Instead of using the fill/stroke color for the line, the column legend marker is using the getLegendColor function on line 14989 of touch-charts-debug.js
    Code:
     /**
         * Returns a string with the color to be used for the series legend item.
         * @param index
         */
        getLegendColor: function(index) {
            var me = this,
                colorArrayStyle = me.colorArrayStyle;
            return me.getColorFromStyle(colorArrayStyle[index % colorArrayStyle.length]);
        },
    I would have thought that I would have control over this color because I am using the renderer function to make the columns a gradient with defined colors. I can see where I can get the legend color for the column series: getLegendColor() but it looks like I need to set the color(s) in colorArrayStyle but don't see where I can.

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    168

    Default

    Hi - I'm not sure I understand correctly: do you want to have one legend item per column, or one legend item per column stack/group? In the former case there isn't really a way of doing this with the current column/bar series, since a set of columns is considered only one series, and then it has only one single entry in the legend box. I can add this as a feature request but I'm not sure there is an easy workaround for this in the meantime.

    For any other case, I think you can override the colorArrayStyle array by setting a colors array in the style series object:

    Code:
    series: [{
      type: 'column',
      style: {
        colors: ['#ccc', '#555'] //should override colorArrayStyle
      }
      //etc.
    }]
    I hope this helps,

  7. #7
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Answers
    5

    Default

    Thanks- its one legend item for the series. The "Value" series is the column. I'll try your suggestion.

    SenchaChart2.jpg

  8. #8
    Sencha User
    Join Date
    Nov 2010
    Posts
    168

    Default

    I'm sorry, the `colors` array should be at the chart configuration level:

    new Ext.chart.Chart({
    style: {
    colors: [] //colors...
    },

    series: [{
    //etc
    }]

    });

    I will create a ticket to make the legend item color configuration per series much easier.

    Thanks again for your report,

  9. #9
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Answers
    5

    Default

    Actually the legend marker for this column chart is being set from the colorArrayStyle array of the Series. I tried setting the colors array style at both the series and the chart and neither altered the colorArrayStyle values in the series.

  10. #10
    Sencha User
    Join Date
    Nov 2010
    Posts
    168

    Default

    Hi - I think that the easiest and most straightforward way of doing this would be to create a theme on the fly to add these colors to the chart.

    Before creating the Chart panel you could add these lines:

    Code:
        Ext.chart.theme.Colors = [{
            selector: 'chart',
            specificity: 5,
            style: {
                colors: ['#555', '#ccc', '#000']
            }
        }];
    and then in the chart configuration object you should change the theme reference to:

    Code:
    theme: 'Colors'
    And that would change the colorArrayStyle array.

    I hope this helps,

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •