I have configured exporting option for Highstock with following settings,
exporting: {
enabled: true,
filename: 'most-chart',
chartOptions: {
title: {},
subtitle: {},
rangeSelector:{enabled: false}
}
},
But still Rangeselector is coming on export.
Related
I am new to working with HighCharts. I am working on a project that was started by someone else but not finished. In this project the user will have a chart that spans multiple days but only wants to use certain sections of it. The user wants to use the bottom navigation 1 bar which lets you zoom into certain time spans to move around the chart to save different version of the chart. They will press the save button to save the state of the chart which they are currently viewing. I need a to know if it is possible if you can access the labels in the x-axis of the line chart so I can save the time positions they are looking at? Do HighCharts provide any way of getting output from the Navigation 1 bar?
I have accessed the x-axis labels with jquery and can see the data I need using ('#fn.init').prevObject[0].all.chartContainer.innerText, but I am not sure if this is the correct way to go about it. Is there a better way to do this?
Chart Configuration:
Highcharts.stockChart('container',
{
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy',
panning: true,
panKey: 'ctrl',
events: {
load() {
const chart = this;
chart.showLoading('Loading, Please Wait ...');
setTimeout(function() {
chart.hideLoading();
},
1500);
}
}
},
boost: {
useGPUTranslations: true,
turboThreshold: 1000
},
rangeSelector: {
buttons: [
$('#heatingStart').val(),
toDateAdd($('#heatingStart').val(), 1, 'H'));
graphicinfo(RecipeId, $('#heatingStart').val(), toDateAdd($('#heatingStart').val(), 8, 'H'));
graphicinfo(RecipeId, $('#heatingStart').val(), toDateAdd($('#heatingStart').val(), 1, 'D'));
{
text: 'All',
events: {
click: function() {
graphicinfo(RecipeId, $('#ReportStartDate').val(), $('#ReportEndDate').val());
}
}
}
]
},
legend: {
enabled: true
},
xAxis: {
title: {
text: 'Time (Hrs)'
},
categories: categoriesX
},
yAxis: {
tickWidth: 1,
title: {
text: 'Temperature (°F)'
},
labels: {
format: '{value:.0f} °F'
},
lineWidth: 1,
opposite: true
},
title: {
text: 'Thermocouples Temperature Data'
},
series: termocouplesdata
});
In my HighCharts Map, I have values that are currency. On the hover, I'd like them to appear as $, but they just appear are raw numbers.
Here's what I have so far
series: [
{
type: 'map',
name: 'Orders $',
states: {
hover: {
color: '#BADA55',
},
},
dataLabels: {
enabled: true,
format: '{point.name}',
},
allAreas: true,
data: this.model,
},
],
It will be enough to set pointFormat property in tooltip configuration object:
tooltip: {
...,
pointFormat: '{point.value}$'
}
Live demo: https://jsfiddle.net/BlackLabel/xp71L0jv/
API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormat
Hello I am currently facing a problem with the tooltip on my chart which adds data dynamically through the use of Series.SetData() function of highcharts.
The issue however is not related to the data which is added I think but with the tooltip everytime I mouse over a point in the graph.
To better understand I will post two screenshots with the issue:
Whenever I mouse over a certain point in the graph the tooltip keeps changing and the values presented are the ones posted in the screenshots. If I drag the mouse away the tooltip that remains on the screen is the second one and I am no longer able to see the Y1 value.
I probably have some bad chart configuration so here is the code of my graph:
$(function () {
// Create the chart for node 1
$('#container').highcharts('StockChart', {
chart: {
zoomType: 'x',
events: {
load: requestDataNode1
},
},
credits: {
enabled: false
},
title: {
text: 'Live Data'
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
yAxis: {
labels: {
formatter: function () {
//return (this.value > 0 ? ' + ' : '') + this.value + '%';
return this.value;
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
legend:{ enabled: true},
plotOptions: {
series: {
showInNavigator: true
},
spline: {
turboThreshold: 0,
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 2,
split: false
},
navigator: {
series: {
data: []
}
},
});
});
I do not know why this happens , at first I thought it could be related with not having a value for a series for a specific date but then I checked my series as you can see in the screenshots and there is indeed a value for both series.
I thank in advance for your help.
I somehow resolved this issue by adding the shared property in the tooltip property and setting to false, however now I only receive a single value.
Is it possible to keep seeing all values?
UPDATE AGAIN - Now I added yAxis property but it's showing nothing:
$('#highchart').highcharts({
chart: {
type: 'line'
},
title: {
text: 'My Data'
},
subtitle: {
text: 'By Day'
},
xAxis: {
categories: date_arr
},
yAxis: [{title: {text: 'PV'}},
{title: {text: 'UPV'}},
{title: {text: 'PPV'},opposite: true}
],
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series: [{
name: 'PV',
data: pv_arr,
yAxis:1
},
{
name:'UPV',
data:upv_arr,
yAxis:2
},
{
name:'PPV',
data:ppv_arr,
yAxis:3
}
]
});
It will show nothing - literally nothing, not even the title of the chart. But a blank area.
UPDATE - Now I am using this but still not working...
$('#highchart').highcharts({
chart: {
type: 'line'
},
title: {
text: 'My Data'
},
subtitle: {
text: 'By Day'
},
xAxis: {
categories: date_arr
},
yAxis: [{title: {text: 'PV'}},
{title: {text: 'UPV'}},
{title: {text: 'PPV'},opposite: true}
],
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series: [{
name: 'PV',
data: pv_arr
},
{
name:'UPV',
data:upv_arr
},
{
name:'PPV',
data:ppv_arr
}
]
});
It's like this (the new labels are ready but the metric is still in the old way):
-- original post --
I am using HighCharts to show some data for a website visitors
In this picture above. the Blue and Dark Blue lines are very big because they are page visits. And the Green one is the Page Views/Unique Page Views. That is a very small number comparing to the visit number. How can I set up a second y-axis system as Microsoft Excel can do?
BTW, the dates on the x-axis is too crowded, is there anyway to make them stay in one line automatically? (sometimes there are only 7 days data)
Thanks
You can define array of yAxis and then set index of axis in each serie.
yAxis: [{
title: {
text: 'yAxis 1',
},
}, {
title: {
text: 'yAxis 2',
},
opposite: true
}],
Example:
- http://www.highcharts.com/demo/combo-multi-axes
You can also disable align ticks by option alignTicks.
chart: {
alignTicks: false
},
refer this Fiddle ,It has three yAxis to show three stacked series
for label relted issues ,you can use tickInterval to show date after an interval
xAxis: {
tickInterval: 24 * 3600 * 1000// One day (change here whatever you prefer)
}
If your labels collapsed with each other you can use staggerLines property in xAxis to show alternate label one step down.
I have a highcharts datetime spline graph, and I would like to add the navigator from highstocks (highstocks is already on the page) without changing anything else about the graph.
Switching from a highchart to highstocks also changes of lots of default behaviour which I'd like to forego (axis settings, legend settings… all sorts). I just want the navigator.
So I'd either like to add just the navigator to my highchart, or be pointed to a comprehensive list of options that I can pass to highstocks to make it match the highcharts defaults (if one exists).
Thanks!
By replacing highcharts.js with highstock.js you won't change default behavior:
Highcharts: http://jsfiddle.net/pq7o66as/
Highstock: http://jsfiddle.net/pq7o66as/1/
Now simply enable navigator:
http://jsfiddle.net/pq7o66as/2/
navigator: {
enabled: true
},
Note:
Don't change constructor from: $('#container').highcharts(options); to $('#container').highcharts('StockChart', options);.
And default options for Highstock:
chart: {
panning: true,
pinchType: 'x',
inverted: false // "true" is not supported in Highstock
},
navigator: {
enabled: true
},
scrollbar: {
enabled: true
},
rangeSelector: {
enabled: true
},
title: {
text: null,
style: {
fontSize: '16px'
}
},
tooltip: {
shared: true,
crosshairs: true
},
legend: {
enabled: false
},
plotOptions: {
line: {
marker: {
enabled: false,
radius: 2
},
states: {
hover: {
lineWidth: 2
}
}
},
column: {
shadow: false,
borderWidth: 0
}
},
xAxis: {
startOnTick: false, // only when navigator enabled
endOnTick: false, // only when navigator enabled
minPadding: 0,
maxPadding: 0,
ordinal: true,
title: {
text: null
},
labels: {
overflow: 'justify'
},
showLastLabel: true,
type: 'datetime' // in Highstock only supported type
},
yAxis: {
labels: {
y: -2
},
opposite: opposite,
showLastLabel: false,
title: {
text: null
}
}