Highcharts - Space between bars based on the bars' width - highcharts

I need to make a separation between bars from a bar chart based on the bar width. That means that if a bar has a width of 1X, the separation between bars must be 1.5X. Is that possible? I played with variables like pointPadding and groupPadding but I couldn't solve this.
Here I set pointPadding on 0.15 but it doesn't seem to make a 1.5-bars space between them:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
},
plotOptions: {
series: {
pointPadding: 0.15
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
}]
});
https://jsfiddle.net/5nza8q1s/19/
Also, I need to make the first and last separation (between the bar and the chart borders) of 0.5X, is that possible too?

For the first requirement you can use groupPadding with calculated values from proportion: 0.3 - 0.4 - 0.3, which gives us 0.6 between columns - 150% of 0.4 (all in axis units).
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0.3
}
}
To achieve shorter distance at axis ends, use min and max properties:
xAxis: {
...,
min: 0.1, // increased from 0
max: 6.9 // reduced from 7
},
Live demo: https://jsfiddle.net/BlackLabel/6uktc3as/
API Reference:
https://api.highcharts.com/highcharts/xAxis.max
https://api.highcharts.com/highcharts/xAxis.min
https://api.highcharts.com/highcharts/series.column.groupPadding

Related

Highcharts - Axis minPadding and maxPadding not working

I was adding some padding to my chart because I want to control the space between the actual chart and the container, and I encountered a problem.
Look at mi first fiddle, all seems legal but the padding isn't being applied:
https://jsfiddle.net/9r2Lqmpj/
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
minPadding: 0.4,
maxPadding: 0.4
},
yAxis: {
startOnTick: false,
minPadding: 0.2
},
series: [{
data: [129.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
But if I duplicate the "xAxis" key, this time without the categories array, which seems highly wrong, for no reason it works:
https://jsfiddle.net/v0rj1xkg/
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
minPadding: 0.4,
maxPadding: 0.4
},
xAxis: {
minPadding: 0.4,
maxPadding: 0.4
},
yAxis: {
startOnTick: false,
minPadding: 0.2
},
series: [{
data: [129.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
I wasn't expecting at all that this worked, in fact, I discovered it by mistake. Why is it working only when I repeat the xAxis key definition?
Properties minPadding and maxPadding don't work with category axis type. Use min and max options instead.
Highcharts.chart('container', {
xAxis: {...},
...
}, function() {
var xAxis = this.xAxis[0];
this.update({
xAxis: [{
min: xAxis.min + 0.2,
max: xAxis.max - 0.2
}]
}, true, true, false);
});
Live demo: https://jsfiddle.net/BlackLabel/96s30khd/
Well Agustin, not much of a discovery rather than a common logic there in your second scenario. I am not really sure what you're trying to achieve, but having xAxis defined twice is not necessary. Just remove the first one to get the same result, so it looks like your second one is overwriting the first one. Have a look at your fiddle here https://jsfiddle.net/xcmq869s/ which looks the same to me. Also it might be the case that the padding doesn't work with categorical data, so it works fine when no categories are specified. U can certainly alter the padding with removed categories.
On the other note, if you want to keep your x-axis labels and add only outer spacing, try using the chart.spacing config option as in the fiddle here https://jsfiddle.net/xcmq869s/1/.

How to position a Highcharts title on the right of the chart?

I'm checking through the documentation and don't really see a way to do this.
What I'd like to do is position the chart title to the right of the chart, rotated 90 degrees and centered vertically.
So something like this (used Photoshop to represent rotation):
I know I can set the x, and y position like this:
title: {
text: 'Chart title',
align: 'right',
y: 140,
x: 50,
rotation: 90 //this does not work
}
But that doesn't really give me what I want. Is there a setting that I'm not finding to position the title on the right, and rotate it 90 degrees?
Here is a fiddle I was messing with for the x, y axis positioning:
http://jsfiddle.net/c2tb1p5b/1/
You can do this using a combination of x, y placement on the title along with CSS - you will need to mess around with the exact values but something like this should work:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Chart title',
align: 'right',
y:-480,
x:-280
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
step: 1
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
CSS:
.highcharts-title {
transform: rotate(90deg);
}
http://jsfiddle.net/c2tb1p5b/2/

Highcharts calculated max value not working with 2+ Y axis

I have been stuck on this for a while now and despite several attempts and a lot of research I have yet to find the solution.
I am building charts with two Y axis. Everything works just fine except that the highcharts computed max Y value is always much higher than it should be. Resulting in a zoomed out graph.
I've replicated the problem here : http://jsfiddle.net/9vmtz3nf/
I cannot hardcode any max value as it will always depend on the data coming in from the DB and there is a very wide margin of values possible.
So basically, how can I tweak the options and parameters to make sure the graph max value is set to the closest tick (150/600 in the jsfiddle example) ?
Thank you in advance
$(function () {
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{
title: {
text: 'Primary Axis'
},
}, {
title: {
text: 'Secondary Axis'
},
opposite: true
}],
plotOptions: {
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 124.0, 126.0, 135.6, 111.5, 116.4, 114.1, 95.6, 54.4]
}, {
data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4],
yAxis: 1
}]
});
});
This is a result of the chart trying to find a common denominator. Even if you do hard code a max value, the chart will behave this way.
Setting the alignTicks property to false will fix this.
chart: {
alignTicks: false
}
Fiddle:
http://jsfiddle.net/jlbriggs/9vmtz3nf/2/
Reference:
http://api.highcharts.com/highcharts/chart.alignTicks

