JavaScript
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
};
Highcharts.setOptions({
chart: {
type: 'column',
inverted: false,
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: ''
},
xAxis: {
tickLength: 0,
lineColor: '#999',
lineWidth: 1,
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: {
min: 0,
minPadding: 0,
maxPadding: 0,
tickColor: '#ccc',
tickWidth: 1,
tickLength: 3,
gridLineWidth: 0,
endOnTick: true,
title: {
text: ''
},
labels: {
y: 10,
style: {
fontSize: '8px'
},
formatter: function() {
if (this.isLast) {
return this.value + ' %';
} else {
return this.value;
}
}
}
},
tooltip: {
enabled: true,
backgroundColor: 'rgba(255, 255, 255, .85)',
borderWidth: 0,
shadow: true,
style: {
fontSize: '10px',
padding: 2
},
formatter: function() {
return this.series.name + ": <strong>" + Highcharts.numberFormat(this.y, 2) + "</strong>";
}
},
plotOptions: {
column: {
color: '#000',
shadow: false,
borderWidth: 0,
},
scatter: {
marker: {
symbol: 'line',
lineWidth: 3,
radius: 8,
lineColor: '#000'
}
}
}
});
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1'
},
xAxis: {
categories: ['Title 1', 'Title 2', 'Title 3', 'Title 4', 'Title 5'],
plotBands: [{
from: -0.3,
to: 0.3,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0.0, 'rgba(204,204,204,.35)'],
[0.15, 'rgba(204,204,204,.35)'],
[0.15,...