Select which chart data category to show versus omit - highcharts

Question

In the following webpage, https://betterbuildingssolutioncenter.energy.gov/energy-data/District%20of%20Columbia , the highchart next to "Portfolio Energy Performance", clicking on the legend icon "Public" omits the public data and only shows the private data. How can I reverse this, so that clicking on the "Public" legend icon omits the private data instead? I have attached the code used for this webpage.
// color declarations
var colorGreen = '#0b6a39',
colorBlue = '#0c4489',
colorBlueLight = '#558ed5',
colorGray = '#595959',
font = 'avenir';
// graph data variables
// Portfolio Energy Performance
var /* title */ energyPerformanceTitle = 'Average Annual % Improvement by Reporting Period',
/* columns */ energyPerformanceCategories = ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
/* Y max */ energyPerformanceYMax = 9,
/* X title */ energyPerformanceXaxis = [''],
/* Y title */ energyPerformanceYaxis = ['Average Annual % Improvement'],
/* column colors */ energyPerformanceColumns = [colorBlue, colorBlue, colorBlue, colorBlue, colorBlue, colorBlue, colorBlue, colorBlue],
/* column data */ energyPerformanceData = [8.53, 3.31, 2.37, 2.91, 2.86, 2.63, 2.4, 0.34],
/* goal data */ energyPerformanceGoalData = 2;
// Energy Performance by Facility
var /* title */ energyFacilityTitle = 'Number of Properties by Cumulative % Improvement',
/* columns */ energyFacilityCategories = ['<=0%', '0-2%', '2-6%', '6-10%', '10-15%', '>15%'],
/* X title */ energyFacilityXaxis = ['Cumulative % Improvement Category'],
/* Y title */ energyFacilityYaxis = ['Number of Properties'],
/* Y interval */ energyFacilityYinterval = 10,
/* column colors */ energyFacilityColumns = [colorBlue, colorGreen, colorGreen, colorGreen, colorGreen, colorGreen, colorGreen],
/* column data */ energyFacilityData = [82, 14, 28, 16, 35, 101];
// Identifying Opportunities for Improvement
var /* title */ improvementOpportunityTitle = '% Improvement vs. Baseline EUI',
/* columns */ improvementOpportunityCategories = ['0', '200', '400', '600', '800'],
/* X min */ improvementOpportunityXMin = 0,
/* X max */ improvementOpportunityXMax = 800,
/* Y min */ improvementOpportunityYMin = -60,
/* Y max */ improvementOpportunityYMax = 100,
/* Y interval */ improvementOpportunityYinterval = 20,
/* X interval */ improvementOpportunityXinterval = 200,
/* X title */ improvementOpportunityXaxis = ['Baseline Source EUI (kBtu/sq.ft.)'],
/* Y title */ improvementOpportunityYaxis = ['% Improvement'],
/* scatter data */ improvementOpportunityData = [[704,76], [55,-273], [216,10], [205,6], [505,12], [167,4], [147,-7], [254,-14], [307,19], [275,36], [179,-4], [146,-16], [324,17], [225,19], [146,5], [199,18], [162,4], [183,26], [208,20], [187,-13], [187,19], [145,49], [172,24], [206,25], [208,-35], [222,16], [221,19], [145,18], [151,10], [159,-13], [221,20], [150,26], [215,38], [152,11], [158,-17], [174,9], [249,28], [166,12], [231,3], [165,15], [132,16], [217,3], [163,1], [225,3], [151,20], [149,-9], [164,5], [149,-3], [193,30], [177,10], [246,-20], [155,4], [184,17], [200,7], [132,10], [162,12], [149,19], [252,23], [142,-16], [165,10], [230,-2], [180,16], [193,29], [185,5], [61,49], [226,66], [128,46], [141,76], [190,2], [194,24], [217,10], [127,3], [216,15], [89,-23], [137,-9], [162,33], [171,7], [136,19], [190,-6], [155,18], [93,-35], [147,-20], [199,7], [141,14], [177,7], [276,-16], [103,-2], [172,20], [90,-24], [153,17], [184,10], [149,34], [240,-5], [163,-15], [122,-10], [160,-22], [236,16], [139,5], [183,22], [165,12], [141,22], [114,-39], [175,16], [164,26], [141,16], [186,28], [160,-14], [148,14], [231,15], [204,-9], [170,6], [112,-4], [170,27], [191,17], [216,-1], [215,12], [166,19], [131,-13], [109,15], [181,4], [300,28], [210,13], [236,15], [183,19], [144,14], [198,3], [219,-14], [291,12], [169,19], [194,-8], [208,-16], [304,3], [208,0], [195,-5], [175,17], [143,-1], [161,15], [194,-10], [121,-3], [117,21], [189,0], [136,10], [189,-7], [150,-32], [308,-1], [136,-1], [253,-2], [121,25], [427,2], [222,20], [150,-2], [254,33], [284,38], [307,3], [249,26], [178,6], [134,-22], [282,-4], [151,-10], [143,-3], [116,-6], [158,7], [161,16], [260,55], [131,15], [246,3], [113,-3], [209,22], [322,21], [245,39], [197,14], [142,5], [253,23], [197,-9], [184,15], [169,12], [187,12], [132,-21], [195,16], [143,6], [145,-10], [200,35], [142,5], [178,28], [271,21], [140,-29], [125,6], [148,-15], [185,18], [163,36], [173,13], [117,-2], [291,23], [168,-8], [196,26], [202,13], [169,22], [142,-37], [142,-32], [211,22], [165,5], [181,30], [140,0], [126,-15], [410,14], [167,-17], [205,13], [171,-6], [197,24], [167,15], [115,0], [160,31], [164,13], [176,11], [169,23], [153,25], [542,16], [138,-12], [143,-25], [228,-1], [95,10], [147,-14], [200,8], [195,1], [178,12], [192,20], [152,11], [224,1], [150,-2], [247,12], [208,36], [134,-18], [231,-4], [248,-1], [217,-2], [164,22], [288,0], [201,15], [149,26], [206,33], [179,23], [151,22], [168,14], [165,5], [176,12], [145,-15], [103,-40], [163,5], [141,-9], [128,9], [177,30], [238,17], [182,10], [198,23], [147,-8], [205,29], [528,-8], [205,16], [164,15], [163,39], [193,1], [173,-1], [168,30], [233,6], [117,2], [205,13], [110,7], [161,15], [159,4], [197,2], [131,0], [231,-37], [248,0], [140,0], [155,-9], [153,-2],],
/* trendline data */ improvementOpportunityTrendLine = [[55, -5], [704, 54]];
// On document ready, call visualize on the datatable.
jQuery(document).ready(function () {
Highcharts.visualize = function (table, options) {
// the categories
options.xAxis.categories = energyPerformanceCategories;
options.colors = energyPerformanceColumns,
options.series = [{
type: 'column',
name: ['Public'],
data: energyPerformanceData,
color: colorBlue,
colorByPoint: false,
dataLabels: {
enabled: false
}
}, {
type: 'column',
name: ['Private'],
data: [3.3, 4.95, 3.68, 3.31, 2.76, 2.99, 2.3, 1.71],
color: colorBlueLight,
colorByPoint: false,
dataLabels: {
enabled: false
},
}];
var chart = new Highcharts.Chart(options);
}
var table = document.getElementById('datatable'),
options = {
chart: {
renderTo: 'energy-performance',
type: 'column'
},
title: {
text: energyPerformanceTitle,
style: {
color: colorGray,
fontFamily: font
}
},
subtitle: {},
plotOptions: {
series: {
shadow: false
},
column: {
borderWidth: 0
}
},
xAxis: {
title: {
text: energyPerformanceXaxis,
style: {
color: colorGray,
fontFamily: font
}
},
tickLength: 0,
lineColor: colorGray,
lineWidth: 1
},
yAxis: {
title: {
text: 'Average Annual % Improvement',
style: {
color: colorGray,
fontFamily: font
}
},
tickInterval: 1,
tickLength: 5,
tickWidth: 1,
tickColor: colorGray,
max: energyPerformanceYMax,
lineColor: colorGray,
lineWidth: 1,
gridLineWidth: 0,
plotLines: [{
color: colorGray,
width: 2,
value: energyPerformanceGoalData,
zIndex: 5,
label: {
text: 'GOAL',
align: 'right',
x: 11,
y: -5,
style: {
color: colorGray,
fontFamily: font,
fontWeight: 'bold'
}
}
}],
labels: {
style: {
color: colorGray,
fontFamily: font
}
}
},
legend: {
enabled: true
},
legend: {
itemHiddenStyle: {
color: colorBlue,
colorByPoint: false
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
var raw = ((this.y / energyPerformanceData[0])) * 100,
percentage = Math.round(100 - (raw * 100) / 100);
if (this.y === energyPerformanceData[0] && this.key === '2012') {
return '<strong>' + this.series.name + '</strong><br/>' + '<strong>' + this.x + '</strong>: ' + Highcharts.numberFormat(this.y, 1) + '%';
} else {
return '<strong>' + this.series.name + '</strong><br/>' + '<strong>' + this.x + '</strong>: ' + Highcharts.numberFormat(this.y, 1) + '%';
}
},
}
};
Highcharts.visualize(table, options);
});
// On document ready, call visualize on the datatable.
jQuery(document).ready(function () {
Highcharts.visualize = function (table, options) {
// the categories
options.xAxis.categories = energyFacilityCategories;
options.colors = energyFacilityColumns,
options.series = [{
type: 'column',
name: energyFacilityYaxis,
data: energyFacilityData,
color: colorGreen,
colorByPoint: true,
dataLabels: {
enabled: false
}
}];
var chart = new Highcharts.Chart(options);
}
var table = document.getElementById('datatable'),
options = {
chart: {
renderTo: 'facility-performance',
type: 'column'
},
title: {
text: energyFacilityTitle,
style: {
color: colorGray,
fontFamily: font
}
},
subtitle: {},
plotOptions: {
series: {
shadow: false
},
column: {
borderWidth: 0
}
},
xAxis: {
title: {
text: energyFacilityXaxis,
style: {
color: colorGray,
fontFamily: font
}
},
tickLength: 0,
lineColor: colorGray,
lineWidth: 1,
labels: {
rotation: -45,
y: 30,
style: {
color: colorGray,
fontFamily: font
}
}
},
yAxis: {
title: {
text: energyFacilityYaxis,
style: {
color: colorGray,
fontFamily: font
}
},
tickInterval: energyFacilityYinterval,
tickLength: 5,
tickWidth: 1,
tickColor: colorGray,
lineColor: colorGray,
lineWidth: 1,
gridLineWidth: 0,
minorTickColor: colorGray,
labels: {
style: {
color: colorGray,
fontFamily: font
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return '<strong>' + this.series.name + '</strong><br/>' + '<strong>' + this.x + '</strong>: ' + this.y;
}
}
};
Highcharts.visualize(table, options);
});
// On document ready, call visualize on the datatable.
jQuery(document).ready(function () {
Highcharts.visualize = function (table, options) {
// the categories
options.xAxis.categories = improvementOpportunityCategories;
options.series = [{
name: improvementOpportunityYaxis,
data: improvementOpportunityData,
color: colorBlue
}, {
type: 'line',
name: 'Trendline',
data: improvementOpportunityTrendLine,
color: colorGray,
width: 1,
marker: {
enabled: false
}
}];
var chart = new Highcharts.Chart(options);
}
var table = document.getElementById('datatable'),
options = {
chart: {
renderTo: 'improvement-opportunities',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: improvementOpportunityTitle,
style: {
color: colorGray,
fontFamily: font
}
},
subtitle: {},
plotOptions: {
series: {
shadow: false
},
scatter: {
marker: {
radius: 3,
symbol: 'diamond',
states: {
hover: {
enabled: true
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
xAxis: {
title: {
text: improvementOpportunityXaxis,
style: {
color: colorGray,
fontFamily: font
}
},
lineWidth: 0,
min: improvementOpportunityXMin,
max: improvementOpportunityXMax,
tickInterval: improvementOpportunityXinterval,
minTickInterval: 25,
tickLength: 0
},
yAxis: {
title: {
text: improvementOpportunityYaxis,
style: {
color: colorGray,
fontFamily: font
}
},
min: improvementOpportunityYMin,
max: improvementOpportunityYMax,
tickInterval: improvementOpportunityYinterval,
tickLength: 5,
tickWidth: 1,
tickColor: colorGray,
lineColor: colorGray,
lineWidth: 1,
gridLineWidth: 0,
plotLines: [{
color: colorGray,
width: 1,
value: 0
}, {
color: colorGray,
width: 1,
value: 0,
zIndex: 5
}]
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return '<strong>' + this.series.name + ':</strong> ' + this.y;
}
}
};
Highcharts.visualize(table, options);
});

Answer 1

Use legendItemClick event and hide/show other series than the clicked one:
plotOptions: {
series: {
events: {
legendItemClick: function() {
this.chart.series.forEach(function(s) {
if (s !== this) {
s.setVisible();
}
}, this);
return false;
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/j0eyc625/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setVisible