Reputation: 1346
I am working to create highchart for a marketing team, please check this:
http://jsfiddle.net/jyotipuri/kh5jY/5124/
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
events: {
load: function () {
Highcharts.updateMarketMarkers(this);
},
redraw: function () {
Highcharts.updateMarketMarkers(this);
}
}
},
title: {
text: null
},
xAxis: [
{
categories: ['North','South','East', 'West']
}
],
yAxis: [
{
title: null,
labels: {enabled: false},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
{
title: null,
labels: {enabled: false}
}
],
tooltip: false,
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
},
series: {
point: {
events: {
click: function () {
$scope.drillChart(this.category);
}
}
}
}
},
series: [
{
name: 'Jan',
data: [23, 45, 24, 30],
type: 'column'
},
{
name: 'Feb',
data: [50, 40, 25, 10],
type: 'column'
}
]
});
});
The columns here show sales in various regions, I need to be able to mark out specific point on the columns that will be sales target and it will show is sales met the target. The marking has to be done for both columns (Jan, Feb) for all 4 regions (NORTH, SOUTH, WEST, EAST).
Upvotes: 1
Views: 277
Reputation: 45079
How would you mark out that points? I think you can achieve that in two ways:
low
options (or columnrange
series): http://jsfiddle.net/kh5jY/5132/using scatter just to put marker on such point: http://jsfiddle.net/kh5jY/5133/
{
name: 'South target',
data: [20, 20, 20, 20],
zIndex: 10,
pointPlacement: 0.15,
type: 'scatter'
}, {
name: 'North target',
data: [20, 20, 20, 20],
zIndex: 10,
pointPlacement: -0.15,
type: 'scatter'
}
Upvotes: 3