Bars in bar chart get smushed together - javascript

I'm trying to make bar charts in d3, but my bars get smushed together when I look at them in Chrome. (They look fine in Firefox or Safari.)
For example, they look like this:
when there should really be some whitespace in between the bars.
Strangely, I see this even in the official d3 tutorial, but only on some of the bar charts -- the first and fourth bar charts on that page have the correct amount of spacing, but the second and third bar charts are smushed like the chart above.
What's the fix for this, so that bars display correctly in Chrome? What's special about the first and fourth bar charts on that page?

This can happen when using browser-based zoom, since a single pixel gap can collapse when zoomed out.
In Chrome, you need to select "View → Actual Size" or hit Ctrl/⌘-0 and this should fix it.

Related

Using chart.js version 3, How do create Custom Labels with Links?

I'm using Charts JS and I'd like to create some custom Labels on a Stacked Bar Chart. I'm trying to recreate this following chart:
How do I create custom labels as circled in Red above? I'd like to link to other pages with these labels. Actually the bolded text would link to one page and the normal text would link to another page.
Also How would you label each bar in a way that the values drop down off the bar when there is not enough room to display it on the bar? See the "4%" or "6%" on the right side of the graph.
I also want to know how to put a margin spacing between each stacked bar. See the vertical white space between each bar on the image above.
Any help with the issues above would be greatly appreciated. Thanks.
I ended up creating my own chart using div and widths. Sometime you have more control over look and feel if you build it your self.

How to overlie bar charts in nvd3.js?

I want to display one bar chart on top of another one.
Reason:
I am showing a base consumption on a certain day, but also the overall
value.
I don't want a bar chart next to another but on top of one.
So far, I draw a line with pure d3.js on top of the bar, which brings a lot complexity and handling edge cases on my own.
The problem: I am using a multibarchart with nvd3.js, because I sometimes display more than one range of value in my chart. So for one or more series inside this chart, I want to display another bar chart on top.
Is there a better solution for this?

Transition from normalized to normal stacked bar chart

I have a list of normalized stacked bar charts. When the user clicks on the bar chart it is supposed to zoom in and transition to a not normalized version of the same bar chart.
I got everything working except for the transition.
Check out the code: http://jsfiddle.net/adius/tgC2m
I don't get why it's not scaling it properly but instead even shrinking it.
When I change the order to zoom from non-normalized to a normalized version it also works in the first place but messes up the transition. So the charts themselves are OK, but the transition is not. Is it even possible to transition from .offset('expand') to .offset('zero') and vice versa?
Any help would be really appreciated as my deadline is approaching really fast! ^^

Bars resize (shrink) when I add a new bar to the bar chart, but when removing it, bars stay small

I'm using Flot to chart some bar charts on my website.
When I draw a chart with three bars for example, everything renders fine. Then I can add a fourth bar and the bars get thinner and accommodate themselves properly (sort of like what Highcharts does with default settings).
When I remove a bar from that same chart, the bars stay thin and resized and do not grow back to their previous state.
Any ideas how I can achieve this effect? Does Flot offer this functionality? Their documentation doesn't mention anything like this and I'm afraid I may be overlooking something.

Highcharts highstocks - Dual chart axis issue

Looking through the documentation for Highstocks, I found this example:
Shown here is two series on the same chart, therefore with a linked range selector - this is really really useful, but I wish to display something different which is proving to be very difficult.
What I'm looking for is a normal line graph on the top series, representing data plotted onto time (almost like in this example), but a bar chart or horizontal candle chart in the lower graph, representing one or more timelines.
I've drawn an image of what I'm looking for:
I apologise for the crude drawing, but hopefully it shows what I am aiming to achieve: standard graph on top, bar/candle on bottom.
I have attempted various techniques to render this, but I can't find a way to have both series drawn on the same timescale, linked with the same range selector.
In case it helps, here's a starting point on JSFiddle, with all the unnecessary code removed: http://jsfiddle.net/g105b/8JhXv/
and a link to the original demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
Answer taken from official Highcharts forum
it is possible, but with some limitations. In the fact you want to show gantt chart. Bar charts aren't possible in your case - bar chart = inverted whole chart (yAxis becames xAxis, etc). Instead take a look at example for gantt chart: http://jsfiddle.net/highcharts/r6emu/
You can combine them into one, ane effect: http://jsfiddle.net/8JhXv/1/
About limits:
tooltip fo bottom chart is availabe only when you mouseover start and end date
bars are on lines, not between them

Categories