Hide Series in Legend

[Jeffrey Phillips]

How to hide a series from the legend?
Referring to http://cloud.highcharts.com/show/ewogizi
Adding this to custom code

Code: Select all

Highcharts.extend(options, Highcharts.merge(options, {
  series: [{
 		index: 2,
        showInLegend: "false"
		}
           ]   
}));

results in a blank chart.

[pawel_d]

Hi Jeffrey,

In 'Custom code' section create a chart using options from 'Genereated options' section, add showInLegend property and set it to false in series with index 2.

Code: Select all

$(function() {
  Highcharts.chart('container', {
    "chart": {
      "type": "column",
      "inverted": true,
      "height": 360
    },
    "plotOptions": {
      "series": {
        "stacking": "percent"
      }
    },
    "legend": {
      "borderWidth": 1,
      "itemStyle": {
        "fontWeight": "normal",
        "fontSize": "10px"
      },
      "borderColor": "#e4e4e4",
      "reversed": true,
      "backgroundColor": "#f1f1f1"
    },
    "credits": {
      "href": null,
      "text": "Source: Source: Ventyx Velocity Suite; Energy Resources International, Inc. Updated: 7/09  (Via NEI)"
    },
    "yAxis": {
      "labels": {
        "format": "{value}%"
      },
      "title": {
        "text": null
      }
    },
    "colors": [
      "#d35e13",
      "#dbc79d",
      "#003056",
      "#7ea8ad",
      "#acc37e",
      "#0a5d66",
      "#f7a800",
      "#b8a999",
      "#d2ddbb",
      "#706259"
    ],
    "title": {
      "align": "left",
      "style": {
        "fontWeight": "bold"
      },
      "text": "2008 Fuel as a Percentage of Electric Generation Costs"
    },
    "tooltip": {
      "valueSuffix": "%"
    },
    "xAxis": {
      "type": "category"
    },
    "series": [{
      "index": 0,
      "color": "#dbc79d",
      "name": "Operations & Maintenance",
      "data": [
        [
          "Natural Gas",
          7
        ],
        [
          "Coal",
          20
        ],
        [
          "Nuclear",
          74
        ]
      ]
    }, {
      "index": 1,
      "name": "Conversion",
      "data": [
        [
          "Natural Gas",
          null
        ],
        [
          "Coal",
          null
        ],
        [
          "Nuclear",
          1.04
        ]
      ]
    }, {
      "index": 2,
      "color": "#d35e13",
      "name": "Fabrication",
      "showInLegend": false,
      "data": [
        [
          "Natural Gas",
          null
        ],
        [
          "Coal",
          null
        ],
        [
          "Nuclear",
          2.08
        ]
      ]
    }, {
      "index": 3,
      "color": "#d35e13",
      "name": "Waste Fund",
      "data": [
        [
          "Natural Gas",
          null
        ],
        [
          "Coal",
          null
        ],
        [
          "Nuclear",
          3.9
        ]
      ]
    }, {
      "color": "#d35e13",
      "index": 4,
      "name": "Enrichment",
      "data": [
        [
          "Natural Gas",
          null
        ],
        [
          "Coal",
          null
        ],
        [
          "Nuclear",
          8.06
        ]
      ]
    }, {
      "index": 5,
      "color": "#d35e13",
      "name": "Uranium",
      "data": [
        [
          "Natural Gas",
          null
        ],
        [
          "Coal",
          null
        ],
        [
          "Nuclear",
          10.92
        ]
      ]
    }, {
      "color": "#d35e13",
      "index": 6,
      "name": "Fuel",
      "data": [
        [
          "Natural Gas",
          93
        ],
        [
          "Coal",
          80
        ],
        [
          "Nuclear",
          null
        ]
      ]
    }]
  });
});

Regards.

[Jeffrey Phillips]

So close …
It previews correctly in the editor, but the shared chart has errors:

http://cloud.highcharts.com/show/ewogizi

Screen Shot 2016-12-06 at 9.06.59 AM.png (28.96 KiB) Viewed 22233 times

[pawel_d]

Hi Jeffrey,

Try to create chart with renderTo property not as a second argument in Highcharts.chart() function:

