Open-source by Keenthemes!Support our KtUI and ReUI open-source projects and help with growth.
Star on Github

chart datasets


hi,
we buy the metronic theme and i have difficult with the charts datasets.
in the docs its say const data = {
labels: labels,
datasets: [
...
]
};
but each chart has different dataset structure.
so I open the HTML file of the theme to check maybe there but I didn't understand where all the JS and data.

can you please point me to the right direction to understand the datasets issue or see some examples ?


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 (2)


Hi there,

You're absolutely right — while Metronic provides a common structure for initializing charts using libraries like Chart.js, each chart type (bar, pie, line, etc.) often requires a slightly different dataset configuration based on the data it visualizes.

In the Metronic theme, most chart data and configuration are managed in separate JavaScript files, often located in the /assets/js/widgets/ or /assets/js/custom/ folders. You can inspect these files to see examples of how datasets are structured for each chart.

Also, if you're looking for a simple way to understand how data structures relate to chart behavior, we recommend checking out some practical implementations and guides we’ve compiled here: While the focus is different, the examples there offer insight into how structured data is dynamically used, which might help you visualize dataset applications more clearly.



Hi,

May I know which Metronic version are you using ? Our chart examples are based on Apexcharts and you can refer to the plugin's official documentation.

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  :(