Develop Reference

How can you make all groups the same height in a vis.js timeline?

In vis.js, it seems that if you display your data in groups without stacking, then the last group is taller than the others by 5px. There doesn't seem to be an obvious way to change this: it isn't a question of styling the items, since it's the row itself that's taller for some reason. How would I make all rows the same height?
Example: https://jsfiddle.net/6czo14pg/

This is due to the margin on the timeline axis. It can be adjusted with the margin axis option described at https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options.
Setting it to 5 in your example makes all the rows the same height.
var options = {
groupOrder: "content",
stack: false,
margin: { axis: 5 }
};

Chartjs: How can I group datasets closer if I have maxBarThickness set?

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

chart.js fixed bar width issue

I am using Chart.js as my charting library. I have created horizontalBar chart.
I need to set the width of individual bar in the chart.
I did not found anything specific in chartjs documentation but while looking at source code I found the option barThickness which is setting the fixed bar width
But as number of rows increase, instead of increasing the height of the chart, the bar are colliding with each other. Please check fiddle for example:
https://jsfiddle.net/orhp0zLg/
Is there any way we can increase the height of the chart instead of letting the bars collide with each other?

The barThickness property is a fixed width, as you noticed in your issue.
However, you have an other property called barPercentage which is a multiplier of the max width of your bars.
You should set berPercentage to a value (let's say 0.95) and you'll always have the same format, no matter how many bars you have :
options: {
scales: {
yAxes: [{
barPercentage: 0.95,
}]
}
}
Here is your updated fiddle with the fix and here are the results with first 7 values and then 12 :

How can set a width to a single column in Highcharts

I would like to know how can I set the width of a single column - If I have several columns the width of each one of them looks fine but when i have only one column it looks very wide.
Thanks,
Ron
here is my example chart- all I want is to be able to define the width of this single column:

Apart from suggested pointWidht, you should set pointRange

You can also affect the column width by setting the x axis scale.
If you set a max x value as if there were mulitple columns, the width will adjust.
Doing this in conjunction with the pointRange will be very effective ways to control the width while maintaining proper ration to the axis - whereas the pointWidth option will over ride the relationship to the axis values.

Highcharts - Why is there extra spacing before the first column and after the last column?

I have a Highcharts datetime column chart, with several series that which are added and updated dynamically. It appears that the library is producing the chart with a large chunk of space before the first column and after the last column. It's as if the columns are grouped into the center of the chart, while they should be arranged evenly across the space. I have tried adjusting the minPadding and maxPadding of the axis options with no success:
xAxis: {
type: 'datetime',
minPadding: 0,
maxPadding: 0,
labels:{
formatter:function () {
return Highcharts.dateFormat('%b %e', this.value);
}
}
},
Here is an example adapted from the Highcharts demo page which is behaving correctly:
http://jsfiddle.net/ricksuggs/8Gt2y/
While this example which is written by myself, is showing the extra padding:
http://jsfiddle.net/ricksuggs/PRKAJ/36/
Thank you.

You can modify pointWidth and groupPadding/pointPadding parameter
http://jsfiddle.net/PRKAJ/37/
EDIT: You should define pointRange
http://jsfiddle.net/PRKAJ/41/
http://api.highcharts.com/highcharts#plotOptions.series.pointRange

From what I'm seeing, example http://jsfiddle.net/ricksuggs/PRKAJ/36/ is showing to me without extra padding; unlike on the screenshot by #ricksuggs above, where there is extra padding.
I believe the "problem" lies within multiple series with single data points vs. a single series with multiple data points.
With multiple series (=sets) with single data point in each set, columns are grouped together, expecting another grouped data points from another set, thus creating the padding. However, with a single set containing multiple data points, those are distributed evenly creating no additional padding.
To answer your question, I believe that's why there is extra spacing. However, I could not find a way how to get rid of it as grouping multiple series into single set with multiple data points has other limitations (hiding series in legend, coloring, ...).