I have 3 values on each column (min, medium, max), I need position each box on correct position by value, and if 2 box or 3 box have same value or values very close, I need group (like last box of image), and the boxes need to have minHeight or something like this to fit the text inside:
I have some code here: http://jsfiddle.net/to2z4dyv/
New fiddle update: http://jsfiddle.net/vdgphk3L/
$(function() {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: false
},
plotOptions: {
columnrange: {
grouping: false,
pointPadding: -0.20
}
},
legend: {
enabled: true
},
series: [{
name: 'Minimo',
color: 'green',
data: [
[10, 2000, 2999],
[20, 5000, 6000],
[30, 3000, 4000],
[40, 8000, 9000],
[50, 3500, 4000]
],
dataLabels: {
enabled: false,
borderRadius: 2,
inside: true,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
format: '{point.y}',
//color: 'rgba(0,0,0)'
}
}, {
name: 'Medio',
color: 'yellow',
data: [
[10, 3000, 3999],
[20, 6001, 7000],
[30, 4001, 5000],
[40, 9001, 9500],
[50, 4001, 4500]
],
dataLabels: {
enabled: false,
borderRadius: 2,
inside: true,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
format: '{point.y}',
//color: 'rgba(0,0,0)'
}
}, {
name: 'Maximo',
color: 'blue',
data: [
[10, 4000, 5000],
[20, 7001, 8000],
[30, 5001, 6000],
[40, 9501, 10000],
[50, 4501, 5000]
],
dataLabels: {
enabled: false,
borderRadius: 2,
inside: true,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
format: '{point.y}',
//color: 'rgba(0,0,0)'
}
}]
});
});
On this example, the [data] have 3 properties, I believe that I need to have only 2, one for the value and the other for the X axis...
I archieve this result http://jsfiddle.net/mv9vsmnn/, it was not exactly what I needed, but it solved my problem.
$(function() {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: false,
},
xAxis: {
categories: ['Title 1', 'Title 2', 'Title 3', 'Title 4', 'Title 5'],
alternateGridColor: '#F6F9FC',
},
tooltip: {
shared: true,
width: 20,
formatter: function() {
var retorno = '<strong>Prices</strong>';
$.each(this.points, function(i, point) {
if (point.series.name == 'Min' || point.series.name == 'Med' || point.series.name == 'Max') {
retorno += '<br /><span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': ' + numberToReal(point.y);
}
});
return retorno;
}
},
plotOptions: {
columnrange: {
grouping: false,
pointWidth: 70,
minPointLength: 25,
dataLabels: {
inside: true,
enabled: true,
allowOverlap: true,
formatter: function() {
if (this.y == this.point.low) {
return this.point.low;
}
}
}
},
series: {
lineWidth: 0.5
}
},
series: [
// Min
{
name: 'Min',
color: '#C30000',
data: [
[2000, 2001],
[5000, 5001],
[1000, 1001],
[8000, 8001],
[3500, 3501]
],
dataLabels: {
align: 'right',
}
}, {
name: 'Min (Line)',
color: '#C30000',
type: 'spline',
dashStyle: 'shortdot',
data: [
[2000],
[5000],
[1000],
[8000],
[3500]
]
},
// Med
{
name: 'Med',
color: '#215994',
data: [
[3000, 3001],
[6001, 6002],
[3001, 3002],
[9001, 9002],
[4001, 4160]
],
dataLabels: {
align: 'center',
}
}, {
name: 'Med (Line)',
color: '#215994',
type: 'spline',
dashStyle: 'shortdot',
data: [
[3000],
[6001],
[3001],
[9001],
[4001]
]
},
// Max
{
name: 'Max',
color: '#ECEC09',
data: [
[4000, 4001],
[7001, 7002],
[5001, 5002],
[9501, 9502],
[4501, 4502]
],
dataLabels: {
align: 'left',
}
}, {
name: 'Max (Line)',
color: '#ECEC09',
type: 'spline',
dashStyle: 'shortdot',
data: [
[4000],
[7001],
[5001],
[9501],
[4501]
]
}
]
});
});