X Axis label angle in dateAxisRenderer - jqplot

Question

I am not able to find the tickOption for dateAxisRenderer.
I've tried it in the following way:
axes:{
axesDefaults:{tickRenderer : $.jqplot.CanvasAxisTickRenderer, tickOptions :{angle: -30}},
xaxis:{
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{
angle: -30,
formatString:'%H:%M'
},
}
}
but this din't seem to work. Can someone please help me with this.

Answer 1

You need to add rendererOptions: {tickRenderer: $.jqplot.CanvasAxisTickRenderer} in xaxis definition :
axes:{
axesDefaults:{
tickRenderer : $.jqplot.CanvasAxisTickRenderer,
tickOptions :{angle: -30}
},
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer
},
ticks: xTicks,
tickOptions: {
angle: -30,
formatString: '%H:%M'
},
}
}
Please see working example here

Answer 2

1st: add css and js in your code:
<link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="examples.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script class="include" type="text/javascript" src="jquery.min.js"></script>
<script class="include" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
2nd:HTML code:
<div id="chartdiv" style="height:400px;width:300px; "></div>
3rd: jQuery code:
<script class="code" type="text/javascript">
$(document).ready(function(){
var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15],
['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3],
['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];
var plot3 = $.jqplot('chart3', [line1], {
title: 'Concern vs. Occurrance',
series:[{renderer:$.jqplot.BarRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
labelPosition: 'middle'
}
},
yaxis: {
autoscale:true,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
labelPosition: 'start'
}
}
}
});
});
</script>