JqPlot Styling - How to remove the Y axis line?

Question

I have problems with jqPlot design. I currently have this:

It took quite a while to make it as it is, but now I have one problem - the line on the left! I do not know how to remove it, because I do not know what it is!

This is the code that I still have.

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 that this could be due to the renderer used on the y axis. Currently, it just uses the default value (which I assume LinearAxisRenderer). If I change it to CategoryAxisRenderer, it will get rid of the annoying string, but then it will show the labels and incorrectly make the numbers on top of the bars (so it probably won't be that useful).

I also broke through CSS looking for the line color, # 757575, but to no avail. I also changed EVERY SINGLE COLOR in this file to what is highlighted (i.e. Red), but nothing changes anyway.

I'm not sure if this is a shadow on something, but I tried almost everything (except the correct path) to remove them; nothing yet.

Has anyone had this problem before? Any ideas?

Answer 1

Well, I was still unlucky in sorting the issue using jqPlot options, I found a solution just hiding the entire Y axis with CSS.

I just added this to the HTML file between the <style> tags, although of course you could put it in any stylesheet you use.

 .jqplot-grid-canvas { display: none; } 

Voila! The damned y axis has finally gone, leaving my drawing style beautiful and purple.

Answer 2

Today I ran into this problem and I noticed that the "drawBaseline" yaxis was overwritten by the drawBaseline rendering. You must also set the drawBaseline parameter to rendererOptions like this:

 axes: { yaxis: { rendererOptions: {drawBaseline: false} } } 

Take a look at this jsFiddle: http://jsfiddle.net/a88MS/1/

To see the problem, comment and uncomment line 38.

Line 37 is for demonstration purposes.

Answer 3

Try using:

 axes: { yaxis: { showTicks: false } } 

Otherwise, it could be a border, then try (but then set borderWidth to 0 again so that it has the same effect):

 grid:{ drawBorder: false, shadow: false } 

An example with both parameters.

Also try setting for each axis:

 tickOptions: { showGridline: false } 

Answer 4

For me, the following did the trick:

I set borderWidth : 0 , which was the problem, since the setting activated it! Removing this solution to the problem!

Answer 5

I also had the same issue, but I really didn't want to fix it using custom css.

I finally managed to find out that you can pass the gridLineColor attribute so that you can hide this annoying line to the left of the jqPlot chart options.

 grid: { gridLineColor: "#FFFFFF" //or whatever background color you have }