Related
I need to show some empty space to far right of the chart. To do so I use "overscroll" option (https://api.highcharts.com/highstock/xAxis.overscroll). But if user zoom in chart and pans chart to far right there can be empty space without any part of candlestick chart displayed (https://screencast-o-matic.com/watch/cqnfFq3CII). Please advise is it possible to implement following chart behaviour and how to do so: to keep some part of chart in visible area always, even if "overscoll" option is set and user pans chart to the far right? Thanks!
Here is my code:
var ohlc = JSON.parse(ohlcStringified),
volume = JSON.parse(volumeStringified);
var interval = ohlc[ohlc.length - 1].x - ohlc[ohlc.length - 2].x;
var chart = Highcharts.stockChart('container', {
chart: {
borderWidth: 1,
panning: true,
},
title: {
text: 'Chart'
},
legend: {
enabled: true
},
rangeSelector: {
selected: 1,
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
minPadding: 0.2,
overscroll: 50 * interval,
},
yAxis: [{
height: '40%'
}, {
top: '40%',
height: '30%',
offset: 0
}, {
top: '70%',
height: '30%',
offset: 0
}],
series: [{
type: 'candlestick',
id: 'candlestick',
name: 'AAPL',
data: ohlc,
tooltip: {
valueDecimals: 2
},
dataGrouping: {
enabled: false,
}
}, {
type: 'column',
id: 'volume',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
enabled: false,
}
}]
});
Here is live demo: http://jsfiddle.net/ogorobets/bfcs9gx7/2/
It's possible, however, it requires some custom logic. It can be achieved using xAxis.events.afterSetExtremes callback where you can check if the current axis minimum is greater than your limit (a value lower than maximum xData value). When it is true, set new axis extremes with your limit as a minimum value. Check the code and demo posted below.
Code:
xAxis: {
minPadding: 0.2,
overscroll: 50 * interval,
events: {
afterSetExtremes: function() {
var chart = this.chart,
xData = chart.series[0].xData,
maxValue = xData[xData.length - 5],
min = chart.xAxis[0].min,
max = chart.xAxis[0].max
if (min > maxValue) {
chart.xAxis[0].setExtremes(maxValue, max, true, false);
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/p6d73nk8/
API reference:
https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I want to create a stacked column chart using highcharts.js with datetime data
It works on line type, but not working on column. The result were flat 100%.
What i need is the chart will appear as stacked column. what do i missed?
I tried stacked: 'normal' on plotOptions, but still not working.
Please advise, thank you
My highcharts options:
var optionsProcessTime = {
global: {
useUTC: false
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [],
labels:{
formatter: function(){
return '#'+this.value;
}
}
},
yAxis: {
title: {
text: ''
},
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S'
},
labels:{
format: '{value:%H:%M:%S}'
},
gridLineWidth: 0
},
tooltip: {
enabled: true,
type: 'datetime',
formatter: function(){
return Highcharts.dateFormat('%H:%M:%S',new Date(this.y))
}
},
legend: {
enabled : false
},
plotOptions: {
series: {
pointPadding: 0.05,
groupPadding: 0
},
column: {
stacking: 'normal'
},
line: {
marker: {
radius: 2,
fillColor: '#ad050b'
},
dashStyle: 'ShortDash',
lineWidth: 1,
}
},
series: []
}
My Json output:
[{
"name":"Checker",
"data":[86,87,91,92,93,94,99,100,101]},
{
"name":"Estimate",
"type":"column",
"data":[1517018400000,1517014800000,1517014800000,1517018400000,1517017200000,1517015700000,1517013900000,1517013900000,1517013900000]},
{
"name":"Process",
"type":"column",
"data":[1517018400000,1517013666000,1517014800000,1517016664000,1517015107000,1517014984000,1517013604000,1517013900000,1517013900000]
}]
I suggest to disable, for debugging only, your definition for yAxis.labels. You will see original labels and realize how it works :)
In short, stacking renders each value on top of the previous one, for example: 1517018400000 + 1517018400000 = 3034036800000 so it renders point in 2066 year. And since all columns starts from zero (0) the distance is quite big: 136 years. Take a look: http://jsfiddle.net/BlackLabel/L4Lgbvvm/45/
Why it works for a line chart then? Simply, line type doesn't start at zero as column does. You can achieve the same result (without stacking) for column too, by setting series.threshold to null: http://jsfiddle.net/BlackLabel/n1s4sqps/
What about stacking? I'm not sure how this should work.. it works the same way for columns and lines, compare stackings:
line: http://jsfiddle.net/BlackLabel/n1s4sqps/1/
column: http://jsfiddle.net/BlackLabel/n1s4sqps/2/
If you could explain how stacking should be rendered in your opinion, let me know, maybe we can find some solution for it. An image of such stacking would be great.
I am using Highcharts to automatically plot an array which is output from a sensor and is updated every second or so. The array is x elements long. This particular sensor measures the light intensity at x steps between some min and max wavelengths (that is, it measures the intensity at increments of (max-min)/x--in my case this increment is not an integer). I also have a static data set that is plotted on the same axes with the same x-axis requirements.
I am able to successfully graph this data dynamically, but the x-axis scale is wrong. Instead of ranging from min to max, Highcharts defaults to a range of min to min+x. I'd like to change the x-axis increment so that the scaling is correct.
Can a min, max, and number of data points or step be defined to generate the x-axis? Or is there a way to define the x- and y-axis values as individual arrays that are plotted against each other? Some other way? I have done lots of searching and experimenting but have come up short.
The relevant snippet of my code is below.
function showData(result) { // 'result' is an array that comes from the sensor
var numbers = int(split(resultString, ","));
chart.series[1].setData(numbers);
socket.send('a'); // send a byte to tell it to start sending new data
loop++; //increase loop every time the server receives data
chart.setTitle({ text: 'Spectrum, reading #' + loop });
} //showData
$(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area',
load: function() {
chart = this;
showData();
}
},
title: {
text: 'Spectrum, reading 0'
},
xAxis: {
title: {
text: 'Wavelength [nm]',
allowDecimals: false,
},
},
yAxis: {
title: {
text: ''
},
},
tooltip: {
pointFormat: '{point.x}'
},
plotOptions: {
area: {
pointStart: 340,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: '404 nm laser spectrum',
data: [130,130,114,113,113,116,112,111,112,112,115,113,113,115,
112,114,113,113,114,115,113,114,113,114,115,115,117,119,124,
136,145,164,190,217,252,363,482,491,417,285,188,156,140,132,
127,122,117,118,117,115,116,115,116,118,116,116,117,116,117,
116,113,117,114,113,115,112,116,114,114,116,114,114,116,113,
116,115,114,115,115,114,115,115,115,116,114,115,116,114,118,
114,116,116,115,118,114,113,117,113,116,116,115,116,115,115,
115,114,117,116,117,118,120,118,122,119,128,127,130,134,136,
138,140,137,139,134,136,134,132,133,134,131,132,130,130,131,
128,128,131,129,131,131,134,136,134,140,139,137,143,140,138,
141,136,134,132,127,126,126,123,123,118,119,122,118,120,117,
116,118,116,118,116,115,117,116,115,116,115,115,116,114,119,
113,114,116,115,116,114,114,116,116,113,117,116,114,118,112,
115,114,113,116,115,114,115,113,116,114,114,116,115,115,114,
112,114,114,113,114,115,113,117,114,115,112,114,114,113,115,
114,114,115,113,112,115,112,113,115,112,116,113,113,115,116,
113,116,113,115,113,114,115,115,114,116,114,116,113,116,117,
113,115,116,115,117,115,114,117,113,115,118,114,116,115,115,
116,114,113,116,114,117,115,114,117,115,114,115,116,116,116,
117,117,114,0],
color: '#36D39F'
}, {
name: 'Current measured spectrum',
data: numbers,
color: '#4A235A'
}]
});
});
EDIT: here's a demo showing how mine currently functions: https://jsfiddle.net/bgzgc1d9/2/. The x-axis should range from 340 to 850 with 288 data points evenly spaced on this interval
I'm trying to define the limit the zoom level, I want to increase it, a user can go on a map.
Because for some country I'm showing on the map, there is some region that is so small that the shape is not visible, even if they are correctly defined into the GeoJSON, and there is also the label over it.
You can take as reference the following code from highmaps developers:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/doubleclickzoomto/
$('#container').highcharts('Map', {
title : {
text : 'Zoom in on country by double click'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
}
}]
});
found the solution:
setting minRange property on both xAxis and yAxis:
The minimum range to display on this axis. The entire axis will not be allowed to span over a smaller interval than this, in terms of shape path coordinates. Defaults to 5 times the size of the smallest area.
$('#container').highcharts('Map', {
title : {
text : 'Zoom in on country by double click'
},
xAxis: {
minRange: 1
},
yAxis: {
minRange: 1
},
.....
I have building a pie chart using HighCharts library, and here is my chart:
// http://jsfiddle.net/t2MxW/20890/
var chart = new Highcharts.Chart({
colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
credits: { enabled: false },
chart: {
renderTo: 'container',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: { text: null },
plotOptions: {
pie: {
allowPointSelect: false,
size: '100%',
dataLabels: { enabled: false }
}
},
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
['Other', 35] // second half of pie
]
}]
});
But the problem is that I don't want appearing tooltip on mouse over...
Is it possible to disable tooltip on hover?
Disabling tooltip just disables the tooltip but the hover effect is still present. To disable the hover effect, add the following to your plotOptions:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
You need to set the tooltip attribute to false, like so:
tooltip: { enabled: false },
jsFiddle here
Here's the full code for your case:
var chart = new Highcharts.Chart({
colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
credits: { enabled: false },
tooltip: { enabled: false },
chart: {
renderTo: 'container',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: { text: null },
plotOptions: {
pie: {
allowPointSelect: false,
size: '100%',
dataLabels: { enabled: false }
}
},
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
['Other', 35] // second half of pie
]
}]
});
You might alternatively want to disable all mouse tracking in general, both tooltip and hover effects:
(copy and paste link) http://api.highcharts.com/highcharts#series.enableMouseTracking
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-enablemousetracking-false/
plotOptions: {
series: {
enableMouseTracking: false
}
}
The title of the question is about disabling hovering, so in case anyone else finds themselves here for that purpose, I'll elaborate on #SergeyB's answer.
There are a few options that affect how mouse hovering changes a series' styling. They each have different effects depending on the series type. I'll talk about line and pie series here, but generally, you can look under plotOptions.<seriesType>.states.hover for styling applied to the currently hovered series and plotOptions.<seriesType>.states.inactive for styling applied to the non-hovered series (e.g. plotOptions.pie.states.hover). None of these options affect the tooltip styling.
plotOptions.series.states.inactive
plotOptions.series.states.inactive affects the styling applied to all series that aren't currently being hovered over. To prevent them from fading into the background, set plotOptions.series.states.inactive.opacity to 1.
var chartOptions = {
// ...
plotOptions: {
series: {
states: {
inactive: {
opacity: 1,
},
},
},
},
}
jsFiddle for line
jsFiddle for pie
plotOptions.series.states.hover
plotOptions.series.states.hover affects the styling applied to the series that's being hovered over. For example, for a line series, the default is to thicken the line width and apply a halo to the nearest point.
To disable any styling of a currently hovered line series, set plotOptions.series.states.hover.enabled to false.
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
},
},
},
},
}
jsFiddle
Unfortunately, if we set this on a pie series, this will make the hovered slice fade into the background with the rest of the inactive slices (see this jsFiddle for an example). If we want to remove all hover styling without affecting the inactive styling, we can set plotOptions.series.states.hover.halo.size to 0 (which removes the halo) and plotOptions.pie.states.hover.brightness to 0 (which removes the brightening effect). Note that since brightness is specific to pie series, it's documented under plotOptions.pie instead of plotOptions.series (though it worked for me even when I added it under plotOptions.series).
var chartOptions = {
// ...
chart: {
type: "pie",
},
plotOptions: {
series: {
states: {
hover: {
halo: {
size: 0,
},
// this worked for me even though it's not
// documented under plotOptions.series:
//brightness: 0,
},
},
},
pie: {
states: {
hover: {
brightness: 0,
},
},
},
},
}
jsFiddle
plotOptions.series.stickyTracking
If you're using a line or area series, you may have noticed that as soon as you hover over the chart, even if you're not touching a series, the nearest series will receive hover styling and the rest will receive inactive styling. This is because plotOptions.series.stickyTracking is true by default for line and area series. If you set plotOptions.series.stickyTracking to false, hover and inactive styling will only be applied while you're hovering over a line.
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
stickyTracking: false,
},
},
}
jsFiddle
plotOptions.series.enableMouseTracking
As #ninedozen noted, you can completely disable all responsive interactions based on mouse movement by setting plotOptions.series.enableMouseTracking to false. Note that this will also disable tooltips in addition to hover/inactive styling.
Options scope
To apply these options to all series in the entire chart, place them under plotOptions.series. To apply them only to certain series types (or if the option is specific to a certain series), place them under plotOptions.<seriesType>. To apply them to a specific series, place them inside that series' options.
var chartOptions = {
series: [
{
name: "series1",
type: "line",
data: [...],
// these options will only apply to series1, not series2 or series3
states: {...},
},
{
name: "series2",
type: "line"
data: [...],
},
{
name: "series3",
type: "pie"
data: [...],
}
],
plotOptions: {
// these options will apply to all series in the chart
series: {states: {...}},
// these options will only apply to series of type line
// i.e. series1 and series2
line: {states: {...}}
}
}
You can simply turn them of using the following:
tooltip: {
enabled: false
},
plotOptions: {
series: {
states: {
inactive: {
opacity: 1,
},
},
}
}
I did this to display multiple line charts on hover.
In order to completely turn off tooltip and hover effects on a chart,
it is needed to turn off the tooltip, disable hover state and set inactive data opacity to 100%.
This answer is based on previous answers and shows a complete solution to the problem.
This is the configuration which turns off the hover and tooltip effects:
series: {
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1,
}
}
},
tooltip: {
enabled: false
}
you can simply disable it by setting the option
tooltip:{
enabled: false
}
I usually just disable the style in css so I can still access the hover event in JS if needed...
.highcharts-tooltip {
display: none;
}
As specified in the accepted answer, you need to set
tooltip: { enabled: false }
Note - you must specify this as a property of your Highcharts.Options object (i.e. your chart options object, not a property of your series). So, either specify it in the JSON that you pass into your Highcharts.Chart object, or specify it as a property of a Highcharts.Options object that you explicitly create, before you pass it to you Highcharts.Chart
See https://api.highcharts.com/highcharts/tooltip.enabled