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.
Related
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
Currently I am facing issue while rendering chart for large data in EXT JS. Chart gets cut or overlapped.
For example, I have 500 names on x-axis to plot then chart displays only 15 to 20 of them and others get cut. According to my view there should be scroll bar to view whole chart rather cutting the legends. I have tried to found solution for having scroll bars for such large charts but I am not able to find it.
Any other way for viewing whole chart is also accepted.
One workaround I can think about is 'panzoom' interaction.
Please visit link given below to see an official example with 'panzoom'.
http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/?charts=true#line-markers
With 'panzoom', you can zoom in to the chart and then scroll/pan. Zooming in to the chart would make the hidden coordinates visible.
It may look like this because you might have smaller space to render the chart as your data is too big. So you can try with 'pan zoom'. But I don't think so you will get a useful chart. It will still get junked.
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.
is it possible to put images as axis ticks using d3.js javascript library?
I am trying to visualize a simple bar graph (done!) but in the x-axis I need to show a different image for each bar.
It is possible. The way to think about this is using d3 to position images on a page.
If you have each image in a div with it's own id then you can use d3 to select and position those divs. I found this tutorial very helpful.
Can someone please let me know how should I implement this kind of chart? I need to use a javascript library for implementing a chart which has a big circle (100%) inside which there are small semi-circles which divide the bigger circle. Its kind of pie chart but not exaclty pie chart. I want semicircles inside a big circle It looks like a bubble chart to me but it is enclosed within a circle. I am not quite sure which library should I use for this?
Any help would be appreciated!
write your own.
you can make divs into circles with css(border-radius), even into triangles(3d transform within div dat gives no overflow) if you try hard.
then you could utilise absolute positioning to place them where you want them.
That way you dont even need javascript or a library.
By request:
http://jsfiddle.net/h6su5/
Just a small example what you can do with google and some inventive thinking ;-)