javascripthtmlajaxbootstrap-4chartist.js

Getting problem in displaying chartist graph in html in button is clicked

I am trying to display the chartist graph if the user clicks the button. But when I was doing this I was facing the problem that, if I display the graph normally then it will show properly but if I put the ajax show() the all the graph is getting shrink as given in the image below.

Without button clicked Without button clicked

On button clicked display of graph on button clicked display of graph

Demo.html

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='CSSPage/StyleSheet.css') }}">
    <script type="application/javascript" src="{{ url_for('static', filename='JSPage/JavaScript.js') }}"></script>

    <title>Demo</title>
</head>
<body class="d-flex h-100 text-center text-white user-select-none bg-white">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <main style="padding-top: 130px;">

            <button class="btn btn-warning btn-sm" id="Demo">Graph</button><br><br>

            <div class="ct-chart ct-perfect-fourth mx-auto my-auto w-75 h-50 border" id="DGraph" style="display: none"></div>

            <script>
                var data = {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
                    series: [
                        [5, 2, 4, 2, 0]
                    ]
                };
                new Chartist.Bar('.ct-chart', data);

                $(document).ready(function () {
                    $('#Demo').on('click', function () {
                        $('#DGraph').show()
                    })
                })
            </script>
        </main>
    </div>
</body>
</html>

what is worng with my code please help me.

Solution

  • Just move chart initialization to inside click

    $(document).ready(function() {
  $('#Demo').on('click', function() {
    $('#DGraph').show()
    new Chartist.Bar('.ct-chart', data);
  })
})