I have a Highcharts chart containing boxplots. The chart has 1 yaxis and 1 series containing 4 data-arrays which all are on the same yaxis, obviously.
how can i increase the padding between Series1 and Series[2]? the x-axis is based on categories.
EDIT:
of course, i tried already with groupPadding/pointpadding, but couldn't get it to work. if i apply point/groupPadding to one specific array in series then its width gets smaller. if apply it to the whole series, then the padding is between each of the boxplots. however, i only need the padding between Series1 and Series[2]. are there any other ways to try?
EDIT2:
updated/changed picture.
Use pointPlacemet for each of the series. See demo: http://jsfiddle.net/6Lftuhzk/
series: [{
pointPlacement: -0.1, // to the left
data: [ ... ]
}, {
pointPlacement: -0.1, // to the left
data: [ ... ]
}, {
pointPlacement: 0.1, // to the right
data: [ ... ]
}, {
pointPlacement: 0.1, // again, to the right
data: [ ... ]
}]
Related
I'd like to create a highcharts scatter diagram showing wind direction (y) on a time axis (x). The color of the points should be calculated using the wind speed. How could this be done? The result should look like the attached example, where red dots indicate high speed, green and yellow low speed.
One solution would be to split the data into 12 series (Beaufort 1-12) with different colors, shown in the same chart, but I would prefer to find a method to calculate the colors for each point seperately.
You can use colorAxis with dataClasses and colorKey for the series. For example:
colorAxis: {
dataClasses: [{
to: 10,
color: 'green'
}, {
to: 50,
from: 10,
color: 'yellow'
}, {
to: 100,
from: 50,
color: 'red'
}]
},
series: [{
colorKey: 'speed',
data: [{
x: 0,
y: 1,
speed: 10
}, ...],
type: 'scatter'
}]
Live demo: http://jsfiddle.net/BlackLabel/5po1Lqym/
Docs: https://www.highcharts.com/docs/maps/color-axis
API Reference: https://api.highcharts.com/highcharts/colorAxis.dataClasses
I have applied the plotBand option for the xrange chart where the first row is small than the second on , but when resizing the window the data series are not aligned with the plotBand area.
Currently I'm modifying the y and height of the series by using css, is there any way to make it dynamic to fit into the plotBand area during window resizing.
Jsfiddle: http://jsfiddle.net/karnan796/t1Ldnc69/13/
also the green bar not aligned to the plotBand area
You need to adjust the plotBands to the groupPadding value:
Highcharts.chart('container', {
...,
yAxis: {
plotBands: [{
from: -0.3,
to: 0.3,
color: '#00401f'
}, {
from: 0.7,
to: 1.3,
color: '#2f4776'
}],
...
},
series: [{
pointPadding: 0,
groupPadding: 0.2,
...
}]
});
Live demo: http://jsfiddle.net/BlackLabel/orpvc50t/
API Reference:
https://api.highcharts.com/highcharts/series.xrange.groupPadding
https://api.highcharts.com/highcharts/series.xrange.pointPadding
Am using high charts, when am calculating the average time and plotting the pin position slightly changed. Here am attaching the screen shot, please have a look on it and help me out from this. Thank you.
Here is my series,
var data = [
{
name: 'No. of potholes',
data: seriesArray,
stack: 'North',
color: 'lightblue'
},
{
type: 'line',
name: 'Average',
data: seriesAvg,
color: 'orange',
marker: {
lineWidth: 2,
lineColor: 'orange',
fillColor: 'white'
}
},
{
name: 'KPI',
color: 'grey'
},
]
The plotting circle position has been changed:
This is caused by the grouping functionality (https://api.highcharts.com/highcharts/series.column.grouping):
When it is enabled each column series has a reserved space in every group. There're two column series in your chart. The second column series occupies half of the space in each group even though it has no data.
Set grouping to false to prevent this unwanted behavior.
I'm working with this chart, and the thing I'm trying to create is that for example "Apples" bar does not start from 0 on y axis. Instead of that, I want it to start from from example 25%, and to end in 75% (so that bar in chart (its height) is from 25 to 75, when you look at values in y-axis). Does anyone have an idea of how to do that? What to change?
You can use the column range chart type. See this official demonstration.
Here is a sample of your apples (JSFiddle):
$('#container').highcharts({
chart: {
type: 'columnrange'
},
xAxis: {
categories: ['Apples']
},
yAxis: [{
min: 0,
max: 100
}],
series: [{
data: [
[25, 75],
]
}]
});
read the comment in jsfiddle.
The space should not be there in rendered graph between blue one and green one in c1
http://www.jsfiddle.net/QnU9e/1/
In bar graph making 2 category and 3 series
series: [{
name: 'A',
data: [49.5, 71.5]
}, {
name: 'B',
data: [null, 78.8] // The space should not be there in rendered graph between blue one and green one in c1
}, {
name: 'c',
data: [30, 78.8]
}]
The only way I can find to do this is to control the bar spacing yourself by specifying X data values. Note, I set the pointPadding: 0 in the plotOptions so I could get total control.
series: [{
name: 'A',
data: [[0.075,49.5], [1,71.5]]
}, {
name: 'B',
data: [[0,null], [1.025,78.8]]// The space should not be there in rendered graph between blue one and green one in c1
}, {
name: 'c',
data: [[-0.075,30], [1.05,78.8]]
}]
Update fiddle.
Uforutnatley this options is not supported, but you can try to manipulate columns by translate() function which allows ot move SVG elements.