Sparkline Charts using Chart.js

Here is a demo with source code to create cool responsive sparkling charts for your website and web applications.

DEMO

See the Pen Sparkline chart by Puneet Sharma (@webdevpuneet) on CodePen.

HTML

<div class="sparklineContainer">
<canvas height="200" id="sparkLine1"></canvas>
</div>

CSS

.sparklineContainer{
  max-width:200px;
}

JavaScript

Please include the chart.js library before this script.

<!-- Chart JS  -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>

/* Sparkline Chart Options - via chart.js https://www.chartjs.org/ */
var sparkLine1_options = {
    responsive: true,
    maintainAspectRatio: true,
    animation: {
        easing: 'easeInOutQuad',
        duration: 520
    },

    elements: {
        line: {
            tension: 0.4
        }
    },

    scales: {
        x: {
            border: {
                display: false
            },
            grid: {
                display: false
            },
            ticks: {
                display: false
            }
        },
        y: {
            ticks: {
                display: false
            },
            border: {
                display: false
            },
            grid: {
                display: false
            }
        }
    },

    plugins: {
        legend: {
            display: false,
        },
        
    },
};

var sparkLineLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];

/* Sparkline data */
var sL1_data = ["1000", "500", "1500", "1000", "2000", "1500", "2500", "2000", "3000", "2500", "3500", "3000"];

var sparkLine1_data = {
    labels: sparkLineLabels,
    datasets: [
        {
            label: 'Earnings',
            borderColor: '#282828',
            backgroundColor: 'transparent',
            pointBackgroundColor: 'white',
            data: sL1_data,
            fill: 'origin',
            borderWidth: 2,
            pointRadius: 0,
            hitRadius: 25,
            pointHoverRadius: 6,
            pointHoverBackgroundColor: '#282828',
            pointHoverBorderColor: '#fff',
            pointHoverBorderWidth: 6,
        }

    ]
};

if (document.getElementById('sparkLine1')) {
    
    var sparkLine1 = document.getElementById('sparkLine1').getContext('2d');
    var chartInstance = new Chart(sparkLine1, {
        type: 'line',
        data: sparkLine1_data,
        options: sparkLine1_options,
        plugins: []
    });
}