1

I am creating a bar chart usng chart.js and am trying to add a line break to the label for the dataset (which is used as a title for the whole bar chart). I see it is possible to pass an array for the labels for each piece of data which adds a line break but this does not seem to work for the top level label. I have included my code below.

processCharts[key] = new Chart(ctx, {
          "type":"horizontalBar",
          "data": {
            "labels":["Actual", "Target"],
            "datasets":[{
              "label": key.split(" "),
              "data":[actual, target],
              "fill":false,
              "backgroundColor":[
                "#B3CE3A",
                "#B1C1C8",
              ],
              "borderWidth":1}]},
            "options":
              { "responsive":"true",
                "maintainAspectRatio": false,
                "legend": {
                            boxwidth:
                        },
                "scales":{
                  "xAxes":[{
                    "ticks":{
                      "beginAtZero":true,
                      callback: function(label, index, labels) {
                        return formatTime(label);
                 }
                  }}],
                  "yAxes": [{
                    "ticks": {
                      "padding": 0
                    }
                  }]
                },
              },
              plugins: [{
                beforeInit: function(chart) {
                  if (/\n/.test(chart.data.datasets[0].label)) {
                    chart.data.datasets[0].label = chart.data.datasets[0].label.split(/\n/);
                 }
                }
                }]
            });

Unfortunately when it splits the key I get for example "Emergency,Change" where I want a newline between the words.

Any help would be much appreciated

MattDrewery
  • 129
  • 1
  • 3
  • 13

0 Answers0