I have two series, to display both I created two xAxis and two yAxis. I need to show gridlines for both x and yaxis gridlines. But I found that xAxis grid lines are extended to second axis. Here is my code:
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
yAxis: [{
gridLineWidth: 2,
height: '90%'
}, {
top: '100%',
height: 45,
gridLineWidth: 2
}],
xAxis: [{
gridLineWidth: 2
},{
top: '100%',
height: 45,
gridLineWidth: 2
}],
series: [{
name: 'USD to EUR',
data: usdeur
},
{
name: 'USD to EUR',
data: usdeur,
xAxis: 1,
yAxis : 1,
}]
});
Here is a jsFiddle:
https://jsfiddle.net/Subhabrata/85sztqw6/6/
Here is my intention:
Related
I would like to emphasise the difference between 2 different series in the same graphic : one coming from the user data and one from static data as following :
I wanted to define the pointPadding value, but this is available for all the series. How can I set this value only for a specific serie ?
The simplest solution seems to be adding a second x-axis and separate series. For example:
series: [{
...,
groupPadding: 0.325,
id: 'id1'
}, {
...,
groupPadding: 0.325,
id: 'id2'
}, {
...,
xAxis: 1,
linkedTo: 'id1'
}, {
...,
xAxis: 1,
linkedTo: 'id2'
}],
xAxis: [{
width: '20%',
type: 'category',
tickWidth: 1
}, {
offset: 0,
width: '80%',
left: '20%',
type: 'category',
tickWidth: 1
}]
Live demo: http://jsfiddle.net/BlackLabel/rwg6tL2v/
API Reference: https://api.highcharts.com/highcharts/xAxis
Is there a way to make 'xrange' type to render data with an absolute precision that would look like the 'column' type? I would use 'column', but it only uses one 'x' value and I need start and end time for each bar.
I need the bar to stretch over the yAxis from 0 to the y value.
Each bar uses padding and goes beyond the max value in this example:
https://jsfiddle.net/w5mhfp1x/1/
Highcharts.chart('container', {
chart: {
type: 'xrange',
styledMode: true
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime',
tickInterval: 1800000,
dateTimeLabelFormats: {
day: '%H:%M'
},
},
time: {
useUTC: false
},
series: [{
name: 'Project 1',
pointPadding: 0,
groupPadding: 0,
borderRadius: 1,
data: data,
}]
});
I think this version is precise, but I need the bar to stretch all the way to the 0:
https://jsfiddle.net/w5mhfp1x/2/
series: [{
name: 'Project 1',
pointPadding: 0,
groupPadding: 0,
borderRadius: 1,
pointWidth: 1,
data: data,
}]
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.
Here is my following chart config. I have been doing some research but couldn't find any help to enabling vertical scrollbar.
I know that I can set overflow-y property for chart container div, but to achieve frozen X-axis I need vertical scroll on series that is not container.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
minorTickLength: 0,
tickLength: 0,
lineWidth: 0,
tickwidth: 0,
},
yAxis: {
max: 100,
tickInterval: 25,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
},{
name: 'Q2',
data: [20, 0,50,0]
},{
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});
});
Can anybody suggest me how to enable the vertical scrollbar in Highcharts?
#Swetha: That fiddle is using Highstock library. Highcharts does not support scrollbars. Scrollbars are Highstock only
http://www.highcharts.com/docs/chart-concepts/scrollbar
You could set a fixed height or width to the chart and wrap into a div width overflow-x:auto, it's not the same but it is something at least.
Try this fiddle: http://jsfiddle.net/fj6d2/3076/
This may help you.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type:'bar',
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
min:2,
},
yAxis: {
title: {
text: 'Total fruit consumption'
},
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
}, {
name: 'Q2',
data: [20, 0,50,0]
}, {
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});
In this example JS Fiddle.
The Line appear behind the chart.
Is it possible to draw the line in front of the chart?
Thank you for your help?
The code:
(function() {
$('#container').highcharts('StockChart', {
chart: {
},
yAxis: {
plotLines: [{
value: 0.696,
width: 5,
color: 'green',
dashStyle: 'dash',
label: {
text: 'Latest value',
align: 'right',
y: 12,
x: 0
}
}]
},
rangeSelector: {
selected: 1
},
series: [{
type: 'area',
name: 'USD to EUR',
data: usdeur
}]
});
});
Try using plotLine zIndex property.
http://api.highcharts.com/highstock#xAxis.plotLines.zIndex