Customizing Chart.js: Converting Data Points to Bengali

4 min readMay 15, 2024

Hello.
One of the most important aspects of data presentation is the creation of visually appealing and informative charts. The open-source JavaScript library Chart.js makes it simple to create a variety of chart types.

Nevertheless, there are situations when you may need to modify your charts so that the data is displayed in a different language or format. This blog post will walk you through the process of converting data points in Chart.js to Bengali.

Let’s begin the steps…

Step-1: Creating a canvas to show the chart

First create a simple html structure to show the chart. Add a canvas tag with an ID.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<div class="row>
    <div class="col-12" style="background-color: #e6f2ff;">
       <canvas id="chart-1"></canvas>
    </div>
</div>

</body>
</html>

Step-2: Setting Up the environment

First you need to make sure Chart.js is included in your project. You can do this by adding CDN.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

Step-2: Preparing The Data

Let’s create an imaginary scenario.
An e-commerce platform tracks various performance metrics daily, including sales, customer interactions, and internal communications. Recently, they’ve been monitoring these metrics to assess their operational efficiency and customer engagement. The data spans from May 8, 2024, to May 15, 2024. The data pattern looks like the following and you want to create a bar chart using Chart.js.

{
"2024–05–08": {
"total_item": 2356,
"total_customer": 1405,
"total_shop": 10
},
"2024–05–09": {
"total_item": 3360,
"total_customer": 2098,
"total_shop": 15
},
"2024–05–10": {
"total_item": 4290,
"total_customer": 1045,
"total_shop": 18
},
"2024–05–11": {
"total_item": 2356,
"total_customer": 746,
"total_shop": 22
},
"2024–05–12": {
"total_item": 1578,
"total_customer": 140,
"total_shop": 15
},
"2024–05–13": {
"total_item": 4500,
"total_customer": 654,
"total_shop": 30
},
"2024–05–14": {
"total_item": 1256,
"total_customer": 350,
"total_shop": 35
}
}

Let’s prepare the data in separate arrays.

var jsonData = {the data is shown above}
var dates = [];
var totalItem = [];
var totalCustomer = [];
var totalShop = [];
// Extract data from JSON
Object.keys(jsonData).forEach(function(key) {
var data = jsonData[key];
dates.push(key);
totalItem.push(data.total_item);
totalCustomer.push(data.total_customer);
totalShop.push(data.total_shop);
});

The provided JavaScript code snippet is designed to extract data from the jsonData variable, and populate several arrays with this data. The data arrays looks like this,

dates : ["2024–05–08", "2024–05–09", "2024–05–10", "2024–05–11", "2024–05–12", "2024–05–13", "2024–05–14"]
totalItem : [2356, 3360, 4290, 2356, 1578, 4500, 1256]
totalCustomer : [1405, 2098, 1045, 746, 140, 654, 350]
totalShop : [50, 60, 70 , 46, 77, 65 , 35]

Step 3: Converting Numbers to Bengali Digits

To display numerical data in Bengali, we need a function that converts English digits to their Bengali equivalents:

function convertToBengaliDigits(number) {
const digits = {
0: '০',
1: '১',
2: '২',
3: '৩',
4: '৪',
5: '৫',
6: '৬',
7: '৭',
8: '৮',
9: '৯'
};
return String(number).replace(/\d/g, (match) => digits[match]);
}j

Step 4: Converting English Dates to Bengali Dates

To display numerical data in Bengali, we need a function that converts English digits to their Bengali equivalents:


// Function to convert an array of dates to Bengali dates
function convertArrayToBengaliDates(datesArray) {
    return datesArray.map(date => convertToBengaliDigits(date));
}
var bengaliDates = convertArrayToBengaliDates(dates);
// Output:[ '২০২৪-০৫-০৮','২০২৪-০৫-০৯','২০২৪-০৫-১০','২০২৪-০৫-১১','২০২৪-০৫-১২','২০২৪-০৫-১৩', '২০২৪-০৫-১৪']

Step 5: Customizing the Chart

Next, we’ll create the bar chart and use the convertToBengaliDigits function to customize the data labels and tooltips. Here’s the complete code to create the chart:

const potrojari_ctx = document.getElementById('chart-1');
Chart.register(ChartDataLabels);

new Chart(potrojari_ctx, {
    type: 'bar',
    data: {
        labels: bengaliDates,
        datasets: [
            {
                label: "মোট শপ",
                backgroundColor: "#3399ff",
                data: totalShop
            },
            {
                label: "মোট কাস্টমার",
                backgroundColor: "#8e5ea2",
                data: totalCustomer
            },
            {
                label: "মোট আইটেম",
                backgroundColor: "#00cc99",
                data: totalItem
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: '৭ দিনের পরিসংখ্যান চার্ট',
                color: '#000000',
                font: {
                    weight: 'bold',
                    size: "16pt"
                }
            },
            datalabels: {
                anchor: 'end',
                align: 'end',
                color: '#000000',
                font: {
                    weight: 'normal',
                    size: '10pt'
                },
                formatter: function (value) {
                    return convertToBengaliDigits(value);
                }
            },
            tooltip: {
                callbacks: {
                    label: function (context) {
                        const label = context.dataset.label || '';
                        const value = context.raw;
                        return `${label}: ${convertToBengaliDigits(value)}`;
                    }
                }
            }
        }
    }
});

That’s it…
The output will show like this…

By following these steps, you can customize Chart.js to display numerical data in Bengali digits, making your charts more accessible and intuitive for Bengali-speaking users. This approach can be adapted to other languages and formats as well, providing flexibility in how data is presented.

Thank You…