Question on integration of Charts.js in Onsen v2

rkoeln

Hi.

I created an Onsen v2 “app” which uses the carousel and in each carousel item cards. Result works fine.
I would like to show a graph on one of the cards and selected charts.js (but get the same result with other JS Frameworks).

Here’s how I insert it:
<ons-card>
<div class=‘title’ style=‘text-align: center;’>
Jahresüberblick
</div>
<div class=‘content’ style=‘text-align: center;’>
<img style=‘max-width:90%;’ src=’{URL_to_myserver}/graph_2017_2018.PNG’ alt=‘Überblick’ width=‘1210’>
</div>
<div class=‘chartwrapper’>
<canvas id=‘myChart’></canvas>
<script src=’./chartjs_script.js’></script>
</div>
</ons-card>

As soon as I put in the bold marked lines the chart is displayed fine but the design breaks and the next carousel-item is not displayed anymore as a carousel item but as just part of the page (just extending the current carousel item and not swipeable anymore).

Looks like the Javascript of chartjs destroys the integrity of the onsen page. As soon as I remove the bold marked lines everything is back to normal.

I cannot see where my HTML is wrong or where the JS breaks the code.

Would you have a hint what I can check?

Thanks, Ralf

jamal

@rkoeln, check the following:

https://www.chartjs.org/docs/latest/getting-started/integration.html

Maybe it has to do with the Content Security Policy. From the above link, it states:

By default, Chart.js injects CSS directly into the DOM. For webpages secured using Content Security Policy (CSP), this requires to allow style-src ‘unsafe-inline’. For stricter CSP environments, where only style-src ‘self’ is allowed, the following CSS file needs to be manually added to your webpage:

// Disable automatic style injection
Chart.platform.disableCSSInjection = true;

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Question on integration of Charts.js in Onsen v2