Everything works as it should if I use var instead of const in const chartData = {{{getChartData}}};
Not even let works, so this has something with local scopes to do.
when you use an html script any variable you define is put into the global scope, the variables are only in local scope if they are inside a function. for your case the const, let does not work because these declarations are more strict, they don't allow duplicates in the same scope, and since your variables are all in the global scope then you have a conflict. when you use var it works because that declaration is more permissive, it allows duplicates.
also it is worth to mention that i think you are producing an invalid html document with your child template calls, i mean it can work right now but it is technically a bad html document what you are generating.
this is what you are producing:
<div class="chart-container">
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id={{getChartId}} style="width:{{getChartWidth}}; height:{{getChartHeight}}"/>
<script>
const chartData = {{{getChartData}}};
Highcharts.chart({{getChartId}}, {
series: chartData.series,
chart: {
type: 'area'
},
...// options omitted in this example
});
</script>
</body>
</html>
</div>
technically you can not have another html, body element in the same html document. as i said it can work just fine right now but it is not a best practice. if you want your child template to also work as a main template you usually need a bit of more code, you need to detect when the template is called as child or main, and based on that include the full html definition or just part of it that is designed for embedding into another document.
FYI you can detect wheter the template is used as main or child template in a script, by checking the req.context.isChildRequest variable