Moving highchart to the left when there is a Y-axis title

I'm trying to put Y-Axis title on top right of the Y-Axis, right below the chart title. However, when I insert the axis title, the whole graph moves to the right. I tried to used spacingLeft to set the position of the chart, but nothing changes. Is there a way to keep the position of the chart even if I add the axis title?
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
marginBottom: 80,
spacingTop: 20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Chart title',
y: -10
},
yAxis: {
title: {
text: 'aaaaaaaaaaaaaaaaaaa',
align: 'high',
rotation: 0,
x: 100,
y:-20
},
labels: {
align: 'high',
x: 0,
y: -5
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
jsfiddle: http://jsfiddle.net/8m7rc/1/
Min Sun Song, you can use offset property to reduce that gap.
offset: -120,
I've updated you fiddle here
Hope this is what you are looking for.
You can set marginLeft property for a chart. See demo.

How do I set highcharts line graph point colors to an array of colors?

I've spent some time poking around the API documentation, and I don't see a simple solution to my problem. This is what I'm looking for:
In a chart, I can set each line to be a different color I choose like
colors: [ 'red', 'green', 'blue ]
But what if I want the points to be different colors than the line?
I know I can set the
plotOptions: {
series: {
marker: {
fillColor: 'yellow',
lineColor: 'yellow'
}
}
},
But what if I want each point marker to be a different color? (For instance, I want the blue line to have dark blue points, the red line the have dark red points, and the green line to have dark green points.
I think I want to do something along the lines of
borderColors: [ 'darkBlue', 'darkGreen', 'darkRed' ]
or whatever and the same with fillColors...
Is there any way I can do this easily that I've missed.
Thanks!
Define the marker in the series...
I found this in the api:Highchart symbol api
Which links to this fiddle:
High char jsfiddle
changed the code to work with colour:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 316.4, 294.1, 195.6, 154.4],
marker: {
fillColor: '#f11',
lineWidth: 2,
lineColor: '999'
}
}, {
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
marker: {
fillColor: '#999',
lineWidth: 2,
lineColor: '#111'
}
}]
});
});
You can specify the line color and the marker color for each series explicitly.
Series Color Sets the color to the series.
Markers Color sets the color to every point in the series.
Demo .

Resources