I use highcharts to create a multi-axis chart. I know this does not make sense since there is no comparison between the data. But still I have to do it.
So now I want the orange line to go through the bars. I do not want him to go through all the bars. Instead, I want the orange line to be on each bar from top to bottom. Therefore, I want this orange line to go only along the top of abc, qwe and xyz individually and end below. So basically I want to have multiple lines on the same x axis. I do not want the same line to go through all the bars. But each of them has its own vertical line, which starts only from the top edge of the bar and ends at the bottom edge of the panel.
How can i do this. Any help would be appreciated. Here is my code below. Check the script .
(function(H) {
var seriesTypes = H.seriesTypes;
seriesTypes.fakeLine = Highcharts.extendClass(seriesTypes.line);
seriesTypes.fakeLine.prototype.translate = function() {
var s = this;
seriesTypes.line.prototype.translate.call(s);
H.each(s.points, function(point) {
point.plotY = s.chart.plotWidth / 2;
});
}
})(Highcharts)
$('#container').highcharts({
chart: {
inverted: true,
plotBorderWidth: 2
},
title: {
text: ''
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
xAxis: [{
categories: ['ABC', 'QWE', 'XYZ']
}],
yAxis: [{ // Primary yAxis
title: {
text: ''
},
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
}, { // Secondary yAxis
title: {
text: ''
},
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
}, { // 3rd yAxis
title: {
text: ''
},
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
}, { // 4th yAxis
title: {
text: 'AVERAGE FOR SIMILAR CHANNELS'
},
plotLines: [{
color: 'orange',
width: 2,
value: 100000,
dashStyle: 'longdashdot'
}],
gridLineWidth: 0,
minorGridLineWidth: 0,
opposite: false,
labels: {
enabled: false
},
marker: {
enabled: false
}
}],
plotOptions: {
series: {
color: '#09B5A1',
pointWidth: 40,
marker: {
enabled: false
},
groupPadding: 0.1,
pointPadding: 0
},
column: {
//grouping:false,
stacking: 'normal',
pointPadding: 0
},
labels: {
enabled: false
},
},
tooltip: {
shared: false
},
series: [{
name: 'Views',
type: 'column',
yAxis: 1,
data: [1000, 0, 0],
stack: '',
marker: {
enabled: false
},
tooltip: {
formatter: function () {
return ' ' +
point.name + ":" + this.point.y + '<br />'
}
},
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0, // 10 pixels down from the top
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
},
marker: {
enabled: false
},
labels: {
enabled: false
},
formatter: function () {
if (this.y > 0) {
return this.y;
}
}
}
}, {
name: 'Videos',
type: 'column',
yAxis: 2,
color: '#3eb5dd',
data: [0, 10000, 0],
stack: '',
marker: {
enabled: false
},
tooltip: {
formatter: function () {
return ' ' +
point.name + ":" + this.point.y + '<br />'
}
},
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0, // 10 pixels down from the top
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function () { //use this
if (this.y != 0) {
return this.y;
}
}
}
}, {
name: 'Subscribers',
type: 'column',
yAxis: 3,
color: '#32935f',
data: [0, 0, 20000],
stack: '',
tooltip: {
formatter: function () {
return ' ' + this.point.name + ":" + this.point.y + '<br />'
}
},
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0, // 10 pixels down from the top
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function () {
if (this.y != 0) {
return this.y;
}
}
}
}, {
name: 'Average',
type: 'fakeLine',
color: 'orange',
dashStyle: 'longdash',
data: [2000, 3000, 4000],
stack: '',
tooltip: {
formatter: function () {
return ' ' + this.point.name + ":" + this.point.y + '<br />'
}
},
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0, // 10 pixels down from the top
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function () {
if (this.y != 0) {
return this.y;
}
}
}
}]
});
thanks
Update:
Want to hide the values ββ0 from the bottom of the series in the dotted line tooltip. Check the code:
(function (H) {
var seriesTypes = H.seriesTypes;
seriesTypes.avgLine = Highcharts.extendClass(seriesTypes.line);
seriesTypes.avgLine.prototype.translate = function () {
var s = this;
seriesTypes.line.prototype.translate.call(s);
H.each(s.points, function (point) {
point.plotY = s.chart.plotWidth / 2;
});
}
})(Highcharts)
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
var initializeBarChart = function() {
$('#container').highcharts({
chart: {
inverted: true,
plotBorderWidth: 0,
events: {
load: function (event) {
$(window).resize();
hideAllData();
}
}
},
title: {
text: 'AVERAGE FOR SIMILAR CHANNELS',
style: {
fontSize: '12px',
fontWeight:'bold',
fontFamily: 'sans-serif',
color: 'orange',
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
xAxis:[{
categories: ['VIEWS', 'VIDEOS', 'SUBSCRIBERS'],
min: 0,
max: 2,
}],
yAxis: [{
title: {
text: ''
},
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
}, {
title: {
text: ''
},
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
}, {
title: {
text: ''
},
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
}, {
title: {
text: ''
},
gridLineWidth: 0,
minorGridLineWidth: 0,
opposite: false,
labels: {
enabled: false
},
marker: {
enabled: false
}
}],
plotOptions: {
series: {
color: '#09B5A1',
pointWidth: 30,
marker: {
enabled: false
},
groupPadding: 0.1,
pointPadding: 0
},
column: {
stacking: 'normal',
pointPadding: 0
},
labels: {
enabled: false
},
dataLabels: {
textShadow: false
}
},
tooltip: {
shared: false
},
series: [{
name: 'Views',
type: 'column',
yAxis: 1,
data: [parseInt(numViews), 0, 0],
stack: '',
marker: {
enabled: false
},
tooltip: {
formatter: function () {
return ' ' +
point.name + ":" + this.point.y + '<br />'
}
},
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0,
style: {
fontSize: '12px',
fontFamily: 'sans-serif'
},
marker: {
enabled: false
},
labels: {
enabled: false
},
formatter: function () {
if (this.y > 0) {
return Highcharts.numberFormat(this.y, 0);
}
}
}
}, {
name: 'Videos',
type: 'column',
yAxis: 2,
color: '#3eb5dd',
data: [0, parseInt(numVideos), 0],
stack: '',
marker: {
enabled: false
},
tooltip: {
formatter: function () {
return ' ' +
point.name + ":" + this.point.y + '<br />'
}
},
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0,
style: {
fontSize: '12px',
fontFamily: 'sans-serif'
},
formatter: function () {
if (this.y != 0) {
return Highcharts.numberFormat(this.y, 0);
}
}
}
}, {
name: 'Subscribers',
type: 'column',
yAxis: 3,
color: '#32935f',
data: [0, 0, parseInt(numSubs)],
stack: '',
tooltip: {
formatter: function () {
return ' ' + this.point.name + ":" + this.point.y + '<br />'
}
},
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0,
style: {
fontSize: '12px',
fontFamily: 'sans-serif'
},
formatter: function () {
if (this.y != 0) {
return Highcharts.numberFormat(this.y, 0);
}
}
}
},{
name: 'Average',
type: 'avgLine',
color: 'orange',
dashStyle: 'shortdash',
data:[{
x: -0.26,
name: 'Views',
y: parseInt(avg_views)
},{
x: 0.2,
name: 'Views',
y: 0
}],
stack: '',
tooltip: {
formatter: function() {
if(this.point.y > 0)
return ' ' + this.point.name + ":" + this.point.y + '<br />'
else
return false
}
},
dataLabels: {
enabled: true,
rotation: 0,
color: 'orange',
align: 'right',
x: -100,
y: 50,
style: {
fontSize: '12px',
fontFamily: 'sans-serif'
},
formatter: function () {
if (this.y != 0) {
return Highcharts.numberFormat(this.y, 0);
}
}
}
}, {
name: 'Average',
type: 'avgLine',
color: 'orange',
dashStyle: 'shortdash',
data: [{
name: 'Videos',
x: 0.73,
y: parseInt(avg_videos)
}, {
name: 'Videos',
x: 1.2,
y: 0
}],
stack: '',
tooltip: {
formatter: function() {
return ' ' + this.point.name + ":" + this.point.y + '<br />'
}
},
dataLabels: {
enabled: true,
rotation: 0,
color: 'orange',
align: 'right',
x: -60,
y: 50,
style: {
fontSize: '12px',
fontFamily: 'sans-serif'
},
formatter: function () {
if (this.y != 0) {
return Highcharts.numberFormat(this.y, 0);
}
}
}
}, {
name: 'Average',
type: 'avgLine',
color: 'orange',
dashStyle: 'shortdash',
data: [{
name: 'Subscribers',
x: 1.75,
y: parseInt(avg_subs)
}, {
name: 'Subscribers',
x: 2.2,
y: 0
}],
stack: '',
tooltip: {
formatter: function() {
return ' ' + this.point.name + ":" + this.point.y + '<br />'
}
},
dataLabels: {
enabled: true,
rotation: 0,
color: 'orange',
align: 'right',
x: -100,
y: 48,
style: {
fontSize: '12px',
fontFamily: 'sans-serif'
},
formatter: function () {
if (this.y != 0) {
return Highcharts.numberFormat(this.y, 0);
}
}
}
}
]
});
}
if , , 0, false. .
tooltip: {
formatter: function() {
if(this.point.y == 0)
return false
else
return ' ' + this.point.name + ":" + this.point.y + '<br />'
}
}