Hide highcharts series name on the chart - graph

Question

I am messing around with highcharts for a company project and I have the name/number from calculations (totals) being displayed int he legend. The problem is they also display on the graph. I can't for the life of me figure out how to turn them off on the chart, yet leave them on in the legend. I've read through the API and maybe I missed it but could use some help if you all don't mind.
Code:
Highcharts.chart('high_charts_admin', {
title: {
text: 'Adset ID: '+results[1].data[0].adset_id,
},
subtitle: {
text: 'Campaign Name: '+results[1].data[0].campaign_name,
},
yAxis: {
title: {
text: ''
}
},
xAxis: {
title: {
text: 'Day of the Campaign',
},
//type: 'datetime',
categories: results[0][8]
},
legend: {
//labelFormatter: function() {
// return '<span style="color: '+this.color+'">'+ this.name + '</span>';
// },
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemWidth: 250,
itemStyle: {
fontSize: '16px',
color: 'black'
},
itemMarginTop: 12,
itemMarginBottom: 12,
squareSymbol: true,
symbolHeight: 25,
symbolWidth: 30,
symbolRadius: 100,
},
chart: {
marginRight: 300,
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0,
type: 'series',
//showInLegend: false,
}
},
series: [{
name: 'Results: '+results[2][0],
data: results[0][0],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Reach: '+results[2][1],
data: results[0][1],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Impressions: '+results[2][2],
data: results[0][2],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Cost Per Lead: '+results[2][3],
data: results[0][3],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Spend: '+results[2][4],
data: results[0][4],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CTR (All): '+results[2][5],
data: results[0][5],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CPC (All): '+results[2][6],
data: results[0][6],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Clicks: '+results[2][7],
data: results[0][7],
type: 'spline',
marker: {
radius: 2
},
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Here is my code:
Highcharts.chart('high_charts_admin', {
title: {
text: 'Adset ID: '+results[1].data[0].adset_id,
},
subtitle: {
text: 'Campaign Name: '+results[1].data[0].campaign_name,
},
yAxis: {
title: {
text: ''
}
},
xAxis: {
title: {
text: 'Day of the Campaign',
},
//type: 'datetime',
categories: results[0][8]
},
legend: {
//labelFormatter: function() {
// return '<span style="color: '+this.color+'">'+ this.name + '</span>';
// },
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemWidth: 250,
itemStyle: {
fontSize: '16px',
color: 'black'
},
itemMarginTop: 12,
itemMarginBottom: 12,
squareSymbol: true,
symbolHeight: 25,
symbolWidth: 30,
symbolRadius: 100,
},
chart: {
marginRight: 300,
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0,
type: 'series',
//showInLegend: false,
}
},
series: [{
name: 'Results: '+results[2][0],
data: results[0][0],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Reach: '+results[2][1],
data: results[0][1],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Impressions: '+results[2][2],
data: results[0][2],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Cost Per Lead: '+results[2][3],
data: results[0][3],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Spend: '+results[2][4],
data: results[0][4],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CTR (All): '+results[2][5],
data: results[0][5],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CPC (All): '+results[2][6],
data: results[0][6],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Clicks: '+results[2][7],
data: results[0][7],
type: 'spline',
marker: {
radius: 2
},
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});

Answer 1

You have added total value in the series name
name: 'Results: '+results[2][0],
So it is showing in charts as well as in legend.
Instead of this you should use custom param in series defination like
series: [{
name: 'Results1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot,num)=>{return tot+num}),
type: 'spline',
marker: {
radius: 5
}
}]
Above I added total param in series, then I will use labelFormatter to show the total value in legend.
legend: {
labelFormatter: function() {
return this.userOptions.name + ': ' + this.userOptions.total
},
},
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
labelFormatter: function() {
return this.userOptions.name + ': ' + this.userOptions.total
},
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Results1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot, num) => {
return tot + num
}),
type: 'spline',
marker: {
radius: 5
},
}, {
name: 'Results2',
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4],
total: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4].reduce((tot, num) => {
return tot + num
}),
type: 'spline',
marker: {
radius: 5
},
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<div id="container" style="height: 400px"></div>
Fiddle demo

Answer 2

I think that removing the series-label module script from your HTML document is a solution which you are looking for.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
Demo: https://jsfiddle.net/BlackLabel/f6rya8k3/
API: https://api.highcharts.com/highcharts/plotOptions.series.label