[Chartjs]-Custom alphanumerical values in chart.js?

by

0👍

✅

So thanks to Julian Schmuckli I was able to fix this. Since it wasn’t entirely solved I’m going to post my own answer so I can share the result.

var ctx = document.getElementById('spokenLangChart').getContext('2d');
            var xLabels = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'];
            var spokenLangChart = new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: ['Spanish', 'English', 'German'], //Put here your x labels
                    datasets: [{
                        label: 'CEF Level',
                        data: [5, 4, 3],
                        backgroundColor: "rgba(255,153,0,0.4)"
                    }]
                },
                options: {
                    legend: {
                        position: 'bottom'
                    },
                    title: {
                        display: true,
                        text: 'Spoken Languages'
                    },
                    scales: {
                        xAxes: [{
                            ticks: {
                                beginAtZero: true,
                                //Returns the x labels
                                callback: function (value, index, values) {
                                    return xLabels[index];
                                }
                            }
                        }]
                    }
                }

            });

It’s very important that you put beginAtZero: true, otherwise it will put your lowest value as zero and as I hadn’t numerical values it was a bit difficult to spot the error.

Here’s the final result:

Final result

2👍

Currently, ChartJS does not support directly two axis without numerical values. But you can accomplish this with callbacks as you can see on my example:

var ctx = document.getElementById('chart');

var xLabels = ["A","B","C","D","E","F","G","H","I","J","K"]; //Put here your x labels

var spokenLangChart = new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: ['Spanish', 'English', 'German'], //Put here your x labels
                    datasets: [{
                        label: 'CEF Level',
                        labels: ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'],
                        data: ['C2', 'C1', 'B1'],
                        backgroundColor: "rgba(255,153,0,0.4)"
                    }]
                },
                options: {
                    scales: {
                        xAxes: [{
                            ticks: {
                                //Returns the x labels
                                callback: function(value, index, values) {
                                    return xLabels[index];
                                }
                            },
                        }]
                    },
                },
                
            });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="200" height="100"></canvas>

Or look at JSFiddle.

I hope it helps you.

Leave a comment