format/wrap x-axis value in bar chart

I was trying to look for a solution to format x-axis value(data label). I can only set properties like rotation and other format changes. But not as I desired in the attached screen shot.
 
Data labels in x-axis displayed as month and year. jan 2014, feb 2014,... as of now. But I need to modify according to screen shot and displayed as it is. Can we able to achieve this html5 charts and ihub3.

Find more posts tagged with

Comments

mwilliams

This works in jsfiddle, but it breaks when trying to use inside the chart script in BIRT. If I figure out how to make it work within BIRT, I'll post back. Let me know if you figure it out. What works in JSFiddle: <pre class="_prettyXprint _lang-auto _linenums:0">
xAxis: {
type: 'datetime',
labels: {
formatter: function(){
var monthStr = Highcharts.dateFormat('%b', this.value);
var yearStr = Highcharts.dateFormat('%Y', this.value);
return monthStr + " " + yearStr;
}
},
...
}
</pre>What I tried in BIRT script (beforeDrawAxis function): <pre class="_prettyXprint _lang-auto _linenums:0">
axisOptions.labels.formatter = function(){
var monthStr = Highcharts.dateFormat('%b', this.value);
var yearStr = Highcharts.dateFormat('%Y', this.value);
return monthStr + " " + yearStr;
}
</pre>

mwilliams

Got it. Was just missing the actuate.report.HTML5Chart part of the Highcharts call. I also moved it to the beforeGeneration so it was easier to just do this for the xAxis: <pre class="_prettyXprint _lang-auto _linenums:0">beforeGeneration: function(options)
{
options.xAxis.labels.formatter = function(){
var monthStr = actuate.report.HTML5Chart.Highcharts.dateFormat("%b", this.value,false);
var yearStr = actuate.report.HTML5Chart.Highcharts.dateFormat("%Y", this.value,false);
return monthStr + " " + yearStr;
}
},
</pre>Hope this helps.

rajkishore

Williams, Look good. thank you. Can we able to move this code chart onrender? since when i export to excel script is not working and control is beyond of our actuate.

mwilliams

You're welcome. You won't be able to move this exact code to the onRender and I'm not certain you'll be able to do this going to Excel because of the live Excel charts. I'll try it out in a bit and let you know.

mwilliams

Even with a PNG chart, the live Excel charts don't take any changes made in the onRender. I think you'll just have to accept the Excel output as is. You might open a support case for this to see about a future solution.

rajkishore

Thanks Willias

mwilliams

You're welcome!

JayanthiS

Hi, I want to wrap the x-axis label in html5 when there is a space between two words. For example: "In Process" to be 
 
In
Process
 
Thanks,
Jai