Monaca Onsen UI Discord Chat Github Repo

Question on integration of Charts.js in Onsen v2



  • 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



  • @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:

    <link rel=“stylesheet” type=“text/css” href=“path/to/chartjs/dist/Chart.min.css”>
    And the style injection must be turned off before creating the first chart:

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