So the problem is that my last two columns merge together into one. In this case i have as wel values of 9 as of 10 in my array but it just adds the number of 9's and 10's together and labels them all as 9 in the histogram. The result is shown in the picture histogram. You can find my code here https://jsfiddle.net/vlovlo/ypv1jg3u/5/
let testArray = [0,0,0,1,1,1,1,1,2,2,3,3,4,4,4,4,5,5,6,6,6,6,7,7,7,8,8,8,8,8,9,9,9,10,10,10,10]
Highcharts.chart('test', {
title: {
text: 'test',
margin: 50,
style:{
fontWeight: "bold",
},
},
xAxis: [{
visible: false,
}, {
title: {
text: 'test x',
style:{
fontWeight: "bold",
},
},
showLastLabel: true,
}],
yAxis: [{
visible: false
}, {
title: {
text: 'test x',
style:{
fontWeight: "bold",
},
},
}],
plotOptions: {
series: {
borderWidth: 0,
pointPlacement: 'between',
dataLabels: {
enabled: true
},
},
histogram: {
binWidth: 1
}
},
series: [{
name: 'Test',
type: 'histogram',
yaxis: 1,
xAxis: 1,
baseSeries: 'testSeries'
},
{
id: 'testSeries',
visible: false,
data: testArray
}]
});
Try to set the binWidth as 0.99
Demo: https://jsfiddle.net/BlackLabel/doqgcy0z/
Related
Recently I found my pages with Highstock breaks. When clicking the range selector button, which I had defined the dataGrouping function, the series before grouping is still shown in the chart.
img: the overlapping series
so I went back to find the API reference. It turned out that the example given in the API doc has the same issue with mine:
the jsfiddle of the official example
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
Highcharts.stockChart('container', {
chart: {
height: 300
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
subtitle: {
text: 'Custom data grouping tied to range selector'
},
_navigator: {
enabled: false
},
series: [{
name: 'AAPL',
data: data,
marker: {
enabled: null, // auto
radius: 3,
lineWidth: 1,
lineColor: '#FFFFFF'
},
tooltip: {
valueDecimals: 2
}
}]
});
});
So I'm wondering if it's a bug with the new updated highstock.js code.
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.
I am struggling to solve this issue where I have a Highcharts graph with temperature and humidity.
It has two y-axis, one for temperature and one for humidity.
I have specified that humidity should go to the y-axis id 1, but it does not.
It puts the line in, but it is 'plotted' to the temperature axis values.
See this jsfiddle
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x',
type: 'spline'
},
title: {
text: 'Temperatures - Vdrivhus'
},
subtitle: {
text: 'last hour'
},
xAxis: {
type: 'datetime',
// dateTimeLabelFormats.setOption("minute", "%H:%M");
dateTimeLabelFormats: { // don't display the dummy year
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Humidity',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} %',
style: {
color: '#4572A7'
}
},
min: 50,
max: 100,
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
// Define the data points.
marker: {
enabled: false
},
yaxis: 0,
tooltip: {
valueSuffix: '°C'
},
data: [
[1387521917000, 5],
[1387522299000, 5.2],
[1387522531000, 5.1],
[1387522809000, 5.1],
[1387523536000, 4.8],
[1387523745000, 4.7],
[1387524008000, 4.7],
[1387524303000, 4.8],
[1387524667000, 4.9],
[1387524904000, 4.9],
[1387525245000, 5]
]
}, {
name: 'Humidity',
marker: {
enabled: false
},
yaxis: 1,
tooltip: {
valueSuffix: '%'
},
data: [
[1387521917000, 74.4],
[1387522299000, 73.6],
[1387522531000, 74],
[1387522809000, 74],
[1387523536000, 82.5],
[1387523745000, 82.4],
[1387524008000, 78.7],
[1387524303000, 75.9],
[1387524667000, 74.6],
[1387524904000, 74.5],
[1387525245000, 74.2]
]
}, ]
});
});
//]]>
Can anyone help me solve this?
It is very simple, yaxis option should be yAxis since JS is case-sensitive.
I think that's it: jsFiddle
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/
With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :
http://jsfiddle.net/highcharts/YWVHx/
Following code :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: data,
color: '#FF0000',
negativeColor: '#0088FF'
}]
});
});
});
Is it possible to have another threshold with a third color, like this for example :
Thanks in advance for your help.
It actually is possible if you don't mind plotting the data twice.
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
threshold : 0,
data: data,
color: 'orange',
negativeColor: 'blue'
},
{
name: 'Temperatures',
threshold : 10,
data: data,
color: 'red',
negativeColor: 'transparent'
}]
});
});
http://jsfiddle.net/YWVHx/97/
A feature to solve this without "hacks" was added in Highcharts 4.1.0 (February 2015), called zones (API). The given problem can be solved like this, using zones:
plotOptions: {
series: {
zones: [{
value: 0, // Values up to 0 (not including) ...
color: 'blue' // ... have the color blue
},{
value: 10, // Values up to 10 (not including) ...
color: 'orange' // ... have the color orange
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
See this JSFiddle demonstration of how it looks.
Unfortunately this option is not possible, but you can request your suggestion in http://highcharts.uservoice.com and vote for it.
By the way, I can try use a plotLine, like this:
yAxis: {
title: {
text: 'My Chart'
},
plotLines: [{
id: 'limit-min',
dashStyle: 'ShortDash',
width: 2,
value: 80,
zIndex: 0,
label : {
text : '80% limit'
}
}, {
id: 'limit-max',
color: '#008000',
dashStyle: 'ShortDash',
width: 2,
value: 90,
zIndex: 0,
label : {
text : '90% limit'
}
}]
},