How could I add some space between two bars from the same group, in NVD3 chart?
I try chart.groupSpacing(0.5) but nothing changes...
I can't put any pictures because I need at least 10 reputation.
The groupSpacing changes distance between groups of bars.
var chart = nv.models.multiBarChart()
.groupSpacing(0.5)
;
I've created an example here
If you want to add space between bars within a particular group then you'll need to modify nvd3 source or write a multibar using pure d3.
This answer will be useful How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
Related
I am trying to create a composite chart and my requirements are to draw a bar chart, a line chart and a dotted line chart. For that I draw a composite chart. Now I am having problem that points of line chart starts from start of bar chart, but I need that to start from center of line.
You can see the problem in this JSFiddle.
I got some help from Stackoverflow that is:
Align points in centre of bars (DC.JS composite chart)
Seems like a workaround is to assign ._rangeBandPadding(1) the composite chart. Though as mentioned in the github thread that breaks the bar sizes, so adding .gap(1) and .centerBar(true) to the bar chart got everything looking nice.
but after that I got this output
[http://jsfiddle.net/nauman3128/nr0rgzvc/9/][2]
I can't explain why this works, but with some odd combination of range bands and old-style .gap(1), I was able to get it to draw properly.
The trick is
._rangeBandPadding(1)
on the composite chart, and
.gap(1)
.centerBar(true)
on the child bar chart, pretty much as stated in the original question. So this is essentially a duplicate of the earlier question and answer, but I've applied it to your JSFiddle in this fork:
http://jsfiddle.net/gordonwoodhull/nr0rgzvc/22/
Also, it's important not to set barPadding for the child bar chart. So we are using range-band layout for the composite, and classic gap-padding for the bar chart, which sounds like a very bad idea... but the output looks okay!
I am trying to create a composite chart and my requirements are to draw a bar chart, a line chart and a dotted line chart. For that I draw a composite chart. Now I am having problem that points of line chart starts from start of bar chart, but I need that to start from center of line.
You can see the problem in this JSFiddle.
I got some help from Stackoverflow that is:
Align points in centre of bars (DC.JS composite chart)
Seems like a workaround is to assign ._rangeBandPadding(1) the composite chart. Though as mentioned in the github thread that breaks the bar sizes, so adding .gap(1) and .centerBar(true) to the bar chart got everything looking nice.
but after that I got this output
[http://jsfiddle.net/nauman3128/nr0rgzvc/9/][2]
I can't explain why this works, but with some odd combination of range bands and old-style .gap(1), I was able to get it to draw properly.
The trick is
._rangeBandPadding(1)
on the composite chart, and
.gap(1)
.centerBar(true)
on the child bar chart, pretty much as stated in the original question. So this is essentially a duplicate of the earlier question and answer, but I've applied it to your JSFiddle in this fork:
http://jsfiddle.net/gordonwoodhull/nr0rgzvc/22/
Also, it's important not to set barPadding for the child bar chart. So we are using range-band layout for the composite, and classic gap-padding for the bar chart, which sounds like a very bad idea... but the output looks okay!
I would like to generate a stacked bar chart (similar to http://bl.ocks.org/mbostock/1134768) where the total height of each bar is the same and the width varies. This kind of chart is also known as Marimekko chart.
So far my attempts to make the width vary based on a value in the csv file have failed.
Any suggestions would be appreciated.
The Marimekko chart at http://bl.ocks.org/mbostock/1005090 is what I was looking for.
I looked at nvd3 stacked charts, and does anyone know how can I make a 100% stacked chart with nvd3?
For example, a chart like this: https://www.syncfusion.com/content/en-US/Products/Images/wpf/chart/wpf-chart-ColumnStacked100.jpg
I used the multibar chart and then transformed the data to simulate a 100% stacked bar chart. I had to add each of the bar's values and then divide value in the bar by the total value of the bar.
The default chart object in the SQL Server (2005) Business Intelligence Development Studio doesn't seem to some have formatting options like :
specifying the text direction of labels in the x and y axis
adding a trendline to a bar chart
arbitrarily resizing items in a chart - for example, if I resize the chart object, everything gets resized accordingly but I can't keep the size of the chart the same while extending the area of the legend for instance.
multiline chart labels
So what I want to know is
is there any easy answer to the formatting problems mentioned above?
what websites/books/resources/examples would you recommend I look
into for extending the functionality of the chart object?
Some colleagues of mine gave up on the stock control and bought Dundas charts
The stock charts are cut down versions of Dundas.
yes you can specify the text direction of labels in the x and y axis
Go to chart properties and in the tab x and y axis enter the chart title and in the title align use the combination like left/right/center align.
you can change the legend line go to the chart properties click legend tab inside this
there is an option for "display legend inside plot area" and you can include the trendline there
you can use multiline text labels when the text limits extends
I don't see how you can resize the legend, puting inside the plot area looks ugly for pie-chart
I'd recommend go with the dundas chart components gbn suggested.
If that's not possible at least this article should solve issue 1.