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:
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'm trying to create a Highchart Area range and Line but can't get it to work and i don't know why. Could anyone please help with what i'm doing wrong?
The range should be the same for every point so that i can see which points is out of range.
JSFiddle: https://jsfiddle.net/ew5e1fmy/12/
$(function () {
var ranges = [
[1469904515000,3.5,8],
[1469913442000,3.5,8],
[1469926631000,3.5,8],
[1469948933000,3.5,8],
[1469948992000,3.5,8],
[1469955600000,3.5,8],
[1469960654000,3.5,8],
[1469968200000,3.5,8],
[1469971155000,3.5,8],
[1469981536000,3.5,8],
[1469991978000,3.5,8],
[1469998800000,3.5,8],
[1470013200000,3.5,8],
[1470032477000,3.5,8],
[1470041051000,3.5,8],
[1470046907000,3.5,8]
],
var values = [
[1469904515000,7.4],
[1469913442000,13.8],
[1469926631000,6.2],
[1469948933000,8.6],
[1469948992000,8.6],
[1469955600000,7.9],
[1469960654000,4.1],
[1469968200000,10.1],
[1469971155000,10.1],
[1469981536000,6.1],
[1469991978000,10.2],
[1469998800000,13.2],
[1470013200000,14.3],
[1470032477000,6],
[1470041051000,13.4],
[1470046907000,4]
];
$('#container').highcharts({
xAxis: {
title: {text: 'Dates',align: 'high'},
type: "datetime",
allowDecimals: true,
},
yAxis: {min: 0,
allowDecimals: true,
title: {text: '',align: 'high'},
labels: {overflow: 'justify'} ,
labels:{enabled: true},
},
plotOptions: {
line: {dataLabels: {enabled: false, style: {fontSize: '8px'}, allowDecimals: true}}
},
credits: { enabled: false },
series: [{
zIndex: 1,
lineWidth: 1,
name: 'BG',
allowDecimals:true,
data: ranges },
{
name: 'Range',
data: values,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0 }]
});
});
I think you accidentally linked the values to the wrong serie (range serie is filled with values array while the values serie is filled with the ranges array)
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]
}]
});
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
}]
});
I am having a problem with Highstock. I have a multi-pane chart (multiple charts stacked on top of each other). When I specify a min and max value for the y-axis, if any value in the series is less than the min value, it will extend below the chart, usually extending into the chart below. For some reason, the same is not true for when a data point is above the max value. I can't tell if this is a bug in Highstock or just something I am doing wrong.
I understand that this is an unusual use case for Highstock, but it is necessary for the application I am developing. The only example I can find for multi-pane charts with Highstock is on their demo page at http://www.highcharts.com/stock/demo/candlestick-and-volume, but that is a different situation.
Please see my example: http://jsfiddle.net/afoster777/UJaJG/
Here is my configuration:
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false,
plotOptions: {
shadow: false,
series: {
connectNulls: false
},
plotBorderColor: "#CCCCCC",
plotBorderWidth: 2,
plotBackgroundColor: "#FFFFFF"
}
},
navigator: {
enabled: false
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime',
ordinal: false
},
yAxis: [{
title: {
text: "Y"
},
min: 0.8,
max: 0.9,
labels: {
align: 'right',
x: -6,
y: 3
},
lineWidth: 1,
height: 250,
offset: 0,
startOnTick: false,
endOnTick: false
}, {
title: {
text: "Y"
},
min: 0.8,
max: 0.9,
labels: {
align: 'right',
x: -6,
y: 3
},
lineWidth: 1,
top: 320,
height: 250,
offset: 0,
startOnTick: false,
endOnTick: false
}],
series: [{
type: 'line',
id: 0,
name: 'Series1',
yAxis: 0,
data: series1data,
marker: {
enabled: false
},
tooltip: {
valueDecimals: 2
},
gapSize: 2,
connectNulls: false
}, {
type: 'line',
id: 1,
name: 'Series2',
yAxis: 1,
data: series2data,
marker: {
enabled: false
},
tooltip: {
valueDecimals: 2
},
gapSize: 2,
connectNulls: false
}]
});
I would appreciate any suggestions.
Edit: Apparently there is an open issue about this already (Issue# 1387). Does anyone have any ideas for a workaround?
Apparently github user sappling has made a fix for this problem and submitted a pull request. I included sappling's version of Highstock <script src="http://raw.github.com/sappling/highcharts.com/clip/js/highstock.src.js"></script> instead of the vanilla one, and the problem seems to be fixed. http://jsfiddle.net/afoster777/jEZ9w/