How to not repeat code while creating multiple charts in chart js

by

0👍

✅

Here’s your solution,

  Chart.register(ChartDataLabels);
        chartLabels = ["Mar 2020", 'Mar 2021', 'Apr 2022']
        data = [75, 60, 80]
        data2 = [80, 82, 85]

        var data = {
            labels: chartLabels,
            datasets: [
                {
                    type: 'line',
                    label: 'Sales Growth',
                    data: data,
                    backgroundColor: 'rgb(10,255,255)',
                    borderColor: 'rgb(0,0,0)',
                    borderWidth: 1.5,
                    lineTension: 0.6,
                }
            ]
        }

        var data2 = {
            labels: chartLabels,
            datasets: [
                {
                    type: 'line',
                    label: 'Sales Growth',
                    data: data2,
                    backgroundColor: 'rgb(10,255,255)',
                    borderColor: 'rgb(0,0,0)',
                    borderWidth: 1.5,
                    lineTension: 0.6,
                }
            ]
        }
        
        var options = {
            layout: {
                padding: 40
            },
            elements: {
                point: {
                    hoverRadius: 5
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                datalabels: {
                    color: 'black',
                    anchor: 'end',
                    align: 'top',
                    formatter: (v, cat) => {
                        let label = cat.chart.data.labels[cat.dataIndex];
                        if (label != 'TTM') {
                            label = '' + label;
                        }
                        return label + '\n ' + v;
                    },
                    border: true
                }
            },
            scales: {
                y: {
                    display: false,
                    grid: {
                        display: false,
                        lineWidth: 3
                    }
                },
                x: {
                    display: false,
                    grid: {
                        display: false,
                    }
                }
            }
        }

        var cat = document.getElementById('1st_year').getContext('2d');

        var myChart = new Chart(cat, {
            data: data,
            options: options
        });

         var cat2 = document.getElementById('2nd_year').getContext('2d');

         var myChart2 = new Chart(cat2, {
             data: data2,
             options: options
         });
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container">
        <div class="row mt-2">
        
            <div class="col-lg-3 col-md-6 col-sm-12 border rounded text-center">
                <h6 class="mb-4 mt-2">Average of 1st Year Student's</h6>
                <canvas id="1st_year"></canvas>
            </div>
        
            <div class="col-lg-3 col-md-6 col-sm-12 border rounded text-center">
                <h6 class="mb-4 mt-2">Average of 2nd Year Student's</h6>
                <canvas id="2nd_year"></canvas>
            </div>
            
        </div>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Leave a comment