jqplot zooming in categoryAxisRenderer not working

Question

I am using jqplot CategoryAxisRenderer for my x-axis data. I need zooming also. But I am able to zoom only y axis. Please suggest a solution. I am new to charts. I searched a lot but didnt get a proper answer. Please provide an answer. This is my code.

    function renderBarChart(){
    barChartData = [["abcd",56], ["efgh",60], ["ghij",79],["klmn",20],["opqr",34],["stuv",67],["wxyz",42],["adfg",77],["ghjy",29]];
    plot2 = $.jqplot('barChart', [barChartData], {
        seriesColors: ["#4fb3ce"],
        animate: !$.jqplot.use_excanvas,
        highlighter: {
            show: true,
            showMarker:false,   
            tooltipLocation:'n',
            tooltipOffset: 6,
            tooltipContentEditor:tooltip_formatter_bar
        },
        grid: {
            background: '#f7fafa',
            drawBorder: false,
            shadow: false,
            gridLineColor: '#eceeee',
            gridLineWidth: 1
        },
        legend: {
            show: false
        },
        seriesDefaults:{
            showMarker:false,   
            renderer:$.jqplot.BarRenderer,
            rendererOptions: { 
                barPadding: 0,
                barMargin: 0,
                barWidth:20,
                shadowAlpha: 0.04,
                shadowOffset:1.5,
                highlightMouseOver: false,
                dataLabels: 'percent'
            },
            pointLabels:{
               show: true,
               ypadding : 5,
               color: '#7c7c7c',
             }

        },
        axesDefaults: {
            rendererOptions: {
                baselineWidth: 1,
                baselineColor: '#eceeee',
                drawBaseline: true
            }
        },
        axes: {

            xaxis: {
                showMark: false,
                renderer: $.jqplot.CategoryAxisRenderer,
                //ticks: barTicks,
                //pad: 0,
                label:'Associate ID',
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                labelOptions: {
                    fontFamily: 'Arial',
                    fontSize: '12px'
                },
                tickOptions: {
                    angle: 0,
                    textColor: '#7c7c7c',
                    showMark: false,
                    fontSize: '10px'
                }
            },
            yaxis: {
                tickOptions: {
                    showMark: false,
                    fontSize: '10px'
                },
                min:0,
                max:100,
                tickInterval:10,
                label: 'Incident',
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                labelOptions: {
                    fontFamily: 'Arial',
                    fontSize: '12px'
                }
            }
        },
        cursor:{ 
            show: true,
            zoom:true
          } 
    });
}

Answer 1

Have you tried using contrainZoomTo: 'x'.

cursor: {
            show: true,
            showTooltip: true,
            zoom: true,
            constrainZoomTo: 'x'
        },