Highcharts.chart('container', {
chart: {
height: 'some height',
},
title: {
text: ""
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [], // data
xAxis: {
title: {
enabled: false
},
lineWidth: 1,
lineColor: 'white',
tickAmount: 5,
min: 100000000,
max: 1000000000000,
tickPixelInterval: 100,
tickPositions: [1000000000, 10000000000, 100000000000, 1000000000000]
},
yAxis: {
height: '100%',
title: {
enabled: true,
text: 'Investment'
},
tickAmount: 10
}
})
The above code produces something like this
The labels on the xAxis are overlapping as the range is quite high(Ranging from 100 million to 1 trillion).
On reading highcharts API doc, I found that the method tickPositions overwrites the values in tickPixelInterval & tickInterval. That's why I'm not able to specify custom tickInterval value.
What I want is, to keep equal spacing between each of the mentioned tickPositions. It'll be fine if the bubbles overlap.
Related
I have a chart with two y-Axis. One to the left of the chart another one to the right.
The labels on the right y-Axis appear inside the chart. When I align the labels to the right the labels still overlap the y-Axis in some cases. When I add a distance x: 30, the distance becomes bigger but the labels are not fully shown anymore as they are outside the chart.
I want the labels to have a similar distance to the y-Axis as for the left y-Axis and still shown inside the chart "area".
Here a jsfiddle: https://jsfiddle.net/smaica/zrn87q0b/32/
And my chart options:
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {
Highcharts.stockChart('container', {
title: {
text: undefined,
},
series: [
{
data: [
[1279324800000,0.1],
[1279411200000,0.2],
[1279497600000,0.3],
[1279584000000,0.4],
[1279670400000,0.5],
[1279756800000,0.6],
[1279843200000,0.7],
[1279929600000,0.8],
[1280016000000,0.7],
[1280102400000,0.6],
[1280188800000,0.5],
[1280275200000,0.4],
[1280361600000,0.3],
[1280448000000,0.2],
[1280534400000,0.1]
],
name: "series1",
yAxis: 0
},
{
data: [
[1279324800000,0.8],
[1279411200000,0.7],
[1279497600000,0.6],
[1279584000000,0.5],
[1279670400000,0.4],
[1279756800000,0.3],
[1279843200000,0.2],
[1279929600000,0.1],
[1280016000000,0.2],
[1280102400000,0.3],
[1280188800000,0.4],
[1280275200000,0.5],
[1280361600000,0.6],
[1280448000000,0.7],
[1280534400000,0.8]
],
name: "series2",
yAxis: 1
}
],
plotOptions: {
series: {
dataGrouping:{
enabled: false
},
lineWidth: 1.5,
fillOpacity: 0.5,
}
},
chart: {
borderWidth: 0,
plotShadow: false,
plotBorderWidth: 0,
alignTicks: true,
zooming: {
type: 'x',
},
},
accessibility: {
enabled: false
},
yAxis: [{
lineWidth: 0.1,
tickWidth: 0.1,
opposite: true,
visible: true,
type: 'linear',
alignTicks: true,
labels: {
align:'right',
},
},
{
lineWidth: 0.1,
tickWidth: 0.1,
alignTicks: true,
opposite: false,
type: 'logarithmic',
gridLineColor: 'transparent',
visible: true
}],
xAxis: {
lineWidth: 0.1,
tickWidth: 0.1,
tickLength: 5,
min: Date.UTC(2010, 6, 1),
ordinal: false
},
rangeSelector: {
enabled: false
},
navigator: {
height: 30,
outlineWidth: 0.1,
handles: {
lineWidth: 0.1,
},
xAxis: {
gridLineWidth: 0.1,
tickLength: 0,
}
},
scrollbar: {
enabled: false
}
}
);
});
Thanks!
In Highstock, the yAxis.labels.align is right by default, but yAxis is the opposite as well. It might seem not intuitive, but you only need to change yAxis.labels.align to 'left'.
Demo:
https://jsfiddle.net/BlackLabel/pt2sb60x/
API Reference:
https://api.highcharts.com/highstock/yAxis.opposite
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!
Is it possible to add an x-axis range selector to a Highcharts chart or is that functionality only built into Highstock?
Here's my code:
$('#graph').highcharts({
title: {
text: 'GRAPH TITLE',
margin: 25
},
xAxis: [{
categories: ['03/28','03/29','03/30','03/31','04/01','04/02','04/03','04/04','04/05','04/06','04/07','04/08','04/09']
}],
yAxis: {
title: {
enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
min: 0
},
legend: {
layout: 'vertical',
borderWidth: 0,
enabled: false
},
series: [{
data: [27893,89070,90592,112166,68395,62448,39237,28439,21973,24064,56032,52854,38736]
}],
tooltip: {
enabled: false
},
plotOptions: {
area: {
dataLabels: {
enabled: true,
y: -5,
align: 'center'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
type: 'area'
}
});
Yes, it's possible, but rangeSelector works only with datetime axis.
Anyway, you will need valid Highstock license to enable rangeSelector, see FAQ.
I have created a high chart but would like to have a similar voting style to youtube; with positive vs negative. My issue is getting the bar to stay the full width of the graph, I know percentages can fix this but I want whole numbers.
http://jsfiddle.net/u6H3b/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft:0
},
title: {
text: 'votes'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Apples'],
title: {
enabled: false
}
},
exporting: {
enabled: false
},
yAxis: {
min: 0,
max:23,
title: {
enabled: false },
gridLineColor: '#fff',
lineColor: '#fff'
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Yes',
data: [20]
},{
name: 'No',
data: [3]
}]
});
});
One option is to use 'endOnTick':
yAxis: {
endOnTick: false,
http://jsfiddle.net/f3eFd/
If you want the end tick (23) to show, you could also add:
tickInterval:23,
http://jsfiddle.net/bLDpg/
If you really want to get fancy, you can define each tick you need. In the following code, it prints ticks at 0, 3 and at 23.
tickPositioner: function () {
var positions = [0, 3, 23];
return positions;
},
http://jsfiddle.net/aSHz3/
I think, all you need to set is endOnTick: false and maxPadding: 0, see: http://jsfiddle.net/u6H3b/1/
The only problem is that last tick is not displayed, if this is issue for you, use tickPositioner as suggested by SteveP.
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/