Chart.js to create category chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Chart.js to create category chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js backgroundColor array</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){// ww w. j  a v a  2s.c om
var chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    responsiveAnimationDuration:500,
    hoverMode: 'label',
    stacked: false,
    legend: {display:false,},
    title:{
        display:false,
        text:"Chart.js Bar Chart - Multi Axis"
    },
    scales: {
       xAxes: [{
            type: "linear", 
            display: true,
            position: "bottom",
            id: "x-axis-1",
            gridLines: {
                color: "#f3f3f3",
                drawTicks: true,
            },
            scaleLabel: {
                display: true,
            }
        }, {
            type: "linear", 
            display: false,
            position: "bottom",
            id: "x-axis-2",
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            display: true,
            type: 'category',
            gridLines: {
                color: "#f3f3f3",
                drawTicks: true,
            },
            scaleLabel: {
                display: false,
            }
        }]
    }
};
// Chart Data
var chartData = {
    labels: ["A", "O", "T", "BM&F", "G","T","F","BTC","R","C"],
    datasets: [{
        label: "my set",
        data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
        backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(201, 203, 207, 0.6)", "rgba(155, 99, 132, 0.6)","rgba(255, 99, 32, 0.6)"],
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    }]
};
var config = {
    type: 'horizontalBar',
    options : chartOptions,
    data : chartData
};
var lineChart = new Chart('myChart', config);
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" width="400" height="600"></canvas>  
   </body>
</html>

Related Tutorials