TESTED 15/1:
- Highchart-generated HTML code into the HTML, Shortcode and Code widget in WordPress editing environment.
- The HTML widget is the only one that accepts the codes.
ISSUES:
- The graph’s Y-axis values (currencies) are not showing.
- The graph does not show in the public view if inserted in the two-column layout.
2-COLUMN LAYOUT BELOW:
- Highcharts HTML code pasted into both the left and the right columns.
- HTML WIDGET used in both the left and the right columns.
- A headline added to the left column. No headline or any additional elements or features to the right column.
- Both columns show chart in the preview inside the editing environment (the back-end)
- Both charts are perfectly automatically adjusted to the frame dimensions.
- None seems to show in the public view.
The 2-column layout starts below this line:
HTML WIDGET in 2-COLUMN LAYOUT | embed:HTML
End of the 2-column layout.
CODE WIDGET | embed:HTML
<div id="highcharts-8b7b4647-2312-4d2a-b8d9-9651bc398856"></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/accessibility.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"){Highcharts.setOptions({lang:{"thousandsSep":","}});var options={"title":{"text":"Deal Amounts in Currencies"},"subtitle":{"text":"Amounts of Deals in Currencies"},"exporting":{"enabled":false},"chart":{"type":"column","inverted":true,"polar":false,"style":{"fontFamily":"Arial","color":"#333","fontSize":"12px","fontWeight":"normal","fontStyle":"normal"}},"series":[{"name":"DealAmountCcy","turboThreshold":0,"marker":{"enabled":false},"color":"#43a047","negativeColor":"#f50057","colorByPoint":false,"dashStyle":"Solid"}],"plotOptions":{"series":{"dataLabels":{"enabled":true}}},"data":{"csv":"\"Currency\";\"DealAmountCcy\"\n\"SEK\";9500000000\n\"NOK\";5500000000\n\"USD\";3600000000\n\"EUR\";1500000000\n\"HKD\";1200000000\n\"NZD\";400000000\n\"INR\";370200000\n\"GBP\";350000000\n\"RON\";102000000\n\"TRY\";73180000\n\"AUD\";50000000\n\"BRL\";14110000","googleSpreadsheetKey":false,"googleSpreadsheetWorksheet":false},"yAxis":[{"title":{"text":"Values in Currencies"},"labels":{}}],"xAxis":[{"title":{},"labels":{}}],"legend":{"enabled":false},"tooltip":{"enabled":true,"shared":false},"lang":{"thousandsSep":","},"credits":{"enabled":true,"text":"Nordic Investment Bank","href":"https://www.nib.int"},"accessibility":{"describeSingleSeries":false},"boost":{"allowForce":false,"enabled":false},"pane":{"background":[]},"responsive":{"rules":[]}};/*
// Sample of extending options:
Highcharts.merge(true, options, {
chart: {
backgroundColor: "#bada55"
},
plotOptions: {
series: {
cursor: "pointer",
events: {
click: function(event) {
alert(this.name + " clicked\n" +
"Alt: " + event.altKey + "\n" +
"Control: " + event.ctrlKey + "\n" +
"Shift: " + event.shiftKey + "\n");
}
}
}
}
});
*/new Highcharts.Chart("highcharts-8b7b4647-2312-4d2a-b8d9-9651bc398856", options);}}})();
</script>SHORTCODE WIDGET | embed:HTML