Chartjs-Chart.js (React) I need to put the labels like a paragraph, I don't want rotate labels

by

0👍

✅

The labels can be multi-lines, defining each label as an array of strings:

  labels: [['En diàlogos cotidianos', 'con', 'empleados'], 
           ['En medios de', 'comunicaciòn'], 
           ['En campanas', 'o eventos'], 
           'No'],

See below the snippet.

 const data = {
      labels: [['En diàlogos cotidianos', 'con', 'empleados'], 
               ['En medios de', 'comunicaciòn'], 
               ['En campanas', 'o eventos'], 
               'No'],
      datasets: [{
        label: 'Sales',
        data: [10000, 20000, 30000,40000],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderWidth: 0
      },{

        label: 'Target',
        data: [50000, 50000, 50000, 40000,],
        backgroundColor:'rgba(255, 26, 104, 0.2)',
        borderWidth: 0
      }]
    };

    // config
 const config1 = {
      type: 'bar',
      data,
      options: {
        scales: {
          x: {
            stacked: true
          },
          y: {
            beginAtZero: true,
            stacked: true
          }
        }
      },
    };

    new Chart(
      document.getElementById('myChart'),
      config1
    );
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Leave a comment