Jaspersoft Studio html5 chart (highchart) xAxis label overflowing

0
votes

I've created an HTML5 (highchart) column chart in Jaspersoft Studio but the xAxis labels can be quite long and are overlapping with the legend which look awful. Company standards dictate that the legend must be at the bottom, and labels rotated 270 degrees so they are vertically. Which means I can't move the legend or rotate the labels unfortunately, so I would like to make so the label just cuts off after a certain length and is only partially displayed to prevent it overlapping with the legend when it's too long.

This page has a list of all the properties that can be applied to the xAxis labels:

http://api.highcharts.com/highcharts/xAxis.labels

I've tried using the Overflow property listed there but that only seem to relate to labels inside the plot area ie:

xAxis
     labels
           overflow:false

So does anyone know of a way I can limit the length of the xAxis label to prevent it from overlapping the legend beneath it?

2
highchartsjasper-reports

2 Answers

0
votes

I know nothing about jaspersoft-studio. So, I'm not sure this will work in your situation.

But, with straight HighCharts, you can turn on useHTML for the lables and then set the label width in css.

Javascript:

Highcharts.chart('container', {
    chart: {
        marginBottom: 80
    },
    xAxis: {
        categories: ['Long name 1', 'longer name number 2', 'this one is really really really long', 'Kinda long, but not longest', 'short', 'long name that is long', 'I think you get the point', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        labels: {
            rotation: 45,
            useHTML:true
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

CSS:

.highcharts-axis-labels span{ 
  width:30px;
}

http://jsfiddle.net/0jwf9nb6/1/

0
votes

Go to Chart Properties > Show Advanced Properties and add a new property xAxis.labels.format and set this to use an expression with the property value ('My Text').substring(0, 5)

Swap out 'My text' for your $V{} or $F{} or any other value you are using as your xAxis labels as appropriate, and limit the substring to the best fit for your chart.

Alternatively add this straight to the chart settings in via the Source editor by adding the code below <hc:chartSetting name="default"> e.g.:

<hc:chartProperty name="xAxis.labels.format">
    <hc:propertyExpression><![CDATA[('My Text').substring(0, 5)]]></hc:propertyExpression>
</hc:chartProperty>