I have written following code to display chart. I haven't mentioned x Axis and y axis labels. Those are auto generated.
I want to display 'low' on starting of scale and 'high' at end of scale on x axis instead of full scale.
$('#container').highcharts({
yAxis: {
title: {
text: 'Temperature'
},
id: 'my_y',
lineWidth: 2,
lineColor: '#F33',
min:0,
max:100
},
series: [{
name: 'Temperature',
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],
color: '#F33'
}]
});
like this?
Its a bit "hacky" i'm sure there is a better way of doing it but it works.
xAxis: {
tickAmount: 2,
labels: {
formatter: function () {
if (typeof(this.axis.ticks[this.value]) != "undefined"){
if(this.axis.ticks[this.value].isFirst) {
return 'low'
}
else if (this.axis.ticks[this.value].isLast){
return 'high'
}
}
}
}
}
Related
This question already has an answer here:
Highcharts - Force Categories in x-axis to be shown, even without data
(1 answer)
Closed 6 years ago.
I have following jsFiddle
http://jsfiddle.net/9v636zt3/
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: [0.0001,0.001,0.01,0.1,1,10,100]
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5]
}]
});
});
Using highcharts, I want to show the x-axis labels 0.0001,0.001,0.01,0.1,1,10,100 in series. but does not show it some how.
How can I force to show all the x-axis values?
Please help.
I think you are missing something i was able to plot your chat with the data you supply using this code below.
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [0.0001,0.001,0.01,0.1,1,10,100],
plotBands: [{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5,0,0,0]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5]
}]
});
});
I have the following scatter plot graph, I want to create the graph as such that there is no yaxis and all the scatter plots on the x-axis are seen as a straight line in both the graphs.
following is the fiddle, http://jsfiddle.net/pratik24/n24s2fyk/1/
Code snippet:
$(function () {
$('#container').highcharts('StockChart', {
navigator:{
enabled: false
},
scrollbar:{
enabled: false
},
rangeSelector : {
selected : 1,
enabled:false
},
yAxis: [{
labels: {
align: 'left'
},
title: {
text: 'OHLC'
},
height: '60%'
}, {
labels: {
align: 'left',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0
}],
series: [{
type: 'scatter',
name: 'AAPL',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
type: 'scatter',
name: 'Volume',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
yAxis: 1
}]
});
});
How can this be achieved in HighStock,
Thanks
Scatter points in straight line - set data that will be presented like this (e.g. [1,1,1,1,1]) or increase y axis scale using min and max
Example: http://jsfiddle.net/6bkzxoff/
To hide y axis use axis options:
title: {
text: ''
},
labels: {
format: ' '
}
Example: http://jsfiddle.net/6bkzxoff/1/
I have a area chart. Its legend symbol comes up with a border radius.
Tried the below code and I could remove the the radius in IE9. Does not work in IE7.Please help.
$(chart.series).each(function () {
this.legendSymbol.attr({
'rx': 0,
'ry': 0,
'border-radius': '0px',
'height': 12
});
});
Border-radius is not supported by IE7, unfortunately.
Please check this matrix:
http://caniuse.com/border-radius
attr() is avaiable only in SVG, but IE6/7 use VML, which not allows to use this function.
EDIT:
You can use small workaround which include "fake" series, which correct marker (like square) and linked area serie with symbol.
series: [{
name: 'first',
type: 'scatter',
color: 'blue',
id: 'other',
marker: {
symbol: 'square'
}
}, {
showInLegend: false,
name: 'first',
linkedTo: 'other',
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]
}]
http://jsfiddle.net/Drjyz/1/
THis code worked for me.
if (this.legendSymbol != undefined && this.legendSymbol != null) {
this.legendSymbol.attr({
'rx': 0,
'ry': 0,
'r': 0,
'height': symbolWidth
});
}
Specifically the 'r':0 made it work in the VML rendering browsers.
Can I rely on this solution?
http://jsfiddle.net/jriggs/8Sg8K/17/
See it by hitting the update button.
Ideally, I would just like for the line series to appear on top of the column, like adjusting the z-index, if that makes sense.
I've tried disable animations with no luck. Seems to have something to do with the order that the series are declared - but not sure.
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
},{
name: 'Cleveland',
data: [10, 4, 11, 14.5, 18.2, 21.5]
}]
},
function (chart) {
$('#btn').click(function () {
chart.series[0].update({
type: "column"
});
});
});
});
});
Just adjust the zIndex for each of the series just like you said:
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5],
zIndex: 10
},{
name: 'Cleveland',
data: [10, 4, 11, 14.5, 18.2, 21.5],
zIndex: 20
}]
See it running here.
I have a Highchart containing multiple lines. I want to disable the tooltip on certain lines, and leave it enabled for others. Is that possible? I see how to disable the tooltip globally, but not by series.
For instance, on the standard line chart example is it possible to disable the tooltip on the red and blue lines but leave it enabled on the other two?
UPDATE
use enableMouseTracking: Boolean
Notice enableMouseTracking: Boolean was introduced after this question was asked
Old Answer
I just Disabled the heights point in the Tokyo series
here is your code
tooltip: {
formatter: function() {
if(this.series.name == 'Tokyo' && this.y == 26.5 ){
return false ;
// to disable the tooltip at a point return false
}else {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
}
}
jsfiddle
Use enableMouseTracking. It's the best way to do it.
Per Serie
series: [{
name: 'Serie1',
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],
enableMouseTracking: false
}, {
name: 'Serie2',
data: [7.0, 6.9, 9.5, 15.5, 15.2, 15.5, 15.2, 15.5, 11.3, 17.3, 11.9, 9.6]
}]
Global
plotOptions: {
series: {
enableMouseTracking: false
}
}
The code above will display tooltip for only the first serie.
Reference: enableMouseTracking
For stock charts enableMouseTracking: false makes lines inactive on hover.
Here's better solution:
Highcharts.chart('container', {
series: [{
name: 'John',
type: 'column',
data: [5, 3, 4, 7, 2],
tooltip: {
pointFormatter: function() {
return false
}
}
}, {
name: 'Jane',
type: 'column',
data: [2, 2, 3, 2, 1],
tooltip: {
pointFormatter: function() {
return 'Second <strong>column</strong> series.'
}
}
}, {
name: 'Joe',
type: 'line',
data: [3, 4, 4, 2, 5],
tooltip: {
pointFormatter: function() {
return false
}
}
}]
});