TextAlign pointlabel Chart.js

Patlion 0
Viewed 35

I have been experimenting with a multiline pointlabel (very long label) for a radar chart.
When creating a multiline pointlabel the text in the label aligns left/right/center depending on the side of the radar chart.
I searched and found out that the datalabel plugin https://chartjs-plugin-datalabels.netlify.app/guide/formatting.html#multiline-labels supports textAlign but there are no examples how to apply this.
Is there a way to align the text in all the labels to center?

var data = {
  labels: [
    ["very", "long label"],
    ["very", "long label"],
    ["very", "long label"]
  ],
  datasets: [{
    label: [`dataset`],
    backgroundColor: "rgba(38,120,255,0.2)",
    borderColor: "rgba(38,120,255, 1)",
    data: [90, 90, 90]
  }]
};

var options = {
  responsive: true,
  tooltips: false,
  title: {
    text: 'Basic example',
    display: true,
    position: `bottom`,
  },
  scale: {
    angleLines: {
      display: true
    },
    ticks: {
      suggestedMin: 0,
      suggestedMax: 100,
      stepSize: 25, 
      maxTicksLimit: 11,
      display: false, 
    }
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'radar',
  data: data,
  options: options
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js" integrity="sha512-Tfw6etYMUhL4RTki37niav99C6OHwMDB2iBT5S5piyHO+ltK2YX8Hjy9TXxhE1Gm/TmAV0uaykSpnHKFIAif/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="wrapper">
  <canvas id="chart" width="500" height="450"></canvas>

chart.js javascript
1 Answers

There's no option to define the text-alignment for the point labels, textAlign it computed depending on the angle by the function getTextAlignForAngle inside radialLinear.js.

You can however overwrite textAlign after the chart generation using the Plugin Core API. The API offers different hooks that may be used to execute custom code. The afterLayout hook for example may be used as follows.

afterLayout: chart => {
  chart.getDatasetMeta(0).rScale._pointLabelItems.forEach(o => o.textAlign = 'center');      
}

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

var data = {
  labels: [
    ["very", "long label"],
    ["very", "long label"],
    ["very", "long label"]
  ],
  datasets: [{
    label: ['dataset'],
    backgroundColor: "rgba(38,120,255,0.2)",
    borderColor: "rgba(38,120,255, 1)",
    data: [90, 90, 90]
  }]
};

var options = {
  responsive: true,
  tooltips: false,
  plugins: {
    title: {
      text: 'Basic example',
      position: 'bottom'
    }
  },
  scales: {
    r: {
      min: 0,
      max: 100,
      ticks: {   
        stepSize: 25
      }
    }
  }
};

new Chart('chart', {
  type: 'radar',
  plugins: [{
    afterLayout: chart => {
      chart.getDatasetMeta(0).rScale._pointLabelItems.forEach(o => o.textAlign = 'center');      
    }
  }],
  data: data,
  options: options
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="wrapper">
  <canvas id="chart" width="500" height="450"></canvas>

uminder0
Related