I am a beginner in Highcharts and I am trying to achieve what has been explained in the following case using the Highcharts Editor:
Highcharts Line Chart, display series name at the end of line series
I don't know if the same can be achieved by just using the Editor's interface but if custom code needs to be used, I can do that in the Custom Code tab of the Editor.
I tried inputting in the Custom Code section of the Highcharts Editor the code written by jlbriggs but nothing happens.
Is it possible to get a basic explanation on how to achieve what I want? Below is the HTML code I took from the graph I created in Highcharts Editor.
<div id="highcharts-825789cd-edd9-4d9e-aba4-e3a80fa42369"></div>
<script>
(function() {
var files = ["https://code.highcharts.com/stock/highstock.js", "https://code.highcharts.com/highcharts-more.js", "https://code.highcharts.com/highcharts-3d.js", "https://code.highcharts.com/modules/data.js", "https://code.highcharts.com/modules/exporting.js", "https://code.highcharts.com/modules/funnel.js", "https://code.highcharts.com/modules/annotations.js", "https://code.highcharts.com/modules/solid-gauge.js"],
loaded = 0;
if (typeof window["HighchartsEditor"] === "undefined") {
window.HighchartsEditor = {
ondone: [cl],
hasWrapped: false,
hasLoaded: false
};
include(files[0]);
} else {
if (window.HighchartsEditor.hasLoaded) {
cl();
} else {
window.HighchartsEditor.ondone.push(cl);
}
}
function isScriptAlreadyIncluded(src) {
var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].hasAttribute("src")) {
if ((scripts[i].getAttribute("src") || "").indexOf(src) >= 0 || (scripts[i].getAttribute("src") === "http://code.highcharts.com/highcharts.js" && src === "https://code.highcharts.com/stock/highstock.js")) {
return true;
}
}
}
return false;
}
function check() {
if (loaded === files.length) {
for (var i = 0; i < window.HighchartsEditor.ondone.length; i++) {
try {
window.HighchartsEditor.ondone[i]();
} catch (e) {
console.error(e);
}
}
window.HighchartsEditor.hasLoaded = true;
}
}
function include(script) {
function next() {
++loaded;
if (loaded < files.length) {
include(files[loaded]);
}
check();
}
if (isScriptAlreadyIncluded(script)) {
return next();
}
var sc = document.createElement("script");
sc.src = script;
sc.type = "text/javascript";
sc.onload = function() {
next();
};
document.head.appendChild(sc);
}
function each(a, fn) {
if (typeof a.forEach !== "undefined") {
a.forEach(fn);
} else {
for (var i = 0; i < a.length; i++) {
if (fn) {
fn(a[i]);
}
}
}
}
var inc = {},
incl = [];
each(document.querySelectorAll("script"), function(t) {
inc[t.src.substr(0, t.src.indexOf("?"))] = 1;
});
function cl() {
if (typeof window["Highcharts"] !== "undefined") {
var options = {
"title": {
"text": "One year, five year and 10 year survival estimates for the 21 most common cancers in England, 1971"
},
"subtitle": {
"text": "Survival estimates in 1971 (%)"
},
"exporting": {},
"chart": {
"type": "line",
"parallelAxes": {
"labels": {
"enabled": true
},
"alignTicks": true,
"endOnTick": true,
"max": 4,
"maxRange": 4,
"minorGridLineWidth": 0,
"gridLineWidth": -1
},
"inverted": false,
"height": 872,
"alignTicks": true,
"showAxes": false,
"ignoreHiddenSeries": true
},
"series": [{
"name": "Oesophagus",
"turboThreshold": 0,
"marker": {
"enabled": true
},
"type": "line",
"colorByPoint": false,
"selected": true,
"showInNavigator": true,
"dataLabels": {
"enabled": false
},
"label": {
"onArea": true,
"enabled": true
},
"allowPointSelect": true,
"xAxis": 0,
"yAxis": 0
}, {
"name": "Stomach",
"turboThreshold": 0
}, {
"name": "Colon",
"turboThreshold": 0
}, {
"name": "Rectum",
"turboThreshold": 0
}, {
"name": "Pancreas",
"turboThreshold": 0,
"marker": {
"enabled": true
},
"type": "line"
}, {
"name": "Larynx",
"turboThreshold": 0
}, {
"name": "Lung",
"turboThreshold": 0
}, {
"name": "Melanoma of skin",
"turboThreshold": 0
}, {
"name": "Breast",
"turboThreshold": 0
}, {
"name": "Cervix",
"turboThreshold": 0
}, {
"name": "Uterus",
"turboThreshold": 0
}, {
"name": "Ovary",
"turboThreshold": 0
}, {
"name": "Prostate",
"turboThreshold": 0,
"marker": {
"enabled": true
},
"colorByPoint": false
}, {
"name": "Testis",
"turboThreshold": 0
}, {
"name": "Kidney",
"turboThreshold": 0
}, {
"name": "Bladder",
"turboThreshold": 0
}, {
"name": "Brain",
"turboThreshold": 0
}, {
"name": "Hodgkin's disease",
"turboThreshold": 0
}, {
"name": "Non-Hodgkin lymphoma",
"turboThreshold": 0
}, {
"name": "Multiple myeloma",
"turboThreshold": 0
}, {
"name": "Leukaemia",
"turboThreshold": 0
}, {
"name": "Other cancers",
"turboThreshold": 0,
"label": {
"connectorAllowed": true
}
}],
"plotOptions": {
"series": {
"dataLabels": {
"enabled": false
}
}
},
"data": {
"csv": "\"Year\";\"Oesophagus\";\"Stomach\";\"Colon\";\"Rectum\";\"Pancreas\";\"Larynx\";\"Lung\";\"Melanoma of skin\";\"Breast\";\"Cervix\";\"Uterus\";\"Ovary\";\"Prostate\";\"Testis\";\"Kidney\";\"Bladder\";\"Brain\";\"Hodgkin's disease\";\"Non-Hodgkin lymphoma\";\"Multiple myeloma\";\"Leukaemia\";\"Other cancers\"\n\"1-year\";14.7;15.3;42.6;54.1;10.2;16;16.3;74.5;74;75.6;43.7;66.1;83.3;44.9;45.4;62.8;17.6;73.9;49.4;36.8;35.4;57.3\n\"5-year\";4;5.2;25.3;23.6;2.4;4.6;4.8;40.5;51.3;59;20.5;36.9;70.5;28.5;28.9;40.9;6.6;54.2;29.3;12.1;13.1;40.4\n\"10-year\";3.3;4;23;19.1;1.3;3.1;3.2;34.9;46;55.5;17.9;25.1;69.2;23;23;33.7;5;45.2;21.7;6.8;6.6;36.9",
"googleSpreadsheetKey": false,
"googleSpreadsheetWorksheet": false
},
"legend": {
"floating": false,
"enabled": false,
"verticalAlign": "bottom",
"align": "center",
"layout": "horizontal"
},
"pane": {
"background": []
},
"responsive": {
"rules": []
},
"colorAxis": {
"plotLines": [{
"label": {
"useHTML": false,
"text": "'series'",
"x": 5,
"y": 5,
"verticalAlign": "'middle'",
"textAlign": "'left'"
}
}],
"plotBands": [{}],
"labels": {
"x": 3,
"y": 2
}
},
"tooltip": {
"shared": true,
"enabled": true
},
"rangeSelector": {
"enabled": false,
"floating": false
},
"credits": {
"enabled": false
},
"xAxis": [{
"type": "category",
"labels": {
"x": 0,
"zIndex": 7
},
"opposite": true
}],
"yAxis": [{
"title": {
"text": ""
},
"labels": {
"format": "{hide}"
},
"type": "linear"
}],
"accessibility": {
"describeSingleSeries": false,
"enabled": true
}
};
new Highcharts.Chart("highcharts-825789cd-edd9-4d9e-aba4-e3a80fa42369", options);
}
}
})();
</script>
I just need the names of each series to be displayed at the end of each line rather than in the legend.
