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/
Related
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'
}
}
}
}
}
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]
}]
});
});
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 will like the possibility of disabled some labels of my chart
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}, {
name: 'Year 2009',
data: [873, 614, 4054, 732, 34]
}, {
name: 'Year 2010',
data: [573, 1500, 4054, 732, 34]
}, {
name: 'Year 2012',
data: [373, 1380, 4054, 732, 34]
}]
});
});
});
http://jsfiddle.net/tkGFr/
for example, this chart will show all the labels and i will like the possibility of make only enabled 2 or 3 (year 1800, 1900 and 2009) of them but always maintaining the other options (year 2008, 2010 and 2012)
is this possible?
i appreciate your help and advice :D
As I assume, you would like to have enabled "year 1800, 1900 and 2009" in legend and displayed in chart, but other only in legend? If yes you can use visible parameter
{
name: 'Year 1800',
visible: false,
data: [107, 31, 635, 203, 2]
}
Even showInLegend: false; can be used; if want to hide in legends.
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
}
}
}]
});