<div id="chart-basic"></div><script type="application/json">{
"service": "charts",
"version": "2.0",
"custom": ["https://webtools.europa.eu/showcase-demo/resources/chartsapi/02_examples/grouped_categories/grouped_categories.js"]
}</script>
/**
* THE BEST IMPLEMENTATION FOR ANY "Highcharts.chart" SHOULD BE:
*
* // Render empty charts.
* $wt.charts.render().ready(instance => {
*
* // Get any information based on UEC.
* let path = instance.getUEC("path");
*
* // ... You can also manage the UI based on the instance.
* let chartContainer = instance.ui;
*
* // Build your charts config based on highcharts.
* let config = { ... }
*
* // Populate the current charts instance.
* instance.refresh(config);
*
* });
*
*/
$wt.include(rootUrl + "/libs/highcharts-plugins/grouped-categories/grouped-categories.js?t=" + $wt.token, function () {
window.chart = Highcharts.chart({
chart: {
renderTo: "chart-basic",
type: "column"
},
series: [{
data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
}],
xAxis: {
categories: [{
name: "Fruit",
categories: ["Apple", "Banana", "Orange"]
}, {
name: "Vegetable",
categories: ["Carrot", "Potato", "Tomato"]
}, {
name: "Fish",
categories: ["Cod", "Salmon", "Tuna"]
}]
}
});
});