Code: Select all

Highcharts.chart({
    "chart": {
      "type": "column",
      "renderTo": "container",
      "inverted": true,
      "height": 360
    },
    ...
});

Regards.

[Jeffrey Phillips]

https://cloud.highcharts.com/show/ewogizi

Replacing

Code: Select all

Highcharts.chart('container', {

with

Code: Select all

Highcharts.chart( {

results in all of the custom code apparently being ignored.

[pawel_d]

Hi Jeffrey,

Sorry for my late reply. It is because you forgot to include renderTo option in chart options object. Look at code section in my previous post.

Code: Select all

$(function() {
  Highcharts.chart({
    "chart": {
      "type": "column",
      "renderTo": "container",
      "inverted": true,
      "height": 360
    },
    "plotOptions": {
      "series": {
        "stacking": "percent"
      }
    },
    "legend": {
      "borderWidth": 1,
      "itemStyle": {
        "fontWeight": "normal",
        "fontSize": "10px"
      },
      "borderColor": "#e4e4e4",
      "reversed": true,
      "backgroundColor": "#f1f1f1"
    },
    "credits": {
      "href": null,
      "text": "Source: Source: Ventyx Velocity Suite; Energy Resources International, Inc. Updated: 7/09  (Via NEI)"
    },
    "yAxis": {
      "labels": {
        "format": "{value}%"
      },
      "title": {
        "text": null
      }
    },
    "colors": [
      "#d35e13",
      "#dbc79d",
      "#003056",
      "#7ea8ad",
      "#acc37e",
      "#0a5d66",
      "#f7a800",
      "#b8a999",
      "#d2ddbb",
      "#706259"
    ],
    "title": {
      "align": "left",
      "style": {
        "fontWeight": "bold"
      },
      "text": "2008 Fuel as a Percentage of Electric Generation Costs"
    },
    "tooltip": {
      "valueSuffix": "%"
    },
    "xAxis": {
      "type": "category"
    },
    "series": [{
      "index": 0,
      "color": "#dbc79d",
      "name": "Operations & Maintenance",
      "data": [
        [
          "Natural Gas",
          7
        ],
        [
          "Coal",
          20
        ],
        [
          "Nuclear",
          74
        ]
      ]
    }, {
      "index": 1,
      "name": "Conversion",
      "showInLegend": false,
      "data": [
        [
          "Natural Gas",
          null
        ],
        [
          "Coal",
          null
        ],
        [
          "Nuclear",
          1.04
        ]
      ]
    }, {
      "index": 2,
      "color": "#d35e13",
      "name": "Fabrication",
      "showInLegend": false,
      "data": [
        [
          "Natural Gas",
          null
        ],
        [
          "Coal",
          null
        ],
        [
          "Nuclear",
          2.08
        ]
      ]
    }, {
      "index": 3,
      "color": "#d35e13",
      "name": "Waste Fund",
      "showInLegend": false,
      "data": [
        [
          "Natural Gas",
          null
        ],
        [
          "Coal",
          null
        ],
        [
          "Nuclear",
          3.9
        ]
      ]
    }, {
      "color": "#d35e13",
      "index": 4,
      "name": "Enrichment",
      "showInLegend": false,
      "data": [
        [
          "Natural Gas",
          null
        ],
        [
          "Coal",
          null
        ],
        [
          "Nuclear",
          8.06
        ]
      ]
    }, {
      "index": 5,
      "color": "#d35e13",
      "name": "Uranium",
      "showInLegend": false,
      "data": [
        [
          "Natural Gas",
          null
        ],
        [
          "Coal",
          null
        ],
        [
          "Nuclear",
          10.92
        ]
      ]
    }, {
      "color": "#d35e13",
      "index": 6,
      "name": "Fuel",
      "data": [
        [
          "Natural Gas",
          93
        ],
        [
          "Coal",
          80
        ],
        [
          "Nuclear",
          null
        ]
      ]
    }]
  });
});

API Reference:
http://api.highcharts.com/highcharts/chart.renderTo

Example:
http://jsfiddle.net/d_paul/6j5uvhk1/

Regards.