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/
I am using highcharts for the first time, and I am trying to figure out how to set the Y axis points static.
I have used min=0 and max=140 , and the points on y axis come up as 0,25,50,75,100,125 and 150. Wherein I want it as 0,20,40,60,80,100,140.
Can someone let me know how could I achieve this.
Below is the highchart optins :
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Div1',
width: 600,
height: 400
},
yAxis:{
min: 0, max: 140,
lineColor: '#FF0000',
lineWidth: 1,
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}]
},
series: [{
name: 'Value',
data: YaxisValuesArray
}]
});
});
You can set the tickInterval (http://api.highcharts.com/highstock#yAxis.tickInterval) on the axis
http://jsfiddle.net/blaird/KdHME/
$(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Div1',
width: 600,
height: 400
},
credits: {
enabled: false
},
title: {
text: 'Productivity Report',
x: -20 //center
},
xAxis: {
lineColor: '#FF0000',
categories: [1, 2, 3]
},
yAxis: {
min: 0,
max: 140,
tickInterval: 20,
lineColor: '#FF0000',
lineWidth: 1,
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Value',
data: [
[1, 10],
[2, 20],
[3, 30]
]
}]
});
});
To do this using HighChart in a StockChart mode, I just need to set the property tickPixelInterval.
yAxis: {
...
tickPixelInterval: 35
...
}
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()
I have some problem with IE 7 to show the chart I designed by Highstock.
When I've tried to design the chart and see it on Chrome, it does not have any problem.
Here is the chart which is exactly I want to see.
http://211.47.191.60/temp/Cap_origin_from_chrome
However, when I've tried to see it on IE 7, it shows like this.
http://211.47.191.60/temp/Cap_from_IE7
Here is the javascript source I've designed through using Fiddle.
$(function () {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'areaspline',
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1D'
}, {
type: 'day',
count: 15,
text: '2W'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
}, {
type: 'month',
count: 6,
text: '6M'
}, {
type: 'year',
count: 1,
text: '1Y'
}, {
type: 'all',
text: '전체'
}],
inputStyle: {
color: '#039'
},
labelStyle: {
color: 'silver'
},
selected: 1
},
navigator: {
enabled: false
},
xAxis: {
//categories: ['1회차', '2회차', '3회차', '4회차', '5회차', '6회차', '7회차'], // 동적으로 늘려야 함
showFirstLabel: false,
showLastLabel: true,
tickPixelInterval: 150,
tickColor: 'green',
tickLength: 10,
tickWidth: 2,
tickPosition: 'inside',
//type: 'datetime',
//dateTimeLabelFormats: {
// day: '%Y<br/>%m-%d',
// week: '%Y<br/>%m-%d',
// month: '%Y-%m',
// year: '%Y'
//},
labels: {
rotation: -30,
y: 10
}
},
yAxis: {
tickPixelInterval: 40,
tickColor: 'gray',
tickLength: 10,
tickWidth: 2,
tickPosition: 'inside',
gridLineWidth: 1,
gridLineDashStyle: 'longdash',
minorGridLineColor: '#FFF0F0',
minorGridLineWidth: 1,
minorTickInterval: 'auto',
min: 0,
max: 100,
plotLines: [{
value: 90, // DB 에서 평가 기준 받아와 저장 필요
width: 3,
color: 'red',
dashStyle: 'dash',
label: {
text: '평가기준',
align: 'top',
y: -4,
x: 12
}
}],
title: {
align: 'high',
offset: 0,
text: '종합품질점수',
rotation: 0,
y: -10
},
labels: {
formatter: function () {
return this.value + ' 점';
},
x: -30
}
},
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
scrollbar: {
enabled: true,
minWidth: 5,
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
series: [{
name: '종합품질점수',
data: [{
name: '1회차',
color: 'red', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("!!!!");
}
},
x: Date.UTC(2013, 0, 1),
y: 32
}, {
name: '2회차',
color: 'red', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("####");
}
},
x: Date.UTC(2013, 0, 2),
y: 41
}, {
name: '3회차',
color: 'red', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("####");
}
},
x: Date.UTC(2013, 0, 3),
y: 54
}, {
name: '4회차',
color: 'red', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("$$$$");
}
},
x: Date.UTC(2013, 0, 4),
y: 67
}, {
name: '5회차',
color: 'red', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("%%%%");
}
},
x: Date.UTC(2013, 0, 5),
y: 74
}, {
name: '6회차',
color: 'blue', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("^^^^");
}
},
x: Date.UTC(2013, 0, 6),
y: 85
}, {
name: '7회차',
color: 'blue', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("&&&&");
}
},
x: Date.UTC(2013, 0, 7),
y: 91
}],
type: 'area',
pointStart: Date.UTC(2013, 0, 1),
pointInterval: 24 * 3600 * 1000,
showInLegend: true,
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
}
}]
});
});
There is some Korean character, please do not mind about it.
Can anyone help me to solve this problem?
It looks like bug with plotLines in Highcharts, reported: https://github.com/highslide-software/highcharts.com/issues/1478
Possible workaround is to add plotLine in callback, see example: http://jsfiddle.net/f9aTL/12/ (still not perfect solution)
Callback:
function (chart) {
chart.yAxis[0].addPlotLine({
value: 90, // DB 에서 평가 기준 받아와 저장 필요
width: 3,
color: 'red',
dashStyle: 'Dash',
label: {
text: '평가기준',
align: 'top',
y: -4,
x: 12
}
});
});