Related
I have a high chart that has two sets of data. The numbers on the y-axis for the data are to far apart from each other. I saw a solution for this a while back while looking for something else and can not find it for the life of me. So at the risk of repeating a question, How do I make the 160 in the red close together like in the yellow circle.
If I were to spell it out it looks like this 1 6 0 and I need to to look like this 160. Does anyone know what value controls that?
As requested, here is my code:
$(function() {
$('container').highcharts({
chart: {
zoomType: 'xy',
width: 640
},
xAxis: [{
categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
crosshair: true,
gridLineWidth: 1,
labels: {
style: {
fontSize: '15px'
}
}
}],
yAxis: [{ // Primary yAxis
gridLineWidth: 2,
tickInterval: 20,
fontWidth: 100,
title: {
text: '',
}
}, { // Secondary yAxis
tickInterval: 20,
title: {
text: 'Total Retrun %',
style: {
color: "#000000",
fontSize: '20px'
}
},
labels: {
format: '{value}',
style: {
color: "#000000",
fontSize: '20px'
}
}
}, ],
legend: {
layout: 'horizontal',
align: 'center',
x: 0,
verticalAlign: 'top',
y: 0,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
itemStyle: {
font: '15pt Helvetica',
},
},
series: [{
name: 'AirTransport',
type: 'column',
yAxis: 1,
data: [22.5, -1.9, -32.6, 22.3, 33.4, -6.1, 19.2, 50.7, 28.1, -8.6],
tooltip: {
valueSuffix: ''
},
pointWidth: 35,
color: "#b3b3b3"
}, {
marker: {
fillColor: '#FFFFFF',
lineWidth: 1,
lineColor: null
},
name: 'S&P 500',
type: 'line',
yAxis: 1,
data: [15.8, 5.5, -37.0, 26.5, 25.0, 2.1, 16.0, 32.4, 23.7],
color: "#000000"
}]
});
});
As both wergeld and Halvor Strand pointed out, you need to more clearly define the font attributes for your labels.
Here's a revised set of values for your y-axes:
yAxis: [{ // Primary yAxis
gridLineWidth: 2,
tickInterval: 20,
fontWidth: 100,
title: {
text: 'S&P value',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
},
opposite: true,
labels: {
format: '{value}',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
}
}, { // Secondary yAxis
tickInterval: 20,
title: {
text: 'Total Return %',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
},
labels: {
format: '{value}',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
}
}, ],
Note how I removed the fontSize attribute in favor of the font attribute. In my experiences, this is far more useful and versatile.
Here's the result from my changes:
I noticed and corrected a few other items in your code:
You had both of your series set to display on the same yAxis value. I made them distinct.
I added the attribute opposite: true to one of your y-axes so it would appear on the right (see the demo at http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo-dual-axes/).
Your declaration $('#container').highcharts({ was missing the # sign. This would prevent your chart from appearing in the <div> element with that ID.
Here's the revised fiddle: http://jsfiddle.net/brightmatrix/pLort0mj/
I hope this solves your problem and has been helpful for you!
I am drawing paths over a graph, and I need to change their color on hovering over another element on the page - a list of the data points on a div on the right of my page.
Here is my code:
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'area',
backgroundColor: 'transparent',
height: 470
},
plotOptions: {
area: {
enableMouseTracking: false,
showInLegend: false,
stacking: 'percent',
lineWidth: 0,
marker: {
fillColor: 'transparent',
states: {
hover: {
lineColor: 'transparent'
}
}
}
}
},
series:
[
{
name: 'over',
color: 'none',
data: overData
},
{
id: 's1',
name: 'Series 1',
data: data,
showInLegend: true,
zoneAxis: 'x',
zones: zones
},
{
name: 'under',
color: 'none',
data: underData
}
],
xAxis: {
plotLines: plotLines,
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
}
},
yAxis: {
title: {
text: ''
},
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
}
//,min: -25
},
legend: {
enabled: false
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
}},function(chart){
dataForChart.forEach(function(entry) {
chart.renderer.path(['M', ((entry.score*475)/100), 45, 'V',475])
.attr({
'id' :'line_'+entry.id,
'stroke-width': 2,
stroke: 'white',
zIndex:1000
})
.add();
});
});
The piece of code in question is this:
chart.renderer.path(['M', ((entry.score*475)/100), 45, 'V',475])
.attr({
'id' :'line_'+entry.id,
'stroke-width': 2,
stroke: 'white',
zIndex:1000
})
.add();
Now all I want to do, is change the color of that path on hover. As you can see, I do assign an id to each line.
I have a column on the front end that when a user hovers over the point's name (in this case it is a donor name such as USAID) and when that happens, I want to trigger a hover state (preferably previously defined in the second block of code I pasted) and change the line color.
How can I achieve this?
1) How do I add a hover style to that path?
2) How do I trigger the hover state for the specific line when I hover over it's name in the list of donors?
You can add .on() event on the rendered object.
chart.renderer.path(['M', 0, 0, 'L', 100, 100])
.attr({
'stroke-width': 10,
stroke: 'red'
})
.on('mouseover',function(){
$(this).attr({
'stroke': 'yellow'
})
})
.on('mouseout',function(){
$(this).attr({
'stroke': 'red'
})
})
.add();
Example: http://jsfiddle.net/6g5hfycw/
Trying to show description about y-axis labels as tooltip.
Is it possible to show corresponding tooltips on y-axis labels?
Here is the Fiddle where I am trying to add tooltip to y-axis lables
Code:
$(function(){
var chart1;
$(document).ready(function(){
var options = {
colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'black',
borderColor: 'black',
borderWidth: 0,
className: 'dark-container',
plotBackgroundColor: 'black',
plotBorderColor: '#000000',
plotBorderWidth: 0
},
credits: {
enabled: false
},
title: {
text: 'Count Per Category',
style: {
color: 'white',
font: 'normal 22px "Segoe UI"'
},
align: 'left'
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
color: '#F0F0F0'
}
},
categories: {
enabled: 'true'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
itemStyle: {
font: '9pt Segoe UI',
color: 'white'
},
itemHoverStyle: {
color: 'grey'
}
},
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
style: {
color: 'white'
}
},
title: {
enabled: false
},
gridLineColor: '#222222'
},
yAxis: {
title:
{
enabled: true,
text: "Document Count",
style: {
fontWeight: 'normal',
color: 'white'
}
},
labels: {
style: {
color: 'white'
}
},
gridLineColor: '#222222'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer'
}
},
series: []
};
options.series = [{
data: [3, 4, 4, 3, 9]
}];
chart1 = new Highcharts.Chart(options);
});
})
For each category, I have a tooltip like:
cat1: descrption1
cat2: descrption2
cat3: descrption3
cat4: descrption4
When mouse is hovered on "cat1", "description1" need to be shown as tooltip.Somewhat like below:
Use formatter with HTML enabled for labels: http://jsfiddle.net/W5wag/2/
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
return '<span title="My custom title">' + this.value + '</span>';
},
useHTML: true,
style: {
color: 'white'
}
}
},
Of course you need store somewhere reference cat1 <-> description1 to feed span title with description.
Extending Paweł Fus' solution I define the label and title text by delimiting the values for categories using ' - '. The value can then be split into an array by the formatter to display the first array value as the label and the second array value as the title text: http://jsfiddle.net/wqpckxL7/
xAxis: {
categories: ['cat1 - the first and best category',
'cat2 - this category is less popular',
'cat3',
'cat4',
'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
// split using -
var values = this.value.split(" - ");
// check we have more than 1 value
if (values.length > 1) {
// use first item in the array as the displayed label and the second for the title text
return '<span title="' + values[1] + '">' + values[0] + '</span>';
} else {
// if only one value then format as normal
return this.value;
}
},
useHTML: true,
style: {
color: 'white'
}
},
}
Add pointFormat property to your tooltip object as:
tooltip: {
.....,
.....,
pointFormat: '<b>{point.y}</b>',
}
DEMO Link:
I'm working on a project to register pump curves in a MySQL database. So I'm trying to create the closest possible one chart with 3 yAxis (H, NPSH, Power) and 2 xAxis (flow and efficiency). I uploaded a pump curve image here for better understanding. Note this efficiency is a logarithm scale but I prefer to create a linear scale to make it easy.
Well, every curve chart has more one rotor curve, in this case we have 5 curves which is five types of rotor (176mm, 169mm, 162mm, 154mm and 148mm).
Each rotor gives one data series in a yAxis as H, NPSH, Power and Efficiency.
So I need to create a series for each rotor size whem each series get the values of the data: H,NPSH,Power,Efficiency with its yAxis referals.
Here is the link's page with the code.
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Curva da Bomba'
},
subtitle: {
text: 'KSB Meganorm 32-160 | Rotação 1750rpm'
},
xAxis: [{
tickmarkPlacement: 'on',
labels: {
format: '{value}m³/h',
style: {
color: '#005ca2'
}
},
title: {
text: 'Vazão Q (m³/h)',
style: {
color: '#005ca2'
}
}
},{// Rendimento
labels: {
format: '{value}%',
style: {
color: '#005ca2'
}
},
title: {
text: 'Rendimento n (%)',
style: {
color: '#005ca2'
}
},
opposite: true,
top: 90,
height: 0,
offset: 0,
lineWidth: 1
}],
yAxis: [{ // Altura manométrica H
labels: {
format: '{value}mca',
style: {
color: '#005ca2'
}
},
title: {
text: 'Altura manométrica H (mca)',
style: {
color: '#005ca2'
}
},
top: 90,
height: 250,
offset: 0,
lineWidth: 1
}, { // NPSH
labels: {
format: '{value}mca',
style: {
color: '#005ca2'
}
},
title: {
text: 'NPSH (mca)',
style: {
color: '#005ca2'
}
},
top: 380,
height: 120,
offset: 0,
lineWidth: 1
}, {// Potência
title: {
text: 'Potência (hp)',
style: {
color: '#005ca2'
}
},
labels: {
format: '{value} hp',
style: {
color: '#005ca2'
}
},
top: 540,
height: 220,
offset: 0,
lineWidth: 1
}],
tooltip: {
crosshairs: true,
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
x: 0,
verticalAlign: 'top',
y: 34,
floating: true,
backgroundColor: '#FFFFFF'
},
plotOptions: {
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 4
}
},
marker: {
enabled: false
},
pointInterval: 1, // one hour
pointStart: 6
}
},
series: [{
name: 'Rendimento n (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [40,44,45.5,48,50,51.5,52.5,53,53.8,54.7,54.6,53.4,53.4,52.5],
dashStyle: 'shortdot',
tooltip: {
valueSuffix: '%'
}
}, {
name: 'Pressão H (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
tooltip: {
valueSuffix: 'mca'
}
}, {
name: 'NPSH (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
yAxis: 1,
data: [1.2,1.25,1.3,1.4,1.4,1.4,1.4,1.4,1.4,1.63,1.78,2.5,3.2,4],
tooltip: {
valueSuffix: 'mca'
}
}, {
name: 'Potência (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
yAxis: 2,
data: [0.8,0.87,0.92,0.96,1.01,1.04,1.08,1.13,1.15,1.19,1.22,1.24,1.26,1.29],
tooltip: {
valueSuffix: 'hp'
}
}]
});
});
You can set which yAxis a series is plotted against by using the yAxis: <index> value in the series setup. For example:
...
{
name: 'Pressão H (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
tooltip: {
valueSuffix: 'mca'
},
yAxis: 1,
}
...
Here is a very quick example of it. You have 2 xAxis and 3 yAxis. No idea if this is how you want to display it but this shows you how to move the axis around.
My highchart crashes chrome, when i add the 2nd serie.
Cannot see Chrome console to debug.. :(
Does anyone have an idea?
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
margin: [40,10,60,80],
},
title: {
text: 'Temperature Today'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
tickInterval: 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
minorGridLineWidth: 0,
/* gridLineWidth: 0, */
/* alternateGridColor: null */
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y;
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 3,
lineWidth: 1
}
}
},
}
},
series: [{
name: 'Temperature',
data: temp,
type: 'line',
showInLegend: false,
pointInterval: 60 * 1000,
pointStart: Date.UTC(2006, 0, 1),
marker: {
enabled: false
},
dashStyle: 'solid',
yAxis: 0,
xAxis: 0,
} , {
name: 'Humdity',
data: hum,
yAxis: 1,
xAxis: 0,
showInLegend: false,
type: 'line',
}],
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});
You only have one yAxis, so it breaks because you set the second serie to display into the second one( yes, that's what yAxis: 1 means ).
Remove it or create the second yAxis.
Update:
Use yAxis: 0 the reffer the first and 1 to the second.
Missing , after } on line 36 of jsfiddle.
Store data before.
Demo