I need to build a highchart with 2 yAxis, one on the left (primary) and one on the right(secondar). I was not able to make this work. Any ideas what I am doing wrong here or missing?
here is the jsfiddle: http://jsfiddle.net/gsaray101/KX4AS/2/
I am using the example from the highcharts site as this:
yAxis: [{ // Primary yAxis
labels: {
format: '{value}ms',
style: {
color: '#89A54E'
}
},
title: {
text: 'response time',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'volume',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}',
style: {
color: '#4572A7'
}
},
opposite: true
}],
Axis are 0 based. So you need (http://jsfiddle.net/zEBSh/)
var data = [{
"name": "1",
"yAxis": 0,
"data": [
[1374019440000, 25],
[1374056640000, 43],
[1374056880000, 49]
]
}, {
"name": "2",
"yAxis":1,
"data": [
[1374019440000, 33],
[1374019740000, 42],
Related
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/
The Highchart graph code is shown below I want every bar label color is different. Currently, I'm getting the same color in bar
Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'Popular '
},
credits:{
enabled:false
},
xAxis: {
max: 20,
type: 'category',
style:{
fontSize: '12px'
}
},
yAxis: {
min: 0,
allowDecimals:false,
title: {
text: 'Number of applications',
style:{
fontSize: '12px'
}
},
gridLineWidth:0,
minorGridLineWidth: 0,
tickLength: 5,
tickWidth: 1,
tickPosition: 'inside',
lineWidth:1
},
scrollbar: {
enabled: true
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'hi'
},
series: [{
name: Stats',
data: data,
color:'#2ecc71',
pointWidth: 25,
}],
Data format is :
[
[
"Qualcom",
17
],
[
"The ram",
12
],
[
"Aoperty",
8
],
[
"Ob.",
8
],
[
"Sugh",
8
],
]
The output is shown in the picture I want every bar is in a different color can you help me?
Referring to comments you can set a specific color to a single point by adding a color property programmatically to its object like that:
series: [{
data: [
["Qualcom", 17],
{
name: "The ram",
y: 12,
color: 'red'
},
["Aoperty", 8],
["Ob.", 8],
["Sugh", 8]
],
color: '#2ecc71'
}]
API reference:
https://api.highcharts.com/highcharts/series.column.data.color
Demo:
https://jsfiddle.net/BlackLabel/craqy1sv/1/
If you want to add a specific color to a point when a condition is matched you can loop through each series point in chart load event and update a matched point:
chart: {
type: 'column',
events: {
load: function() {
var chart = this,
series = chart.series[0];
series.points.forEach(function(point) {
if (point.name === 'The ram') {
point.update({
color: 'red'
})
}
});
}
}
}
API reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Point#update
Demo:
https://jsfiddle.net/BlackLabel/jmuoevz1/
You need to set colorByPoint :true to use different colors like that
series: [{
name: 'Stats',
data: [
[
"Qualcom",
17
],
[
"The ram",
12
],
[
"Aoperty",
8
],
[
"Ob.",
8
],
[
"Sugh",
8
]
],
colorByPoint: true,
pointWidth: 25,
}]
Fiddle
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
When I display the last label of a yaxis, the spacing of the range selector gets crowded.
Example: http://jsfiddle.net/georgeludwig/FttkQ/7/
You can see how the "75" and "30" are kind of jammed in there.
Is there any way to get more space around the range selector? i've been messing around with various padding values, and nothing works.
code:
<code>
$(function () {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
yAxis: [{ // Primary yAxis
endOnTick: true,
showLastLabel: true,
title: {
text: 'Time Published',
style: {
color: '#89A54E'
}
},
gridLineWidth: 0,
opposite: true,
}, { // Secondary yAxis
showLastLabel: true,
title: {
text: '% Audience Coverage',
style: {
color: '#4572A7'
}
},
}],
series: [{
yAxis: 0,
type: "scatter",
data:[ [1142294400000,2],
[1183334400000,5],
[1199232000000,18],
[1230768000000,9],
[1262304000000,4],
[1294012800000,20],
[1325548800000,1],
[1357084800000,6] ]
}, {
yAxis: 1,
type: "areaspline",
data:[ [1142294400000,9],
[1183334400000,10],
[1199232000000,15],
[1230768000000,25],
[1262304000000,35],
[1294012800000,46],
[1325548800000,47],
[1357084800000,68] ]
}]
});
});
</code>
You can use maxPadding (http://api.highcharts.com/highcharts#yAxis.maxPadding) with setting tickInterval (http://api.highcharts.com/highcharts#yAxis.tickInterval)
http://jsfiddle.net/FttkQ/9/
yAxis: [{ // Primary yAxis
showLastLabel: false,
title: {
text: 'Time Published',
style: {
color: '#89A54E'
}
},
gridLineWidth: 0,
opposite: true,
tickInterval:10,
maxPadding:1
}, { // Secondary yAxis
showLastLabel: false,
maxPadding:0.2,
tickInterval:25,
title: {
text: '% Audience Coverage',
style: {
color: '#4572A7'
}
},
}],
# Sebastian Bochan, Cant we use rangeSelector? why does this rangeSelector wont work for zoom button?
rangeSelector: {
inputPosition: {
y: 5
}
}
I have made a Highcharts chart with grouped and stacked columns, like in the example found here: http://www.highcharts.com/demo/column-stacked-and-grouped. The example shows a number of fruits for 5 different persons, grouped by gender. What I miss in this example, is an x-axis label showing the name of the group (male or female) underneath each group. Is it possible to add this to the chart?
Here is a simplified version of the chart I'm trying to make: http://jsfiddle.net/WQjVP/66/. It shows the number of open (blue) and overdue (red) issues for three locations in a case handling system. The left column in each group shows the numbers for that location for July, and the right column in each group shows the numbers for August for the same unit. What I would like to do is to show the month under each column, so that the first column will have "Jul", the second will have "Aug", the third will have "Jul" and so on, between the column and the location label.
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ["Location A","Location B","Location C"],
title: {
text: "Location"
}
},
yAxis: {
allowDecimals: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.y === 0) {
return null;
}
return this.y;
},
style: {
color: 'white'
}
}
},
column: {
stacking: 'normal',
borderWidth: 0
}
},
series: [{
"color": "rgb(0,0,255)",
"name": "open",
"data": [18, 2, 6],
"stack": "Jul"},
{
"color": "rgb(255,0,0)",
"name": "overdue",
"data": [0, 0, 0],
"stack": "Jul"},
{
"color": "rgb(0, 0, 255)",
"name": "open",
"data": [20, 1, 10],
"stack": "Aug"},
{
"color": "rgb(255, 0, 0)",
"name": "overdue",
"data": [2, 1, 2],
"stack": "Aug"
}]
});
Try to use stackedLabels.
yAxis: {
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function() {
return this.stack;
}
}
}
Demo
reference