Fix space between columns and align labels on Highcharts - javascript

I am creating a column chart but I see too much space between the columns and I want to reduce the space between them. The labels on the xAxis are also not aligning.
This is my fiddle: https://jsfiddle.net/q3atxr4c/1/.
I added pointPadding, borderWidth and groupPadding. None of these are working.
Is there a way for me to reduce space between the columns?
Also all the values show up on my webpage (with navigation working) but are not on the fiddle so thats why I have a large div.
I want to be able to adjust the distance the columns and align the labels on the xAxis for them. Please help!

The pointPadding and groupPadding options won't work as long as the pointWidth is set, which takes precedence. As for the xAxis' labels, they are aligned correctly because they are in the center of all points of a specific category. You can't see them as they have 0 values. You can either remove 0's points or set grouping property to false.
API Reference:
https://api.highcharts.com/highcharts/series.column.pointWidth
https://api.highcharts.com/highcharts/series.column.grouping
Examples:
https://jsfiddle.net/BlackLabel/zsnju2xm/ - using pointPadding and groupPadding with all points visible
https://jsfiddle.net/BlackLabel/kzrunfv0/ - using grouping

Related

Highcharts Gantt - data labels in top row are not respecting y offset positioning

I'm making a milestone comparison chart, and I'm putting the data labels above the milestone markers. The data labels are two rows of text.
I'm setting my own calculated chart.height in order to increase the row height so I can fit the data labels nicely within each row, and I'm using a combination of series.point.graphic.translate() and series.datalabels.y in order to position everything vertically within the row where I want it. I've got everything almost dialed in exactly how I want it.
However, it seems as though the data labels for the first row of data are not respecting the y offset I'm trying to set. In fact, it looks to me like instead of starting at the center of the row and offsetting the amount specified by series.datalabels.y, there's actually more offset being applied that is forcing the data labels to push up to the very top of the plot area.
In the screenshot, the red lines near most of the milestone markers/labels show what the offset should be: something very minimal, the label should be just barely above the point of the milestone marker. But the red boxes in the top row show how that offset is too much, the labels are being pushed too high (to where the top of the label is right against the edge of the plot area):
What's going on there, and how can I fix it?
Reference pen.
Well, I figured it out...
If I just don't apply the y offset to the datalabels for the first row, they seem to line up much better:
// yValue is essentially the row here, so 0 is the first row
series: {
dataLabels: {
y: yValue === 0 ? 0 : -31
}
}
Reference pen.

Dates are overlapped in Highchart's areachart

I am using Highcharts area graph.
The type of the chart is "datetime".
The X-Axis labels get well adjusted as long as
Either the width of the chart container div is less than 900px
Or the width is not specified for the div
When I set the width of the container of the div more than 900px, either the labels are appended with the dots or get overlapped.
How it can be resolved. Thanks in advance for any suggestion or help.
You can add the tickInterval option to the x-Axis. This option determines the distance between the individual ticks. For example setting it to
tickInterval: 24*3600*1000
which resembles on day in milliseconds yields no overlapping labels for your chart:
https://jsfiddle.net/doc_snyder/mwzd1rc8/1/
You can also use a new option provided below by highcharts if you are comfortable with showing the labels in 2 or more lines and if you do not want rotated labels.
staggerLines: 2
https://jsfiddle.net/bhavinpatel/153eh40z/

Google Charts Horizontal BarChart calculate percentage

Is there a way to make the google BarChart to work like the PieChart?
The google´s PieChart sums all values you provided and give percentages. The BarChart does not do that when you work with horizontal columns, the length of the columns and the graph itself are based only on the values you provided and it does not label the horizontal axis with the percentage.
Even though I format it with 'percentage' it only adds the % simbol to the current values.
Is there any way of doing that?
use the option isStacked:'percent'
https://jsfiddle.net/kzk07ocw/

Spline chart drawn on the xaxis in case of single value or constant values - highchart

while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();
I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.

Declaring location of highchart bars on a chart?

I have highchart and which looks like this ;[if i commented out max value of xAxis i see this image below ]
Here is the similar jsfiddle ;
Jsfiddle Link for similar case
I want to push the bars to all the way left side of the chart.
I actually can do it using hard coded json value on max: of xAxis . but my json value depends on year+month+day+hours+min+sec. so when some of the values here are changed , then i have to change the hard coded value to something else so it is not logical .
If there is anyway using a max value dynamically Please help me.
Thanks
Solution is to increase maxPadding, demo.
More info about maxPadding in the API:
Padding of the max value relative to the length of the axis. A padding of 0.05 will make a 100px axis 5px longer. This is useful when you don't want the highest data value to appear on the edge of the plot area. When the axis' max option is set or a max extreme is set using axis.setExtremes(), the maxPadding will be ignored. Defaults to 0.01.

Categories