CODEWITHSUNDEEP
javascriptjquerywebchart.js
Bethlee
Bethlee

Reputation: 945

change long labels to multiline(wrap) label in ChartJs

(↑ 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.net/TZq6q/242/
http://jsfiddle.net/zruvru23/1/

Upvotes: 5

Views: 9578

Answers (3)

AZIIZ Farhat
AZIIZ Farhat

Reputation: 174

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 comma, in my case ['Park', 'Assist'] will be shown on tooltip as "Park,Assis". To resolve this problem you have to remove the comma 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 comma

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

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

Upvotes: 0

NilsH
NilsH

Reputation: 169

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

Upvotes: 7

Miłosz Wierzbicki
Miłosz Wierzbicki

Reputation: 2102

Change label definition to:

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

Upvotes: 1

Related Questions