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
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 am trying to create a timeline chart in a different way. Looking for suggestions on which one to use to get the best out of it in javascript world.
My problem is to plot clickable milestones with some text on the Y axis and months on X axis. I also have to show horizontal bars against text strings filled with colour and those milestones plotted on the bar as small circles or diamonds.
Hope I am clear. Can any one throw light on plotting this kind of map either in Excel or Javascript.
Thanks in advance.
It may be overkill, but this looks like the best solution, but it does neatly fit your request of timing on x axis, label on y, TimelineJS
It's pretty customize-able too to get it how you want.
Finally wrote excel based chart and started filling cells with colors etc based on custom logic. Thanks everyone for all your responses.
I'm using Rgraph to make a line graph with multiple line's on it. The problem i'm having is that some graphs i'm making can have over 30 lines on them which means the legend doesn't show all the lines displayed on the graph.
I've looked through the properties of the Rgraph but can't find something that would help me. Is there a way that I can display all this information on the legend in some way, ie a scrollbar.
Cheers
You could use the HTML key. That isn't constrained by the size of the canvas. Or make your own labels with HTML.
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.
I have tried using all sorts of combinations of tickInterval, tickPixelInterval label formatter and tickPositioner and I haven't been able to solve this issue.
I have a chart builder that pulls in different feeds and allows the user to modify the date range of those feeds before shooting this data into highcharts and spitting out the chart.
The problem is that some of the time, the first and/or last dates get cut off. Here is an example:
Without adjusting the margins of the chart (which causes the chart to take up less space), how do I prevent this from happening?
If I was able to determine the pixel location of the ticks and their labels, I could in theory, hide the specific ticks and their corresponding labels which were located outside the graph / cut off. Thoughts?
Without looking at your code - there are a few things you can do.
Rotate your labels
Play around with the x/y axis labels
Align them to the right
Hopefully one of these would help your cause.