Colorbar tick labels overlap with colorbar title

[jdugge]

When using a colorbar with titleside: 'right' and a small value for len, the colorbar tick labels can overlap with the colorbar title:

(Codepen: http://codepen.io/anon/pen/YNoOML)

var data = [ {
  z: [[0, 100],
       [75, 0]],
  type: 'heatmap',
  colorbar:{
    len: 0.35,
    title: 'My long label',
    titleside:'right',
    tickvals:[0,50,100],
    tickfont: {color: 'red'}
  }
}]; 

var layout = {};

Plotly.newPlot('myDiv', data, layout);

The workaround for avoiding this overlap given in #938 (comment) (using an invisible tickprefix) only works for titles that are to the left of the tick labels, unfortunately.

Is there a way to avoid this overlap with titles to the right of the tick labels?

[hiteshsahu]

You need to add <br> with the title text

Add <br\> as prefix if you want to add space on top of the title. Add <br\> with a   if you want to add space after the title.

colorbar:{
         title: 'Speed(RPM)<br\> &nbsp;',
         titleside:'top',
         titlefont: {color: 'blue'}
       },

You can use <br> trick on other elements of Plotly as well. Hope it helps somebody. @etpinard you may close it.

[alexcjohnson]

closed by #2227