Stacked Bar chart with horizontal lines in the back and foreground

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Michael on 6th October 2015
Hi Richard,

I've got some questions for this fiddle:

1) You can see, that in the chart there are not 10 horizontal lines as in the code. I don't understand why now only 5 lines are drawn in this fiddle, my real chart has 10! Any idea?

2) I discovered that horizontal lines are defined as false in the upper chart and then the totl number of lines for both charts are defined in the lower chart - is that correct?

3) These horiz. lines are drawn over the bars in the upper chart and behind the bars of the lower chart.
Is there a way that they are in the background/foreground (would be preferred) in both charts?

4) The only way to get a description of the unit of the values in the y-axis is to add the unit with a linebreak to the topmost and lowest value as you can see with the "kWh" in the code - or is there another possibility? I also include the unit in the key, but that is not enough.

Many thanks in advance.

Kind regards,
Posted by Richard Heyes on 6th October 2015
Hi there,

1) I think that may be a bug. I'll have to take a look into it.
2)I've no idea what you're refering to - can you be more explicit and give me files/line numbers.

3) I think that this is due to the background grid being drawn as part of the second chart (and disabled on the former. So the first chart is drawn (with no grid) then the second chart is drawn with a background grid. But the second chart is drawn after the first so the grid is drawn on top of whatever is already on the canvas.

If you wanted a grid at the very back you could use the first charts grid and disable it on the second. Or if you want the grid on top then you could disable it on both of the charts and use the drawing API background grid as described here:

Using this would probably also let you specify the number of horizontal lines better.

4) By increasing the gutter.left option you'd give yourself more space like this:

If RGraph has helped you - please share the website and give your feedback - thanks!
Posted by Michael on 6th October 2015
Hello Richard,

many thanks for your quick answer.

In 2) I described it too complicated - I meant what you have written in your answer to 3): the upper chart is drawn first, then the lower which also draws the background grid.
In my first steps with stacked charts I think I discovered that it was not possible to draw the whole grid with the upper chart and none with the lower - that was the reason I did it the way you see in the code. Anyway, with your answer in mind, I will experiment with this again and if it is not working, the API solution will do it. Thanks for the link.

4) this is an idea, but not the same - I don't want the unit being written after each y-value - just at the top of the y-axis. I prefer my way.

Another additional question:

Is there a way to split the key in the top of a chart e.g. in two lines?
If I have more and longer key-names the box is cut off to the left and right on smaller displays (mobile phones).
Of course I can use abbreviations, take a smaller font etc. (place the key on a side is no alternative), but e.g. a "newline" ad the end of a key-text or the definition of a maximum width of the key-box as an order for RGraph would be the better than writing workarounds in the code.
Have you already any plans to include such a feature?

Good night & thank you
Posted by Richard on 6th October 2015

4) You could not use the unitsPost option and use the RGraph API - like this example does:

It uses the RGraph.Text2() function inside the draw event and draws the text above the axis.

Additional) There's no newline option for the key though with the HTML key you can use HTML to break, like this:

If RGraph has helped you - please share the website and give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post

Add a reply

« Back to message list