Chartjs-TextAlign pointlabel Chart.js

by

0👍

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>

Leave a comment