i have requirement to create chart like shown in image.. i was thinking of using bar chart.. but that always starts with zero.
can some one point me into proper direction..
thanks
Code: Select all
function(chart) {
var series = chart.series[2],
xAxis = chart.xAxis[0],
dataLabel = series.data[2].dataLabel,
triangleSize,
triangleX,
triangleY,
triangle,
lineX,
lineY,
lineHeight,
line;
triangleSize = 8;
triangleX = dataLabel.x + chart.plotLeft + dataLabel.width / 2 - triangleSize;
triangleY = dataLabel.y + chart.plotTop - 5;
lineX = xAxis.toPixels(series.data[1].x2 - series.data[1].x);
lineY = series.data[2].shapeArgs.y + chart.plotTop;
lineHeight = series.itemHeight;
triangle = this.renderer.path([
'M',
triangleX,
triangleY,
triangleX + triangleSize,
triangleY + triangleSize,
triangleX + 2 * triangleSize,
triangleY,
'z'])
.attr({
fill: 'red'
})
.add();
line = this.renderer.path(['M', lineX, lineY, 'v', lineHeight]).attr({
stroke: '#000',
'stroke-width': '1px'
}).add();
line.toFront();
triangle.toFront();
});
Code: Select all
var series = chart.series[2],
labelX = series.data[1].x,
labelX2 = series.data[1].x2,
xLabelPosition = labelX + (labelX2 - labelX) / 2,
labelXPixels = xAxis.toPixels(xLabelPosition),
labelOffset = lineX - labelXPixels;
series.update({
dataLabels: {
enabled: true,
y: -15,
x: labelOffset,
formatter: function() {
return this.x2 - this.x;
}
}
});
Code: Select all
var series = chart.series[2],
lineX = xAxis.toPixels(series.data[1].x2 - series.data[1].x),
lineY = series.data[2].shapeArgs.y + chart.plotTop,
labelX = series.data[1].x,
labelX2 = series.data[1].x2;
var text = this.renderer.text(labelX2 - labelX, lineX - 7, lineY - 2).css({
'font-weight': 'bold',
'font-size': '11px'
}).add();
Code: Select all
.rd-bullet .highcharts-color-0{
fill:$score-positive;
}
/* yellow */
.rd-bullet .highcharts-color-1{
fill:$score-less-negative;
}
/* red color */
.rd-bullet .highcharts-color-2{
fill:$score-negative;
}
Code: Select all
<script src="https://code.highcharts.com/js/highcharts.js"></script>
Code: Select all
<script src="https://code.highcharts.com/highcharts.js"></script>