Search code examples
reactjsreact-chartjs

React-Chartjs-2 - How to make the label text stayed center wrapped?

I need the text in this graph to stay center wrapped but it goes horizontal instead. Had anyone had this issue with chartjs?

Picture of the graph

It works if you used a set amount of letters such as 'dummy'.

  datasets: {
    labels: ["Dummy text 1", "Dummy text 2", "Dummy text 3"],
    datasets: [
      {
        label: "",
        data: [13, 11, 2],
        backgroundColor: [
          "rgba(0, 135, 136)",
          "rgba(0, 193, 189)",
          "rgba(255, 9, 49)"
        ],
        borderColor: [
          "rgba(0, 135, 136)",
          "rgba(0, 193, 189)",
          "rgba(255, 9, 49)"
        ],
        borderWidth: 1
      }
    ]
Solution

  • Fixed this easily with a multi-array and changing the xaxes. Here's the example fix - 

      labels: [
  ["Dummy", "Data 1"],
  ["Dummy", "Data 2"],
  ["Dummy", "Data 3"]
],

 xAxes: [
        {
          ticks: {
            maxRotation: 0,
            minRotation: 0
          },
      }
  ]

    Hopefully this helps someone out :)