I would like to seek solution for the combination of Spline with Column Highstock Chart. Below is the code that I had written:
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
xAxis: {
minTickInterval: 24 * 3600 * 1000,
ordinal: false
},
yAxis: [{ // Primary yAxis
title: {
text: 'Total Count'
},
height: 150,
lineWidth: 2
}, { // Secondary yAxis
title: {
text: 'Member Count'
},
height: 150,
opposite: true,
lineWidth: 2
}],
series: [{
type: 'column',
name: 'Bet Count',
data: bc,
dataGrouping: {
enabled: false
}
}, {
type: 'spline',
name: 'Bet Member Count',
data: bmc,
yAxis: 1
}]
});
Related
I am looking for the desired output like so:
series.dataLabels.align: left/right` isn't cutting it. It only makes it appear just after the blue rectangle of each bar and not on the far right, which is not what I want. I have also looked at the highcharts api a little bit and I was not able to find a chart option that gets the job done. Thanks in advance.
My current chart options:
var options = {
chart: {
renderTo: 'container',
type: 'bar',
},
credits: {
enabled: false
},
colors: ['#024a7a'],
title:{
text:null
},
plotOptions: {
bar: {
animation: false
},
series: {
showInLegend: false,
states: {
hover: {
enabled:false
}
}
}
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['SAC 1', 'SAC 2', 'SAC 3'],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
}],
yAxis: [{
gridLineWidth: 0,
labels: {
enabled: false
},
minorGridLineWidth: 0,
title: {
text: null
}
}],
series: [{
data: [10, 5, 15],
dataLabels: {
align: 'left',
enabled: true
}
}]
};
var chart = new Highcharts.Chart(options);
});
One of the ways to achieve that effect is passing specific xAxis and yAxis configuration objects, which contains few parameters:
xAxis: [{
opposite: true,
type: 'category',
labels: {
formatter: function() {
return this.chart.series[0].processedYData[this.pos] + ' %'
},
},
lineWidth: 0,
minorTickWidth: 1,
tickWidth: 0
},
yAxis: {
title: {
enabled: false
},
labels: {
enabled: false
},
gridLineWidth: 0,
max: 100
},
Configuration above fills labels by the series data values, so you should prepare series array similar like below:
series: [{
data: [31, 15, 9, 5]
}],
Lets look for this JSFiddle:
http://jsfiddle.net/daniel_s/yp9h6b7m/
Best regards!
I am having some difficulty getting pointRange to work for a HighStock combination chart I've written.
You can see the issue here, the bars should be 28 days wide but they are not. I can get this code to work on a non-HighStock chart but something is preventing it from working in HighStock and I've been unable to figure it out.
http://jsfiddle.net/3fnfy434/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
height: 450
},
credits: {
enabled: false
},
rangeSelector : {
inputEnabled: false,
selected : 2,
buttons: [{
type: 'month',
count: 3,
text: '3m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
labelStyle: {
color: '#40C6CE',
fontWeight: 'bold'
}
},
title : {
text : 'test'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
allowDecimals: false,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#25408F'
}
},
title: {
text: 't',
style: {
color: '#25408F'
}
}
}],
navigator: {
baseSeries: 1
},
series : [{
name: 's1',
data: d1,
type: 'column',
visible: true,
pointRange: 28 * 24 * 3600 * 1000,
tooltip: {
valueDecimals: 0,
valueSuffix: ''
}
},
{
name : 's2',
data : d2,
color: '#25408F',
dataGrouping: {
enabled: false
},
pointRange: 24 * 3600 * 1000,
tooltip: {
valueDecimals: 1,
valueSuffix: ''
}
}]
});
Any help greatly appreciated.
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]
}]
});
http://jsfiddle.net/gabrielesandoval/efHq7/
Is there a way to fill in the gap between the y-axis and the first point. The first point on my chart should be "25 years" and i would like the area between 0 and 25 to be filled in as well. Even if the tooltip doesn't work for that point, I would just like to visually show that the values between 0 and the first point.
I tried adding a point with a x value of zero but that didnt work. The only area charts I have seen where there is no gap between the two axis and the area are examples where the chart is inverted. Is there a proper way to do this?
Current Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Monthly Comparison'
},
subtitle: {
text: '1 vs 2'
},
xAxis: {
min: 0,
categories: [0, '25 years', '30 years', '35 years', '40 years', '45 years']
},
yAxis: {
labels: {
formatter: function() {
return '$' + this.value;
}
},
min: 0,
title: {
text: 'Cost'
}
},
tooltip: {
shared: true,
valuePrefix: '$'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'series1',
data: [['',60],['25 years',60], ['30 years',60], ['35 years',60], ['40 years',60], ['45 years',60]]
}, {
type: 'area',
name: 'series2',
data: [['',90], ['25 years',100], ['30 years',175], ['35 years',300], ['40 years',400], ['45 years',400]]
}]
});
});
You should set minPadding/maxPadding as 0, but these parameters doesn't work with categories. So you need to use numeric xAxis, instead of categories.
How to create a chart like this using HighCharts?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Value', 'Blend', 'Growth'],
title: {text: 'Valuation', enabled: true},
min: 0, // run this 0,1,2 to match our categories
max: 2,
gridLineWidth: 1
},
yAxis: {
categories: ['Small', 'Medium', 'Large'],
startOnTick: false,
endOnTick: false,
title: {text: 'Market Cap', enabled: true},
min: 0,
max: 2
},
series: [{
name: 'US Dow etc',
data: [[1,2]],
type: 'scatter'
}]
});
Produces: