現場では、Charjsを使用して、グラフを描いています。
勉強ノードをメモします。

Chart.jsの公式サイト：https://www.chartjs.org/

##Chartjsを導入する方法：

CDNで

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

インストール
　開発ディレクトリ内、npmで下記のコマンドでインストールする。
　(スタンドアロン版、バンドル版両方インストールされる)

$ npm install chart.js --save

下記のnode_modulesモジュールとpacage-lock.jsonパッケージが生成される

######スタンドアロン版とバンドル版
スタンドアロン版
ファイル：
　dist/Chart.js
　dist/Chart.min.js
　(時間軸を使用したい場合は、Moment.jsをインストールする必要)

バンドル版(時間軸を使用可。Moment.jsインストール不要。)
ファイル：
　dist/Chart.bundle.js
　dist/Chart.bundle.min.js

必要に応じて、pathを確認、index.htmlファイルに導入する。例えば：Chart.js

<script src="node_modules/chart.js/dist/Chart.js"></script>

以上の設定は準備でしたら、例のコードを練習します。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外部スクリプト方法 -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> -->
    <!-- インストール方法 -->
    <script src="node_modules/chart.js/dist/Chart.js"></script>  
</head>
<body>
    <p>chart_</p>
    <!-- canvas要素を設置 -->
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
        // 要素またはコンテキストを取得
        var ctx = document.getElementById("myChart");
        // チャートタイプをインスタンスかする
        var myChart = new Chart(ctx, {
            // 棒グラフ
            type: 'bar',  
            // データを設置
            data: {
                // データのラベル
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    // 凡例
                    label: '# of Votes',
                    // データの量
                    data: [12, 19, 3, 5, 2, 3],
                    // 各データの色
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    // 棒枠色
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    // 棒枠線の厚さ
                    borderWidth: 1
                }]
            },
            // オプション
            options: {
                // スケール設定
                scales: {
                    // 縦スケールを設定
                    yAxes: [{
                        ticks: {
                            // ゼロから表示
                            beginAtZero:true
                        }
                    }]
                }
            }
        });
        </script>
</body>
</html>