Drop lines with highcharts - javascript

If I'm using a scatter plot in Highcharts, is there any way to get drop lines? Drop lines are lines that go from the point back the the x-axis like this:

You can do this with a combination column-line chart.
See it in action here:
http://jsfiddle.net/8qvy79gv/
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Jane',
pointWidth: 2,
data: [3, 2.67, 3, 6.33, 3.33]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
});

Related

Highcharts dashed line on x axis not going all the way across

I have this highchart's jsfiddle and I want the dashed line to go all the way across the graph from 0-10.I have tried this out on a different graph called scatter and it works I want it to work on the type column graph. How do I do this? Is there something in the highcharts api that I am missing?
https://jsfiddle.net/arielkotch/n9dk126y/1/
Highcharts.chart('container', {
chart: {
type: 'column',
renderTo:'#container'
},
title: {
text: ''
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
},
plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{
name: 'John',
borderColor: '#0000FF',
color: '#FFFFFF',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
borderColor: '#0000FF',
color: '#0000FF',
data: [2, 2, 3, 2, 1]
},
{
//5-width
//height
data: [
[4, 10],
[0, 10]
],
lineWidth: 2,
dashStyle: "Dash",
lineColor: 'black',
type: 'scatter',
marker: {
enabled: false
},
showInLegend: false,
enableMouseTracking: false
},
{
data: [
[0, 20]
],
lineWidth: 2,
dashStyle: "Dash",
lineColor: 'black',
type: 'scatter',
marker: {
enabled: false
},
showInLegend: false,
enableMouseTracking: false
}
]
});
To create such type of lines, you should use yAxis.plotLines:
yAxis: {
...,
plotLines: [{
value: 10,
zIndex: 2,
width: 2,
dashStyle: "Dash",
color: 'black',
}]
}
Live demo: https://jsfiddle.net/BlackLabel/ujyrz4h1/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines

Control the height of a stacked column chart - Highcharts

I am trying to use this chart here JSFiddle but I want to control the height of the bars with a different number and use the values within the bar to show their percentages
This is chart in case my link doesn't work
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});

Highcharts Combo Graph Overlapping eachother

I want to implement a Combo Graph with
1. Pie Chart
2. Column 'Normal'
3. Spine
Now my problem is that if the column values are big, it overlaps the pie chart which does not make great viewing, I have a sample at JS Fiddle sample
$(function () {
$('#container').highcharts({
chart: {
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
type: 'column',
name: 'Jane',
data: [9, 9, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 9, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [20, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
please give me some hint on how to solve this, one thing that comes to mind is set X range larger then max value of the column but not sure how to do that either.
You can try to set maxPadding: 0.5 or some higher value, see: http://jsfiddle.net/ykgNR/1/
I advice you to use two separate charts.
one for pie and other one for combination of line and column.
is there any compulsion for you to display both combination chart and pie chart in same chart section?

How to set an option in Highchart inactive by default

I have this code here from this page: http://www.highcharts.com/demo/combo
$(function () {
$('#container').highcharts({
chart: {
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
And it produces this statistic here:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/
I would like to be able to set "John" and "Joe" inactive by default. Is there a way to make this? It should be possible to activate them though.
You want to initially draw in an "invisible" state?
{
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0],
visible: false // <-- set visibility to false
},
Fiddle here.

Remove Zero From the HIGHCHART

I have been working on Highcharts just got into one trouble the problem is when there is not any value exist for some data on the chart then it displays 0 on it which looks bad kindly checkout the following jsfiddle the labels on the chart gets populated by the following function but i am not able to put check on it that it should display only those bars whose values are above zero on the chart
http://jsfiddle.net/CzHyC/3/ [KINDLY CHECK THE APPLE section on the chart]
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'blue'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'gray',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [0, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
});
This is the way I have dealt with this situation.
When you are creating your data points, instead of putting a 0, put a null.
So for example your data array will look like:
[null,3,4,7,2] instead of [0,3,4,7,2]
Fiddle

Categories