Chartjs-Chart JS – Group Array Results on y axis

by

1👍

✅

I’ve created this minimal example, for your problem. You can add your custom options as you wish.

You have to treat the y-axis as an index, so .findIndex(el => el.type == elem.type) is checking if the elem.type exists in an array and returns the index of the found element.

var whatsNewArray = [{
    "type": "EAC",
    "age": -16
  },
  {
    "type": "EAC",
    "age": -58
  },
  {
    "type": "DSCC",
    "age": -36
  },
  {
    "type": "SAFE AE",
    "age": -95
  },
  {
    "type": "SAFE AE",
    "age": -94
  },
   {
    "type": "DSCC",
    "age": -2
  },
   {
    "type": "EL",
    "age": -2
  },
   {
    "type": "PSY",
    "age": -20
  },
  {
    "type": "CNGRO",
    "age": -80
  },
  {
    "type": "CNGRO",
    "age": -69
  },
];


let label =  [...new Map(whatsNewArray.map(item =>
                  [item["type"], item["type"]])).values()];

let data = whatsNewArray.map(function(elem, index) {
  return {
    x: elem.age,
    y: label.indexOf(elem.type)
  }
});

const _data = {
  datasets: [{
    label: 'Scatter Dataset',
    data: data,
    backgroundColor: 'rgb(255, 99, 132)'
  }],
};
const config = {
  type: 'scatter',
  data: _data,
  options: {
    responsive: true,
    layout: {
        padding: 20
    },
    pointRadius: 10,
    fill: true,
    scales: {

      y: {
      autofill: false,
        labels: label,
        
        ticks: {
          callback: function(value, index, ticks) {
              
              return value % 1 == 0 ? label[value] : ''
                        
          }
        },
       
      }
    }

  }
};

new Chart(document.getElementById("myWHATSNEWChart"), config);
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.dark.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>

<canvas id="myWHATSNEWChart"></canvas>

Explanation: So the index of an array label is being recognized as y-axis data [0,1,2….].

This returns distinct values: 

[...new Map(whatsNewArray.map(item => [item["type"], item["type"]])).values()];

This checks if the value is an integer, for removing decimal values in this context.

 value % 1 == 0

Leave a comment