(↑ That is not my question's answer at all!! :( )

Hi~ I'm using chartJS for drawing line graphs.

    var areaChartData = {
      labels: ["2016-02-11_19:59:24", "2016-02-11_20:59:24", "2016-02-12_21:59:24", "2016-02-21_22:59:24", "2016-02-21_23:59:24", "2016-02-22_19:59:24", "2016-02-22_23:59:24", "2016-02-23_23:59:24", "2016-02-24_23:59:24", "2016-02-25_23:59:24"],
      datasets: [
        {
          label: "Elec",
          fillColor: "rgba(210, 214, 222, 1)",
          strokeColor: "rgba(210, 214, 222, 1)",
          pointColor: "rgba(210, 214, 222, 1)",
          pointStrokeColor: "#c1c7d1",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [65, 59, 80, 81, 56, 55, 40, 23, 22, 21]
        },
        {
          label: "Goods",
          fillColor: "rgba(60,141,188,0.9)",
          strokeColor: "rgba(60,141,188,0.8)",
          pointColor: "#3b8bba",
          pointStrokeColor: "rgba(60,141,188,1)",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(60,141,188,1)",
          data: [28, 48, 40, 19, 86, 27, 90, 23, 22, 21]
        }
      ]
    };

I can't show without angle the label in the graph because labels is too long to display. I want to change labels to multiline lables in axis labels

2016-02-11_19:59:24

to

2016-02-11
19:59:24

How can I change the options or Char.js script?

/
/

(↑ That is not my question's answer at all!! :( )

Hi~ I'm using chartJS for drawing line graphs.

    var areaChartData = {
      labels: ["2016-02-11_19:59:24", "2016-02-11_20:59:24", "2016-02-12_21:59:24", "2016-02-21_22:59:24", "2016-02-21_23:59:24", "2016-02-22_19:59:24", "2016-02-22_23:59:24", "2016-02-23_23:59:24", "2016-02-24_23:59:24", "2016-02-25_23:59:24"],
      datasets: [
        {
          label: "Elec",
          fillColor: "rgba(210, 214, 222, 1)",
          strokeColor: "rgba(210, 214, 222, 1)",
          pointColor: "rgba(210, 214, 222, 1)",
          pointStrokeColor: "#c1c7d1",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [65, 59, 80, 81, 56, 55, 40, 23, 22, 21]
        },
        {
          label: "Goods",
          fillColor: "rgba(60,141,188,0.9)",
          strokeColor: "rgba(60,141,188,0.8)",
          pointColor: "#3b8bba",
          pointStrokeColor: "rgba(60,141,188,1)",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(60,141,188,1)",
          data: [28, 48, 40, 19, 86, 27, 90, 23, 22, 21]
        }
      ]
    };

I can't show without angle the label in the graph because labels is too long to display. I want to change labels to multiline lables in axis labels

2016-02-11_19:59:24

to

2016-02-11
19:59:24

How can I change the options or Char.js script?

http://jsfiddle/TZq6q/242/
http://jsfiddle/zruvru23/1/

• javascript
• jquery
• web
• chart.js

• Your html is not here so could not predict how to break it but try to use "2016-02-11 19:59:24" label like this. Break it with space. Might be space will break it in multiple lines. – PHPExpert Commented Feb 15, 2016 at 7:06
• When I changed "_" to " ", the results is same. Because the label is too long to display. I have to show hours and minutes so I want to find out the multiline label for expression. – Bethlee Commented Feb 15, 2016 at 7:13
• Can you create fiddle or any thing other so I can view your original graph ? – PHPExpert Commented Feb 15, 2016 at 7:14
• you can show the sample in jsfiddle/TZq6q/242. my question point is expression method of long label to multiline label. – Bethlee Commented Feb 15, 2016 at 8:26
• @Bethlee - apologies. I totally missed the fact that you were looking to wrap the axis labels and not the tooltips. How about jsfiddle/qw0Lw03s (adapted from stackoverflow./a/31699438/360067 - its for angular, but you should be able to copy the extension bit over and it'll work without angular) – potatopeelings Commented Feb 15, 2016 at 11:13

3 Answers 3

According to the official sample repo you should put the single lines into another array:

data: {
    labels: [['June', '2015'], 'July', '...', ['January', '2016'], 'February', '...'],
    // Rest of config

In this case June 2015 and January 2016 would have a new line for the year, the rest of the labels would not be wrapped.

The example is from a line chart, I tested it with a bar chart too, but it should work for all chart types.

Tested with version 2.7.2 of ChartsJS

Change label definition to:

 labels: [["2016-02-11", "19:59:24"], ["2016-02-11","20:59:24"]]

You can change the long label name to an array, chartjs will split each element into a line , this exemple worked for me :

labels: ['DAB', ['Park', 'Assist'], ['Lane', 'Assist'], ['Smartphone', 'Interface'], 'GPS', 'LED']

But, in this case, when you pass the mouse over the chart, the tooltip shown will seperate each line by a ma, in my case ['Park', 'Assist'] will be shown on tooltip as "Park,Assis". To resolve this problem you have to remove the ma by a space in tooltips callback, like this :

tooltips: {
  enabled: true,
  callbacks: {

    title: function(tooltipItem, data) {
      return data.labels[tooltipItem.index];
    },
    label: function(tooltipItem, data) {
      let dataval = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
      let dslabels = data.labels[tooltipItem.index];

      // Remove the ma

      dslabels = dslabels.toString().replace(",", " ");

      return ' ' + dslabels + ' : ' + dataval + '%';
    }
  }
},