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.
Related
I can't seem to find a way to display my chart like this with chart.js:
I want the legends to be connected to their respective sections (with a line), as shown in the picture. Any ideas?
I am new to JavaScript and d3.
My requirement is to draw grouped category bar chart. Initially, I didn't know how to take domain and range for grouped bar chart. However with the help of this post, I am able to draw grouped category bar chart of different levels.
My challenge now is to display tool tip when mouse hovers over the bars. Can anyone please suggest how to display the tool tip for the above bar chart?
I also tried following this guide, but have had no success.
You may want to try foxToolTip.js
https://github.com/MichaelRFox/foxToolTip.js
Read the README.md and check out the bl.ock in the d3.js section.
I have finally tried to rebuild my 12 month old project better.
What I Have:
A Doughnut Chart (chart.js) with an Accordion (jqueryUI) for the details.
When I click on a part of the doughnut, the Accordion on the left shows the Details (Text) for this Segment.
I would like to redesign the Tooltips as you can see in the both screenshots
where can i change the positioning of the Tooltips to be around the Chart and not on it? anyone any suggestions? all i can see in the Code is just the behavior to put the arrow above or below the tooltip...
thanks for help
I' have an already made a Stacked/Group multi bar chart with NVD3 which is working great. I need to add a grey background to some of the places of the graphic to inform something to the user.
Does anybody know how to do this?
Thanks!
If I understand correctly you don't want a background for the whole chart. In this case you can always use d3's own insert method selection.insert(name, before) (see the documentation at https://github.com/mbostock/d3/wiki/Selections#wiki-insert ) to display an svg object at a certain in front / behind certain elements...(I guess it would be behind all the groups from you animation basically).
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.