Chartjs-How to achieve a mixed chart of 'horizontal' bars and line chart using Chart.js?

by

0👍

I think the problem is, its trying to use labels for x-axis and data for y-axis.

For Chart.js v2.x you could try supplying the data for the line as array of objects: [{x: 4, y: 'Information Security'}, {x: ..., I think that should work.

In v3 (still in beta), there is no horizontalBar chart type. Instead, there is a new option indexAxis, that works for all chart types. migration guide to v3

Here is how you could do it using v3:

var ctx = document.getElementById("myChart");
let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Information Security', 'Asset Management', 'Human Resource Security', 'Physical Security', 'Equipment Security', 'Access Management', 'Review', "Policy Governance", 'Security Coordination', 'label10', 'label11', 'label12', 'label13'],
    datasets: [{
        xAxisID: 'compliance', // X axis 1
        data: [25, 15, 25, 25, 45, 15, 25, 25, 25, 25, 80, 80, 80],
        label: "Compliance",
        backgroundColor: "#3367D6",
        borderColor: 'rgba(105,159,177,1)',
        categoryPercentage: 0.8,
      },
      {
        type: 'line', // line type dataset
        xAxisID: 'compliance', // X axis 2
        data: [4, 4, 3, 3, 4, 5, 4, 4, 3, 3, 4, 5, 4],
        label: "Threshold for Maturity",
        backgroundColor: "rgba(247, 148, 30, 1)",
        borderColor: 'rgba(247, 148, 30, 1)',
        fill: false
      },
      {
        xAxisID: 'maturity', // X axis 2
        data: [2, 4, 3, 2, 4, 4, 3, 3, 4, 5, 4, 4, 3],
        label: "Maturity level",
        backgroundColor: "#F7941E",
        borderColor: 'rgba(77,20,96,1)',
        categoryPercentage: 0.8,
      }
    ]
  },
  options: {
    indexAxis: 'y', // this changes the orientation for all datasets in v3
    responsive: true,
    legend: {
      align: 'end',
      labels: {
        usePointStyle: true
      },
      position: 'top'
    },
    scales: {
      y: {
        fontStyle: 'bold',
        ticks: {
          fontSize: 11,
        },
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: true,
          labelString: 'Domains',
          font: {
            style: 'bold',
            size: 15
          }
        }
      },
      compliance: {
        position: 'top',
        beginsAtZero: true,
        min: 0,
        ticks: {
          stepSize: 25
        },
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: true,
          labelString: 'Compliance %',
          font: {
            style: 'bold',
            size: 15
          }
        }
      },
      matyrity: {
        type: 'linear',
        position: 'bottom',
        min: 1,
        max: 5,
        ticks: {
          stepSize: 1,
          callback: function(value, index, values) {
            return 'L' + value;
          },
          font: {
            style: 'bold'
          }
        },
        scaleLabel: {
          display: true,
          labelString: 'Maturity Level',
          font: {
            style: 'bold',
            size: 15
          }
        }
      }
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6/dist/chart.min.js"></script>
<canvas class="chart" height="250px" id="myChart"></canvas>

Leave a comment