I have a columnrange chart, but I think the answer (if there is one) will be applicable to any of the bar/column chart types.
Working fiddle >> http://jsfiddle.net/lunchboxbill/8Yvfs/10/
I have a nice fat border around the first bar. Is there a way I can set it so that the border only displays on the left hand side?
A CSS Highcharts equivalent of "border-left" if you like.
borderLeft: 10
Thanks in advance.
In general, in SVG it's not possible to apply border only for a part of rect. It would require to draw another path for it, just like that SO question.
And, as you can see in API, only borderWidth is possible to set: docs.
Related
I am using Chartist and svgdom in Node.js to generate a line chart. But the label names are too long and they run over each other.
This is how it looks like:
I saw #375 issue in Chartist and they tried to tilt the labels using CSS, but i think rotating the X-Y axes is a better idea, if possible.
What can i do here?
I'm not sure about flipping it, but as another option, you could make the graph a larger fixed width. Then make it's parent container smaller(screenwidth) and make the entire chart scroll-able horizontally.
I have a d3 stacked column and for the way I'm doing this viz it makes sense to add a separation (effectively a white line) between each element in the stacked column. Is there an easy way to do this on the Y axis with padding? The other way I can think of would be to add tiny blocks in between each column element, but that seems tedious.
Thanks for any advice. PS I'm using d3 V4.
The answer that #danimal is giving would work, I think. However, in the end I went with "injecting" rows of empty rectangles. You can see the solution here: http://bl.ocks.org/mgoold/88f6f798dac245b3261ed1a543b04415 .
The only thing with doing it this way is that a y axis ceases to make sense. So I had to do left side call-outs for the volume amts instead.
HTH
I'm looking to make a responsive donought chart with CanvasJS but my client wants a "broken" donought. Like with a piece missing.
Can it be done? If so, how?
Or else, if it cannot be done, could another responsive graph library be recommended that can do this?
Thanks
EDIT:
I managed to "fake" a gap in it my setting one datapoint to transparent. However, it's not "real" as the transparent part is still a part.
See my pen
http://codepen.io/SubZane/pen/sHpey
I don't know about canvasJS, but you can draw a polygon with inner rings in canvas, see the answer here: Polygon with a hole in the middle with HTML5's canvas
You can also do it with SVG which some web mapping libs used for this purpose before the advent of the canvas element.
I'd like to add a vertical line which will display a tooltip when hovering on it. I'd like to flag a company event this way however I can't really find a way to that with JqPlot.
Thanks in advance,
Lashus.
I think for this one you might use the approach I used to provide a line highlight option in jqPlot, details of which are in this answer. There you have the algorithm for detection when the mouse is over a line.
When you detect that the mouse just entered a line and the tooltip is not visible then build it and show it. Also do not forget to hide the tooltip when mouse moves out of the line. When implementing this part you will certainly find useful the code from this answer.
It shows how to add a custom tooltip on a stacked bar chart, but the code could be easily adopted to your needs.
PS: I assumed that the vertical line will be at some point drawn on some canvas by you (your code). If it is something else that you had on your mind saying vertical line then please explain. Otherwise good luck. :)
I'm using jqPlot for some charting. I would like to highlight regions of the background of the chart. I would like to specify rectangles bounded by the values on an axis that are the entire length of the opposite axis.
Is this do-able out of the box, or must I alter the code? Would this be a good usage for a plugin? Is there documentation on how to write one?
Update: Looks like the fill option on the series might be helpful.
Update 2: Or maybe the GridCanvasRenderer or the ShapeRenderer.
I implemented it myself with about 20 lines of code in CanvasGridRenderer. Works pretty well.