Gridline only on 0 in column range - highcharts

I am using the highcharts column range and would like to have the gridline only on 0. Is it possible?
yAxis: {
gridLineColor: '#197F07',
gridLineWidth: 0,
title: {
text: '%'
}
},


You can have this result by using yAxis.plotLine API doc
yAxis: {
gridLineWidth: 0,
plotLines: [{
color: '#AAAAAA',
width: 1,
value: 0
}]
},
Fiddle

Related

Highcharts - Combine y axes

Is there a way to combine different y axes into one?
I have 23 data sets that I want to display on the same line graph and I want it to only have one y axis, despite the fact that the different lines' values highly differ (for example, points in one line can fluctuate around 50 000 and in another line around 5 or 6).
What I am looking for is this:

You can mock multiple y axes to be shown as one. One main axis should have line and ticks, the other should not - you can set that with tickWidth, tickLength and lineWidth options (for each axis separately).
Then you need to set vertical position of the axes by setting their offset to 0. You also need adjust their min, max and tickPositions to fit the data.
Example of the axes config:
yAxis: [{ // Primary yAxis
min: 4.5,
max: 27.5,
tickPositions: [7, 25],
startOnTick: false,
endOnTick: false,
gridLineWidth: 0,
offset: 0,
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: null
},
}, { // Secondary yAxis
gridLineWidth: 0,
offset: 0,
title: {
text: null
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
lineWidth: 1,
tickLength: 10,
tickWidth: 1,
tickPositions: [49.9, 220]
}, { // Tertiary yAxis
gridLineWidth: 0,
endOnTick: false,
startOnTick: false,
min: 1009,
max: 1018.5,
tickPositions: [1009.5, 1018],
offset: 0,
title: {
text: null
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
example: http://jsfiddle.net/w7z1p8qy/

How to High Chart plotLine Priority Change

I'm using a high chart.
I want to change the plotLine like this.
Help me.
yAxis: {
min: 0,
max: 100,
title: {
text: '비율(%)',
align: 'middle'
},
plotLines: [{
color: '#FF0000',
width: 5,
value: 80
}],
},

Highcharts Polar Plot area scaling issues

I created a graph with Highcharts polar type. The boundaries of chart are overflowing. Can anyone please help me in fixing the graph.
Please find my problem on JSFiddle:
JSFiddle
Code:
$(function () {
$('#container').highcharts({
chart: {
polar: true,
showAxes: false
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 10,
lineColor: "#000000",
gridLineWidth: 5,
gridLineColor: "#000000"
},
yAxis: {
offset: 120,
tickmarkPlacement: 'on',
min: 0,
max: 4,
visible: false,
endOnTick: false
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
},
line: {
color: "#ff0000",
lineWidth: 10
}
},
series: [{
type: 'line',
name: 'Line2',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}]
});
});
This produces axis outside plot area. I would like to increase plot area so as to see the meeting point of extremist end points.

The reason the Plot is overflowing is because you have set a Maximum Value for the yAxis of 4 but in your data you have values that are greater than 4, like 8,7,6 and 5.
Just remove the max: 4 option from the yAxis Object and your Chart will display fine.

Highcharts multiple series and axes types overlapping

I have a problem with a highcharts graph, regarding overlapping of multiple axes.
There are 2 types of series, one type column and one type line. I want the line type to be always above the others and never intersect them.
You may see my problem here:
http://jsfiddle.net/99tC7/
Anticipated thank you for any help provided.
$('#container').highcharts({
title: {
text: 'Title',
x: -20 //center
},
xAxis: {
categories: [ "5.11.13", "6.11.13", "7.11.13", "8.11.13", "9.11.13"],
labels: {
rotation: 270
}
},
yAxis: [{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 1"
},
},
{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 2"
},
opposite: true,
max:50,
minPadding:5,
}],
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y +'%';
}
}
},
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y;
}
}
}
},
series: [{
name: 'L1',
type: 'column',
color: '#FF0000',
yAxis: 0,
data: [1, 5, 9, 10, 12]
},
{
name: 'L2',
type: 'column',
color: '#00FF00',
yAxis: 0,
data: [16, 16, 106, 12, 11]
},
{
name: 'L3',
yAxis: 1,
data: [38, 24, 37, 29, 37]
}
]
});

You can try to set correct min/max values in both yAxis like here http://jsfiddle.net/99tC7/1/

Dates instead of values on Highchart labels in graph with multiple axis

I've created a line and a bar graph that share the xAxis. But for some reason it chooses to display the value instead of date, even though I am supplying it the standard way.
What am I missing here?
Fiddle: http://jsfiddle.net/ZfP84/
$(function () {
var options = {
chart: {
renderTo: 'container',
},
navigator:{
enabled:true
},
scrollbar: {
enabled:true
},
rangeSelector: {
enabled: true,
//selected: 1
},
xAxis: {
gridLineWidth: 1,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: [
{
height: 150,
lineWidth: 2,
offset: 0,
title: {
text: 'Price',
}
},
{
top: 225,
//lineWidth: 0,
//min: 0,
//max: 5,
gridLineWidth: 0,
offset: 0,
height: 100,
title: {
text: 'Volume',
}
},
],
series: [
{
yAxis: 0,
name: 'Price by time',
stack: 0,
//data: [1, 12, 32, 43],
data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
tooltip: {
valueDecimals: 2
},
},
{
name: 'Volume by time',
yAxis: 1,
stack: 0,
data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
tooltip: {
valueDecimals: 2
},
lineWidth: 3,
marker: {
enabled: false
},
type: 'column',
},
]
};
var chart = new Highcharts.Chart(options);
});

If you added the the "type" to the xAxis definition then the x values will be interpreted as dates and times rather than decimal values
xAxis: {
type : "datetime", //add this line
gridLineWidth: 1,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
you may have to fiddle with the start times and intervals to get HighChart to correctly interpret your x-values.
see this demo on the highchart website as an example. http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-time-series/

The reason is that you are not actually creating a Stock chart. Your code looks like:
var chart = new Highcharts.Chart(options);
If you want it to be a Stock chart do:
var chart = new Highcharts.StockChart(options);
A Chart by default is a category chart. StockChart is time-based.

You can use dateFormat to replace time in miliseconds with date.
http://jsfiddle.net/3bE4X/
formatter:function(){
return Highcharts.dateFormat('%d / %m / %Y',this.value);
}
http://api.highcharts.com/highcharts#Highcharts.dateFormat()

Resources