Make label index multiline in canvasjs

Question

I'm using canvasjs library in order to generate columns data.

I hava a for iteration where to add in array some data:

dp.push({
      indexLabel: json[i].count + " (" + json[i].sizeText + ")",
      y: json[i].count,
      label: json[i].day.split(' ').slice(0,1),
      day: json[i].day.split(' ')[0],
      month: m,
      indexLabelFontColor: 'red',
      indexLabelBackgroundColor: 'white',
      count: json[i].count
});

I have some long index label like: 10 (50 GB) and I want to put in two lines like:

  10
(50 GB)

It is possible to achieve with that library ? I tried with indexLabelWrap with indexLabelMaxWidth but somehow the ( is not put correctly because of width limitation.

Answer 1

As of now, its not possible to wrap text like you do in DOM. However you can add custom HTML DOM as indexLabel and break the word wherever you want. Here is an example.

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
      text: "Position DOM as IndexLabel"
  },
  data: [{
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 }
      ]
  }]
});

chart.render();

var indexLabels = [];
addIndexLabels(chart);

function addIndexLabels(chart){
  for(var i = 0; i < chart.data[0].dataPoints.length; i++){
      indexLabels.push(document.createElement("p"));
      indexLabels[i].setAttribute("id", "indexlabel");
      indexLabels[i].setAttribute("align", "center");
      indexLabels[i].innerHTML = chart.data[0].dataPoints[i].y + "<br/>(55 GB)";
      document.getElementById("chartContainer").appendChild(indexLabels[i]);
  }
  positionIndexLabels(chart);
}

function positionIndexLabels(chart){
		for(var i = 0; i < indexLabels.length; i++){
				indexLabels[i].style.top = chart.axisY[0].convertValueToPixel(chart.data[0].dataPoints[i].y) - (indexLabels[i].clientHeight)  + "px";
      	indexLabels[i].style.left = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[i].x) - (indexLabels[i].offsetWidth / 3) + "px";
  	}
}

window.onresize = function(event) {
    positionIndexLabels(chart)
}

#indexlabel {
  color: black;
  position: absolute;
  font-size: 16px;
}

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

Take a look at this jsfiddle.