I have a graph with 4 y axis which is working fine, but when I click the legend values to check individually, I face a problem.
Here I created the sample of my issue:
https://jsfiddle.net/276rv95s/
When you notice that the Label values of Temperature and Constant are mis-placed. I don't know what wrong in my code.
Here is my code:
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Sample'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
title: {
text: 'Sea',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
},{ // 4th yAxis
gridLineWidth: 0,
title: {
text: 'Constant',
style: {
color: Highcharts.getOptions().colors[3]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[3]
}
},
opposite: true
}],
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
}, {
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
type: 'spline',
yAxis: 3,
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
}, {
name: 'Constant',
type: 'spline',
data: [2, 6, 5, 1.5, 11, 21.5, 25.2, 26.5, 23.3, 8.3, 1.9, 2.6],
}]
});
You have two problems in your code, in the temperature series and Constant series. You need to make sure that each series points to the appropriate yAxis index.
The temperature series is pointing to index 3 (the forth axis), and constant does not have yAxis defined, which means it defaults. Therefore, if you change to the following:
{
name: 'Temperature',
type: 'spline',
yAxis: 0, //changed this from 3 to 0
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
}, {
name: 'Constant',
type: 'spline',
yAxis: 3, //added this
data: [2, 6, 5, 1.5, 11, 21.5, 25.2, 26.5, 23.3, 8.3, 1.9, 2.6],
}
API on series.yAxis: http://api.highcharts.com/highcharts/series.line.yAxis
Working example: https://jsfiddle.net/ewolden/276rv95s/1/
Related
Is it possible to make this data dynamically added to highcharts instead of the custom array? Is it possible to use each loop to insert data dynamically? Is there any way that we can use table or another array to make it dynamically? As i am new in highcharts so i can't figure out how to use that.
Thanks in advance
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo',
align: 'left'
},
subtitle: {
text: 'Source: WorldClimate.com',
align: 'left'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: ' °C'
}
}]
});
You can use update or setData method to add series / data to the already existing chart:
$.getJSON( "...", function( data ) {
chart.series[0].setData(data);
});
// OR
$.getJSON( "...", function( data ) {
chart.update({
series: [{
data: data
}]
});
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4948/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#update
https://api.highcharts.com/class-reference/Highcharts.Series#setData
Or create a chart when the data finished loading:
$.getJSON( "...", function( data ) {
Highcharts.chart('container', {
series: [{
data: data
}]
});
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4949/
You can also use Highcharts data module: https://www.highcharts.com/docs/working-with-data/data-intro and get data for example from CSV.
I've tried to figure out how to add multiple y-axis were the right hand side of the chart could be x amount of measurments to be displayed. The issue is only 3 out of 4 y-axis values are displayed.
What I want to be displayed https://gyazo.com/623c1c120c3794cf404c82f7aa36119e
Example from Highcharts docs https://jsfiddle.net/ojzc2h51/
My dummy code here https://jsfiddle.net/Lamborobin/ojzc2h51/1/
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Test',
style: {
color: Highcharts.getOptions().colors[3]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[3]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: ' °C'
}
}, {
name: 'Test',
type: 'spline',
data: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
}]
});
You need to assign the new series to the yAxis:
series: [..., {
name: 'Test',
type: 'spline',
data: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],
yAxis: 3
}]
Live demo: https://jsfiddle.net/BlackLabel/2fqa8rcs/
API: https://api.highcharts.com/highcharts/series.spline.yAxis
So I have to pass an array in javascript to the Highcharts y-axis and there are some cases in which for an x-axis value, there isn't supposed to be a y-axis value. So, the graph should join the previous point to the next point.
From my search, I found this solution on stack overflow -> missing value in highcharts line graph results in no line, just points
From the comments, apparently the null solution should be working but if you open that js fiddle, you'll see a broken line. At-least, that's what I'm seeing. Also, please see my jsfiddle file: Fiddle
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'spline',
yAxis: 1,
data: [49.9, 71.5, null, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
You can see, there's a broken line here too if we pass null!
If you need to connect null values as well use connectNull:true
plotOptions: {
series: {
connectNulls: true
}
}
Updated fiddle here
I'm trying to develop a timeline feature for a website, and I'm using the multichart API from Highcharts. However, as the data points grows fast, it gets crowded fast and the chart doesn't scale properly, like using a timeline.
Here is a sample from Highcharts:
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value +' mb';
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Rainfall',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
color: '#AA4643',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
This chart is similar with the one I'm working on. And I wanted something similar with This sample: with the possibility of choosing a range from a time period ... How can I accomplish that?
Below is a link to the Highcharts example I want to modify. I would like to have the right 2 y-Axes become one. Currently, each line on the graph corresponds with one y-Axis because they have different scales. The chart I want to create will have 1 right Axis, but correspond to the lowest and highest extreme of both lines in the chart. For example, if line A has low value of 5(and is lower than any value in B line), and line B has an extreme value of 90(and is higher than any value in A), these 2 values are used for the axes. The two lines on the chart should correspond to one scale.
Link: http://www.highcharts.com/demo/combo-multi-axes
Curernt code:
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
title: {
text: 'Example 1'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'%';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Percent Change',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Measure',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value + 'k';
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: '',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value +' %';
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
series: [{
name: 'Measures', //Button on Graph -- Measures
color: '#363534',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
}, {
name: 'Percentage Change 1', //Button on Graph -- Purple
type: 'spline',
color: '#E17000',
yAxis: 2,
data: [30,40,35,25,14,25,39,28,21,78,23,36,5],
marker: {
enabled: false
},
dashStyle: 'shortdot'
}, {
name: 'Percentage Change 2', //Button on Graph -- Orange
color: '#A31A7E',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 35],
}]
});
});
First, perhaps consider another way of representing the data. The multiple scales can be a mental strain.
Second, maybe this helps? I've removed the $(document).ready... wrapper.
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
title: {
text: 'Example 1'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'%';
},
style: {
color: '#878787'
}
},
title: {
text: 'Percent Change',
style: {
color: '#878787'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Measure',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value + 'k';
},
style: {
color: '#4572A7'
}
}
}],
series: [{
name: 'Measures', //Button on Graph -- Measures
color: '#363534',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
}, {
name: 'Percentage Change 1', //Button on Graph -- Purple
type: 'spline',
color: '#E17000',
data: [30,40,35,25,14,25,39,28,21,78,23,36,5],
marker: {
enabled: false
},
dashStyle: 'shortdot'
}, {
name: 'Percentage Change 2', //Button on Graph -- Orange
color: '#A31A7E',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 35],
}] });
There is an option to set yAxis property for series array. Make yAxis: 0 for both series objects. This should give a single Y axis regardless of number of series items on the chart.