Question

0

766

Views

chartjs-plugin-datalabels not showing on stacked horizontal bar

I'm trying to make a simple horizontal stacked bar chart and add labels to it. I'm not sure what I'm doing wrong here, any input would be appreciated.

I can make it work by downgrading to a much lower version of chart.js and the datalabel plugin.

Here is a jsfiddle: https://jsfiddle.net/chrispret/szLgyu2j/24/

And some test code...

const testData = {
    set1: '4',
    set2: '3',
    set3: '1',
    set4: '3',
  };

const data = {
  labels: ["test"],
  datasets: [
    {
      label: 'set1',
      data: [testData.set1],
      backgroundColor: 'red',
      datalabels: {
        anchor: 'center',
        align: 'center',
      }
    },
    {
      label: 'set2',
      data: [testData.set2],
      backgroundColor: 'blue',
      datalabels: {
        anchor: 'center',
        align: 'center',
      }
    },
    {
      label: 'set3',
      data: [testData.set3],
      backgroundColor: 'green',
      datalabels: {
        anchor: 'center',
        align: 'center',
      }
    },
    {
      label: 'set4',
      data: [testData.set4],
      backgroundColor: 'gray',
      datalabels: {
        anchor: 'center',
        align: 'center',
      }
    }
  ]
};

const config = {
    type: 'bar',
    data: data,
    options: {
        aspectRatio: 15 / 3,
        indexAxis: 'y',
      elements: {
        bar: {
          borderWidth: 2,
        }
      },
      responsive: true,
      scales: {
        x: {
          stacked: true,
        },
        y: {
          stacked: true
        }
      },
      plugins: {
        datalabels: {
          color: 'white',
          font: {
            weight: 'bold'
          },
          formatter: Math.round
        },
        legend: {
          position: 'right',
        },
        title: {
          display: true,
          text: 'Chart.js Horizontal Bar Chart'
        },
      }
    },
  };

  const myChart = new Chart(
    document.getElementById('chartDemo'),
    config
  );

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Add the labels to the labels array.

  const data = {
  labels:  ["hrZone1","hrZone2","hrZone3","hrZone4"],
  datasets: [
    {
      label: 'peak',
      data: [hrData.peak,0,0,0],
      backgroundColor: 'red'
    },
    {
      label: 'cardio',
      data: [0,hrData.cardio,0,0],
      backgroundColor: 'blue'
    },
    {
      label: 'fatBurn',
      data: [0,0,hrData.fatBurn,0],
      backgroundColor: 'green'
    },
    {
      label: 'under',
      data: [0,0,0,hrData.under],
      backgroundColor: 'gray'
    }
  ]
};

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-05T15:33:50.817Z

Since version 1.x, the chartjs-plugin-datalabels plugin no longer registers itself automatically. It must be manually registered either globally or locally as described here.

Therefore, to make it work, you could add the following line to your code prior to create the chart.

Chart.register(ChartDataLabels);

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

const testData = {
  set1: '4',
  set2: '3',
  set3: '1',
  set4: '3',
};

const data = {
  labels: ["test"],
  datasets: [{
      label: 'set1',
      data: [testData.set1],
      backgroundColor: 'red'
    },
    {
      label: 'set2',
      data: [testData.set2],
      backgroundColor: 'blue'
    },
    {
      label: 'set3',
      data: [testData.set3],
      backgroundColor: 'green',
      datalabels: {
        anchor: 'center',
        align: 'center'
      }
    },
    {
      label: 'set4',
      data: [testData.set4],
      backgroundColor: 'gray'
    }
  ]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    aspectRatio: 15 / 3,
    indexAxis: 'y',
    elements: {
      bar: {
        borderWidth: 2
      }
    },
    responsive: true,
    scales: {
      x: {
        stacked: true
      },
      y: {
        stacked: true
      }
    },
    plugins: {
      datalabels: {
        anchor: 'center',
        align: 'center',
        color: 'white',        
        font: {
          weight: 'bold'
        },
        formatter: Math.round
      },
      legend: {
        position: 'right'
      },
      title: {
        display: true,
        text: 'Chart.js Horizontal Bar Chart'
      },
    }
  },
};

Chart.register(ChartDataLabels);
const myChart = new Chart(
  document.getElementById('chartDemo'),
  config
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chartDemo"></canvas>

0

766

chartjs-plugin-datalabels not showing on stacked horizontal bar

2 answers

0

0

Find remote jobs

Andres GPT