Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

[CHARTS] theme mode changes without refresh.


How can I change theme mode for charts? For example: If user change theme mode to dark from light. How can I update the charts theme mode?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


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);
});


Regards.

Regards.



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 make sure your custom js code is triggered via KTUtil's document ready event when all the core code is loaded and available:


// On document ready
KTUtil.onDOMContentLoaded(function() {
KTAppLayoutBuilder.init();
});


Regards,
Sean


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(