<html>
  <head>
    <style type="text/css">
      .my-chart-container {
        max-width: 600px;
        max-height: 400px;
      }
    </style>

  </head>
  <body>
    <h3>Case.1 basic pattern</h1>
    <div class="my-chart-container">
      <canvas id="my-chart-1" width="600" height="200"></canvas>
    </div>

    <h3>Case.2 stack group pattern</h1>
    <div class="my-chart-container">
      <canvas id="my-chart-2" width="600" height="300"></canvas>
    </div>

    <h3>Case.3 stacked vertical bar</h1>
    <div class="my-chart-container">
      <canvas id="my-chart-3" width="600" height="300"></canvas>
    </div>

    <h3>Case.4 stacked area</h1>
    <div class="my-chart-container">
      <canvas id="my-chart-4" width="600" height="300"></canvas>
    </div>

    <script type="text/javascript" src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>
    <script type="text/javascript" src="../src/index.js"></script>
    <script type="text/javascript" src="./index.js"></script>
  </body>
</html>

<html>
  <head>
    <meta charset="UTF-8">
    <style type="text/css">
      .my-chart-container {
        max-width: 600px;
        max-height: 400px;
      }
    </style>

  </head>
  <body>
    <h3>Case.1 basic pattern</h1>
    <div class="my-chart-container">
      <canvas id="my-chart-1" width="600" height="200"></canvas>
    </div>

    <h3>Case.2 stack group pattern</h1>
    <div class="my-chart-container">
      <canvas id="my-chart-2" width="600" height="300"></canvas>
    </div>

    <h3>Case.3 stacked vertical bar</h1>
    <div class="my-chart-container">
      <canvas id="my-chart-3" width="600" height="300"></canvas>
    </div>

    <h3>Case.4 stacked area</h1>
    <div class="my-chart-container">
      <canvas id="my-chart-4" width="600" height="300"></canvas>
    </div>

    <script type="text/javascript" src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>
    <script type="text/javascript" src="../src/index.js"></script>
    <script type="text/javascript" src="./index.js"></script>
  </body>
</html>

Set charset to avoid text garbling
Set charset to avoid text garbling
