how we can shift X and Y axis to center in Bubble chart (JQPlot)

Question

I am trying to shift bubble chart X and Y axis to the center. I am unable to find the exact configuration.

Currently i am getting the graph as shown below

I want to get it as shown below

please help me out

Answer 1

I don't see any api options to change the position the axis. So, the best I can come up with is to set it using CSS.

var plot2 = $.jqplot('chart1',[arr],{
    title: 'Transparent Bubbles',
    seriesDefaults:{
        renderer: $.jqplot.BubbleRenderer,
        rendererOptions: {
            bubbleAlpha: 0.6,
            highlightAlpha: 0.8
        },
        shadow: true,
        shadowAlpha: 0.05
    },
    axes:{yaxis:{tickOptions: {showMark:false},min:-500,max:500}, //disable the ticks
          xaxis:{tickOptions: {showMark:false},min:-500,max:500}}
}); 

$('.jqplot-xaxis').css({'zIndex':10,'top':'150px','font-weight':'bold'}); // move the axis to the center of the chart
$('.jqplot-yaxis').css({'zIndex':10,'left':'300px','font-weight':'bold'});

Fiddle here.

Produces:

Answer 2

find the center number, double click the y axis. Under Axis Options, under Horizontal axis crosses: Chose Axis Value: and enter the halfway point where you want it to be. For instance on a y axis that has 0 - 5, you would enter 2.5.

do the same with your x axis.

Hope that helps! :)