Is there any configuration layout option to increase the space between the bars in a bar plot in plotly.js ?
I tried increasing the width of the plot but it is expanding the plot as a whole.I need to fix the width of the bar and space between the bars.
Any help would be highly helpful.
It is a setting of layout The key value pair for the layout object to change the gap is bargap. For example given arrays x and y:
Plotly.newPlot('myDiv', [{x:x, y:y, type:'bar'}],{title:'title',xaxis: {title: 'abscissa'},yaxis:{title:'ordinate'},bargap:0});
Will generate a plot with no gap like a histogram.
Related
I would like to know if this is possible to do with Chart.js. I have not been able to figure it out.
Basically, I want a horizontal bar chart where time is on the X axis, and the bars have data that is a start date/time and end date/time, such that the bars "float" and are not anchored to the left side of the chart. The bar would start at the start time and end at the end time, as labeled on the x axis.
Also, I need the y axis labels to be inside the horizontal bar.
Does Chart.js support this use case? Does anyone have sample code? Thanks!
Yes they support floating bars (https://www.chartjs.org/docs/latest/samples/bar/floating.html) if you add the property indexAxis: 'y' in the options object it will become a horizontal bar chart. to get the labels in the bars you will need to use the datalabels plugin: https://chartjs-plugin-datalabels.netlify.app/samples/charts/bar.html
I have a chart where I've set a maxBarThickness on my axis. When the chart is populated with a lot of data, the datasets are close together, but when there are just a few data points, the datasets look wide apart.
I have tried setting categoryPercentage to a smaller percentage but when the chart is populated with a lot of data (or on page resize), the chart looks wrong. Any help would be appreciated.
According to this github issue you cannot change the space between bars if you decide to set a barThickness (I assume it does not work when maxBarThickness is set either but I might be wrong, if so I'll delete this answer)
According to the previous link, you have two solutions:
If you want to keep your bar thickness (answer to the github issue):
If you don't want to stretch out the bar to fill the extra space, you have to reduce the width of the canvas.
Otherwise you could set a barPercentage and a categoryPercentage on your chart, without a barThickness or a maxBarThickness:
scales: {
xAxes: [{
categoryPercentage: 0.8,
barPercentage: 0.9
}]
},
Those are the default values.
Related questions :
Chart.js Bar Chart: How to remove space between the bars in v2.3?
CharJS 2.5.0 - How to remove space between bars
Reduce space between ticks in horizontal bar-chart chartJS
I have a bar type chart in chart.js with some columns and i want to draw a straight horizontal line at some point to the chart overt the bar columns.
I've tried to add a simple line type chart with equal point, but the problem is, the line doesn't start from X axis. The points are centered because of bar chart categories, but i want the line to be started from X axis.
Is there a way to do this?
I've done it by adding a second hidden X axis and i use that for the line chart.
I have multiple charts on a page which are supposed to have uniform height & y-axis baseline, so that the user could compare each chart apple-2-apple.
I rotate the x-axis label to 90 degrees so that it would look nicer and won't overlap with each other, but the problem is, label's length is different from chart to chart, this makes highcharts automatically adjust the height and y-axis baseline of the charts.
How can I make the chart's height and y-axis baseline to be fixed for all the charts on the page?
You can use marginBottom to set the bottom margin of the chart:
$('#container').highcharts({
chart: {
marginBottom: 150
}
});
that will ensure that the bottom of the chart will always remain the same size.
here you can see an example with 2 charts side-by-side, one with longer names and the other with shorter names.
http://jsfiddle.net/ktxn7ewx/
Here is the HighCharts API: http://api.highcharts.com/highcharts#chart.marginBottom
I'm trying to display axis for a grid based chart (heat map) to display correctly. I can get them into the right alignment (centered with each grid whether it be row or column), but they are on top of the grid where I want to have them displayed outside of the grids.
Here's what I have so far: http://jsbin.com/hihepo/8
Provide some margins around and translate your chart's g wrapper. You have margins defined, but they are never used, so you chart stretches until svg element borders and there's no more space around.
Use .orient('left') for y axis and .orient('bottom') for x axis orientation. See docs for orient method.
Adjust the transform and text-anchor of your x axis labels (or change the translation of their g wrapper).
Here's a demo for x axis labels.