Use min/max and padding.V2
If you use min/max padding is ignored thus to have padding increase min/max.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<div id="chart1" class="chart">
</div>
CSS
.chart {
height: 200px;
width: 400px;
}
//jquery.jqplot.css
/*rules for the plot target div. These will be cascaded down to all plot elements according to css rules*/
.jqplot-target {
position: relative;
color: #666666;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
height: 300px;
width: 400px;
}
/*rules applied to all axes*/
.jqplot-axis {
font-size: 0.75em;
}
.jqplot-xaxis {
margin-top: 10px;
}
.jqplot-x2axis {
margin-bottom: 10px;
}
.jqplot-yaxis {
margin-right: 10px;
}
.jqplot-y2axis,
.jqplot-y3axis,
.jqplot-y4axis,
.jqplot-y5axis,
.jqplot-y6axis,
.jqplot-y7axis,
.jqplot-y8axis,
.jqplot-y9axis,
.jqplot-yMidAxis {
margin-left: 10px;
margin-right: 10px;
}
/*rules applied to all axis tick divs*/
.jqplot-axis-tick,
.jqplot-xaxis-tick,
.jqplot-yaxis-tick,
.jqplot-x2axis-tick,
.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick,
.jqplot-yMidAxis-tick {
position: absolute;
white-space: pre;
}
.jqplot-xaxis-tick {
top: 0px;
/* initial position untill tick is drawn in proper place */
left: 15px;
/* padding-top: 10px;*/
vertical-align: top;
}
.jqplot-x2axis-tick {
bottom: 0px;
/* initial position untill tick is drawn in proper place */
left: 15px;
/* padding-bottom: 10px;*/
vertical-align: bottom;
}
.jqplot-yaxis-tick {
right: 0px;
/* initial position untill tick is drawn in proper place */
top: 15px;
/* padding-right: 10px;*/
text-align: right;
}
.jqplot-yaxis-tick.jqplot-breakTick {
right: -20px;
margin-right: 0px;
padding: 1px 5px 1px 5px;
/* background-color: white;*/
z-index: 2;
font-size: 1.5em;
}
.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick {
left: 0px;
/* initial position untill tick is...
JavaScript
$(document).ready(function() {
var valuesToRemove = ['-10', '210']; //must be given as string
$.jqplot.postDrawHooks.push(function() {
var children = $("div.jqplot-axis.jqplot-yaxis").children('div');
console.log("children.size() = " + children.size());
$(children).each(function(index) {
var child = $(this);
//if having problems with indexOf method in IE see this SO answer http://stackoverflow.com/a/1181586/613495
if (valuesToRemove.indexOf(child.html()) !== -1)
child.hide();
});
});
var datos = [
[3, 4],
[2, 2]
];
$.jqplot('chart1', [datos], {
axes: {
xaxis: {
min: 1,
//was '1'
max: 5,
//was '5'
tickOptions: {
show: true,
showLabel: true
}
},
yaxis: {
max: 1,
min: 200,
ticks: ['210', '200', '150', '100', '50', '1', '-10'],
tickOptions: {
formatString: '%i'
}
}
}
});
});