Also, I'm getting this error on HTML version of Metronic:

"uncaught ReferenceError: KTUtil is not defined at theme-mode.js:165:1"

I'll "Amcharts pie" and "html headers" code.

" var mode = KTThemeMode.getMode();

am5.ready(function () {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("kt_amcharts_3");
root._logo.dispose();
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
if (mode === "dark") {
root.setThemes([
am5themes_Animated.new(root),
am5themes_Dark.new(root)
]);
}else{
root.setThemes([
am5themes_Animated.new(root),
]);
}

// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = root.container.children.push(am5percent.PieChart.new(root, {
layout: root.verticalLayout,
radius: am5.percent(50), // The texts on the pie can visible when its set to smaller radius. for ex: 50 or 60
paddingRight: 0,
paddingTop: -70,
paddingBottom: 0,
paddingLeft: 0,
}));

// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series = chart.series.push(am5percent.PieSeries.new(root, {
alignLabels: true,
calculateAggregates: true,
valueField: "value",
categoryField: "goal"
}));

series.labels.template.setAll({
maxWidth: 80,
fontSize: 10,
oversizedBehavior: "wrap" // to truncate labels, use "truncate"
});
/* series.slices.template.setAll({
strokeWidth: 1,
stroke: am5.color(0xffffff)
}); */

//series.labelsContainer.set("paddingTop", 30);

// Set up adapters for variable slice radius
// https://www.amcharts.com/docs/v5/concepts/settings/adapters/
series.slices.template.adapters.add("radius", function (radius, target) {
var dataItem = target.dataItem;
var high = series.getPrivate("valueHigh");

if (dataItem) {
var value = target.dataItem.get("valueWorking", 0);
return radius * value / high
}
return radius;
});

// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll(
[ {
value: 10,
goal: "Push-up"
}, {
value: 9,
goal: "Walk 5K Step"
}, {
value: 6,
goal: "Drink 2L Water"
}, {
value: 5,
goal: "Read a book"
}
]);

// Create legend
// https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
// Pie chart footer data can be removed if code commented.
/* var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50,
marginTop: 15,
marginBottom: 15
})); */

legend.data.setAll(series.dataItems);

// Play initial series animation
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series.appear(1000, 100);

});"


"<link href="{% static "assets/plugins/custom/datatables/datatables.bundle.css" %}" rel="stylesheet"
type="text/css"/>
<!--end::Vendor Stylesheets-->
<script src="{% static "assets/plugins/custom/ckeditor/ckeditor-inline.bundle.js" %}"></script>
<!--begin::Global Stylesheets Bundle(mandatory for all pages)-->
<link href="{% static "assets/plugins/global/plugins.bundle.css" %}" rel="stylesheet" type="text/css"/>
<link href="{% static "assets/css/style.bundle.css" %}" rel="stylesheet" type="text/css"/>
<!--end::Global Stylesheets Bundle-->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/plugins/rangeSelector.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Dark.js"></script>
<script src="{% static "assets/js/layout/theme-mode.js" %}"></script>"

How can I solve this issiue?

Hi,

Please refer to this example in src/js/widgets/charts/widget-1.js</code.




// Update chart on theme mode change
 KTThemeMode.on("kt.thememode.change", function() { 
 if (chart.rendered) {
 chart.self.destroy();
 }

 initChart(chart);
 });