Chartjs-How to convert a bar chart into a triangle shaped chart using Chart JS?

by

0👍

✅

You will have to implement your own custom chart type to do this since it’s not possible by default, you can read here in the documentation how to implement your own chart type: https://www.chartjs.org/docs/master/developers/charts.html

2👍

You can use a scatter chart and define individual datasets for each value.

Please take a look at your amended code and see how it works.

const labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
const data = [12, 19, 3, 5, 2, 3];
const colors = ['255, 99, 132', '54, 162, 235', '255, 206, 86', '75, 192, 192', '153, 102, 255', '255, 159, 64'];

const datasets = labels.map((l, i) => ({
  label: l,
  data: [{ x: i + 1 - 0.45, y: 0 }, { x: i + 1, y: data[i] }, { x: i + 1 + 0.45, y: 0 }],
  fill: true,
  backgroundColor: 'rgba(' + colors[i] + ', 0.2)',
  borderColor: 'rgb(' + colors[i] + ')',
  showLine: true,
  borderWidth: 1,
  lineTension: 0,
  pointRadius: 0,
  pointHitRadius: 0
}));

new Chart('myChart', {
  type: 'scatter',
  data: {
    datasets: datasets
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      },
      x: {
        min: 0,
        max: labels.length + 1,
        ticks: {
          callback: (v, i) => labels[i - 1] 
        },
        grid: {
          display: false
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
<canvas id="myChart" height="110"></canvas>

Leave a comment