I'm having a bit of trouble with jqPlot styling. Currently I've got this:
This took quite a bit of fiddling to get it like this as it is, but now I've got one problem -- the line on the left! I don't know how to remove it, because I don't actually know WHAT it is!
This is the code I've got so far.
plot = $.jqplot('chart', [values], {
animate: !$.jqplot.use_excanvas,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true,
},
pointLabels: {
show: true,
},
shadow: false,
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: keys,
tickOptions: {
showGridline: false,
showMark: false,
fontFamily: 'DosisBold',
textColor: '#ffffff',
fontSize: 'larger'
},
},
yaxis: {
tickOptions: {
showGridline: false,
showMark: false,
showLabel: false,
shadow: false,
},
},
},
seriesColors: ["#bc4427", "#df8321", "#949629", "#5e8c41", "#739c9b", "#3483b3"],
grid: {
background: '#1d1d1d',
drawGridLines: false,
borderWidth: 0.0,
shadow: false,
},
highlighter: { show: false }
});
I have a feeling it may be something to do with the renderer used on the y axis. Currently it's just using the default one (which I assume is the LinearAxisRenderer). If I change it to CategoryAxisRenderer, it gets rid of the annoying line, but then it shows the marks, and makes the numbers on top of the bars incorrect (so probably isn't going to be that useful).
I've also dug through the CSS, looking for the color of the line, #757575 but to no avail. I also changed EVERY SINGLE COLOR in that file to something that stands out (ie, red), but still nothing changes.
I'm not sure if it's a shadow on something, but I've tried just about every way (except the correct way) to remove them; still nothing.
Has anyone had this problem before? Any ideas?
Answer
I came across this problem today and I noticed that "drawBaseline" of yaxis was overwritten by drawBaseline of the renderer. One needs to set the drawBaseline option in the rendererOptions as well like so:
axes: {
yaxis: {
rendererOptions: {drawBaseline: false}
}
}
Take a look at this jsFiddle: http://jsfiddle.net/a88MS/1/
To see the issue, comment and uncomment line 38.
Line 37 is there for demonstration purposes.