ChartJS Line Chart

Multiple Line Chart

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.17/css/bulma.min.css">
<script src="https://unpkg.com/vue"></script>
<div id="app">
    <div class="columns is-mobile">
        <div class="column is-3">
            <div class="box">
                <nav class="media">
                    <div class="media-left">
                        Hi there big boys
                    </div>
                    <div class="media-right">
                      <div class="chart-container">
                          <canvas id='chart'></canvas>
                      </div>
                    </div>
                </nav>
            </div>
        </div>
        <div class="column is-7">
          <div class="box">
            <p>
              Im just standing here trying to block this chart
            </p>
            <p>
              Come on.. go away
            </p>            
          </div>
        </div>
    </div>
</div>

CSS

.chart-container {
    position: relative;
    height: 100px;
}

JavaScript

const make = ({
    id,
    responsive = false
}) => {
    const barChartElement = document.getElementById(id);
    const barChart = new Chart(barChartElement, {
        type: 'line',
        responsive,
        options: {
            tooltips: {
                enabled: false
            },
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    display: false
                }],
                yAxes: [{
                    display: false
                }]
            },
            elements: {
                point: {
                    radius: 0
                }
            },
            responsive: true,
            maintainAspectRatio: false
        },
        data: {
            legend: false,
                labels: [1, 2, 3, 4, 5, 6],
                datasets: [
                    {
                        label: 'ops/m',
                        backgroundColor: '#f87979',
                        data: [1, 5, 1, 3, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1, 0],
                        fill: false,
                        borderColor: 'orange'
                    }
                ]
        }
    });
}

make({
    id: 'chart'
})