Custom alpha numerical values in chart.js - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Data

Description

Custom alpha numerical values in chart.js

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  w  w  w  . j  av  a2 s. c  o  m*/
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: {
                                callback: function(value, index, values) {
                                    return xLabels[index];
                                }
                            },
                        }]
                    },
                },
            });
    }

      </script> 
   </head> 
   <body> 
      <canvas id="chart" width="200" height="100"></canvas>  
   </body>
</html>

Related Tutorials