Am trying to build vertical bar chart using nvd3 charts.
Problem :
If chart has single record, bar width reaches 3/4 of the chart width.
Question :
How to change width of the bars in Discrete bar chart?
Have attached chart please guide me..
If you look at the source here. You'll see that the width of the rectangle is calculated based on the number of items using rangeBand. There doesn't appear to be a way to set the width of the rectangle though the library's API.
If you didn't want to patch the library, you could create additional fake bars with zero data and provide a label formatter that would return an empty string if the value was zero, but that assumes zero is not a valid number in your data set.
Use the follwing code to set the width
dispatch: {
renderEnd: function (e) {
d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
}
}
or you can use
groupSpacing : 0.57,
Related
Is it possible in highcharts to make the chart width, the plotting area the same width whether there are labels or not?
For example, both these charts have width 150 but one looks thinner than the other because it has the labels enabled.
I can do this programmatically but it is a bit messy. Is there a way?. I tried, for example, to set the label as enabled but not visible but this combination of options does not exist.
Thanks for any help
You can set fixed chart margin:
chart: {
marginBottom: 20
}
Live demo: http://jsfiddle.net/BlackLabel/st8c0r1p/
API Reference: https://api.highcharts.com/highcharts/chart.marginBottom
I'm trying to use ngx-charts to display an area chart that spans the full width of my page (it's supposed to match the width of the horizontal line above it). However, it appears that when generating a chart there is some sort of padding inside the svg, which I imagine is useful if you have a legend etc but I am not using that, here's what I see:
See how the actual area chart doesn't expand the full width?
My code:
<ngx-charts-area-chart
[scheme]="colorScheme"
[results]="heatmaps"
[curve]="curve"
[showGridLines]="showGridLines"
[tooltipDisabled]="tooltipDisabled"
(select)="onSelect($event)">
</ngx-charts-area-chart>
And my config variables in my component.ts
curve = d3.curveNatural;
showGridLines = false;
tooltipDisabled = true;
colorScheme = {
domain: ['#3f3f3f']
};
As you can see I am not using the view attribute so the chart should expand to the width of the page. I was thinking I could utilize a viewBox on the svg but not quite sure, any thoughts?
Thanks!
I'm working on a stacked bar data chart in order to display some informations using Chart.js 2.0.2 and Angular-Chart 1.0.0.
I would like to detect when the user scroll to the end of the chart container, then add some data to the chart by keeping the ratio (height/width) of the chart.
The thing is, chart.js provides an iframe and I don't know how to add data and keep the space between bar for example. If I resize the canvas, this doesn't work. I have a basic chart with options.responsive = true, and I add data to this chart.
However, even if only the chart wrapper width changes programmatically, the height of the chart changes too. This is a strange behavior of responsiveness.
Is it another way to change only the width of the chart to keep the same space between bar chart ?
do this:
options: {
responsive: true,
maintainAspectRatio: false
};
Then you can pragmatically update the height/width as you see fit with:
chart.canvas.parentNode.style.width = '128px';
//NOTE: I'm running 2.6
Using the built-in chart types of dc.js, is it possible to render a bar chart where the bars are centered on the zero value of the y axis?
I would like to get a chart that looks like this:
I tried using a box plot, but it seems that the effort required to coerce my data to render the correct bar heights and get rid of the percentile and error bar indicators will be greater that simply creating a custom chart type for dc.js.
Basically I want jqplot bar graph to be able to size itself automatically according to the data range passed to it.
In my application the data range (ordinates) and the number of ticks may vary, so I need some help regarding sizing my chart properly to avoid any overlapping.
I have tried using HTML scroll with fixed height and width but it didn't work as I hoped.
Also any help regarding X-Axis scrolling of jqplot will be highly appreciated.
You can get your dataBounds value after rendering using :
var minY = plot2.axes.yaxis._dataBounds.min;
var maxY = plot2.axes.yaxis._dataBounds.max;
(You can get minX and maxX similarly using xaxis.)
Then you can ask jqplot to use this bounds to plot exact range using :
plot2.axes.yaxis.min = minY;
plot2.axes.yaxis.max = maxY;
(Again act similarly for xaxis);
Finally, replot your graph : plot2.replot();
Your final graph has bounds according to your data values.
Edit
You can work on numberTicks as well using plot2.yaxis._numberTicks or plot2.yaxis.numberTicks (not sure which one is effective)
jqplot does not have inbuilt functionality to introduce scroll bars in case of large data. You have to apply workaround on your side like jquery slider or HTML div scroll.
However I suggest you to use zoom feature of jqplot as explained here