dojo charting - axis labels don't fit on the chart

Question

I have fairly long labels on a dojox/charting/Chart that end up being rendered off the chart.

I've tried using rotation, but then the labels are too small text and can't be read. I know I could use label shortening, but I'd rather just have the full label shown both on the left axis and the bottom axis.

Is there a way I could manipulate the labels with HTML and CSS? I tried inspecting the html in Chrome Dev Tools, but nothing I tried in terms of CSS helped.

Answer 1

You could make the labels fixed width so that they fit. And on hover the label will have a higher z-index that the other and show the full width.

http://jsfiddle.net/RU4Qc/

    label {
    position: relative;
    width: 50px;
    height: 15px;
    display: inline-block;
    padding: 2px 5px;
    overflow: hidden;
}

label:hover {
    width: auto;
    z-index: 9999;
    background-color: #c0c0c0;
}

Hover over the text.

Answer 2

What I noticed while working with dojo charts is that the width of rectangle of labels is decided by the first label length. If your first label is longest among all the labels then the chart will be shown with proper labels else it will clip them.I came up with two approaches to solve this issue : 1. Calculate the length of longest label and pad the first label to this max length. 2. There is a axis property called maxLabelCharCount if I set it to say 12.Then the labels upto 12 characters will be shown and if the label is of 20 characters (ex:Carbon Sequestration) it will show ellipsis like this carbon Seque.... and on mouse hover it will show a tooltip.