jQuery addClass example

Change class name on click in jQuery

by k_sav

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="mychart"></canvas>

CSS

body {
  background: #20262E;
  font-family: Helvetica;
  padding-top: 50px
}

#mychart {
  height: 300px;
}

JavaScript

var data = [{
            label: 'New',
            backgroundColor: '#1d3f74',
            data: [6310, 5742, 4044, 5564]
        }, {
            label: 'Repeat',
            backgroundColor: '#6c92c8',
            data: [11542, 12400, 12510, 11450]
        }];


        var options = {
            maintainAspectRatio: false,
            spanGaps: false,
            responsive: true,
            legend: {
                display: true,
                position: 'bottom',
                labels: {
                    fontColor: "#fff",
                    boxWidth: 14,
                    fontFamily: 'proximanova'
                }
            },
            tooltips: {
                mode: 'label',
                callbacks: {
                    label: function(tooltipItem, data) {
                        var type = data.datasets[tooltipItem.datasetIndex].label;
                        var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                        var total = 0;
                        for (var i = 0; i < data.datasets.length; i++)
                            total += data.datasets[i].data[tooltipItem.index];
                        if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
                            return type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,');
                        } else {
                            return [type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,'), "Overall : " + total];
                        }
                    }
                }
            },
            plugins: {
                datalabels: {
                    formatter: function(value, ctx) {
                        let sum = 0;
                        let dataArr = ctx.chart.data.datasets[0].data;
                        dataArr.map(data => {
                            sum += data;
                        });
                        let percentage = (value * 100 /...