How to remove this hightlighted area in highcharts?
please share your answers. thanks
This is done by disabling the navigator. See enabled. Simple example:
$(function () {
$('#container').highcharts('StockChart', {
navigator: {
enabled: false
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
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
});
This is a sample workaround of these problems. Whenever I put it on a single date range it does not reflect on the chart but when you hover or click it it's there.
Highcharts.getJSON('https://www.highcharts.com/samples/data/aapl-c.json',
function (data) {
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data.slice(0,1),
tooltip: {
valueDecimals: 2
}
}]
});
});
Markers by default are disabled for normal state in Highstock. You can easily turn them on:
series: [{
...,
marker: {
enabled: true
}
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4929/
API Reference: https://api.highcharts.com/highstock/series.line.marker.enabled
I'm creating a bar chart where it should be possible to hide each bar via legend.
However, only first and last series are getting fully hidden. The ones in the middle disappear from the plot area, but their labels remain visible at the X axis.
Here's a sample jsfiddle. Click through the legend starting from the first/last item and from the middle ones and you'll see what I'm talking about.
And here are the chart options I'm passing through:
{
chart: {
type: 'bar'
},
title: {
text: 'Compare scores per department'
},
xAxis: {
type: 'category'
},
plotOptions: {
bar: {
grouping: false,
dataLabels: {
enabled: true,
},
},
series: [
{ name: 'department 1', data: [{ name: 'department 1', y: 45 }] },
{ name: 'department 2', data: [{ name: 'department 2', y: 68 }] },
{ name: 'department 3', data: [{ name: 'department 3', y: 82 }] },
{ name: 'department 4', data: [{ name: 'department 4', y: 37 }] }
]
}
Any ideas of how to fix it or alternative ways to implement it?
Thanks!
If you don't need also categories on xAxis (which in bars is vertical on the left) but it's enough the legend, you can change options this way:
xAxis: {
labels: {
enabled: false
}
},
plotOptions: {
// any
}
Check the fiddle updated: https://jsfiddle.net/beaver71/zbktpf0g/
UPDATE:
in addition, as suggested by Deep 3015 you can enable dataLabels:
plotOptions : {
series : {
dataLabels : {
enabled : true,
align : 'left',
color : '#FFFFFF',
inside : true,
formatter : function () {
return this.key
}
},
}
},
It appeared to be a known issue with category axes (hidden points are only hiding first/last categories).
I got the following workaround from Highcahrts team:
using series.events.legendItemClick event for setting empty data to the item on hide and then putting data back when it's shown again:
plotOptions: {
series: {
events: {
legendItemClick: function () {
if (this.visible) {
this.setData([], false)
} else {
this.setData([seriesArray[this.index]], false);
}
}
}
},
}
jsfiddle
I hope it will help someone who is facing the same problem.
Is there a way to make the panning functionality to pan on future dated xAxis?
$(function () {
$('#container').highcharts('StockChart', {
xAxis: {
events: {
afterSetExtremes: function (e) {
}
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
Please refer to this test file I created http://jsfiddle.net/bxg57pav/
Appreciate your help.
I am trying all kinds of permutations to make data labels on the spline chart but I just dont know what I am doing wrong.
Any help would be appreciated.
JsFiddle here
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
data: [
[Date.UTC(2005,9,01), 2.02],[Date.UTC(2006,8,30), 7.56],[Date.UTC(2007,8,29), 5.22],[Date.UTC(2008,8,27), 6.57],[Date.UTC(2009,9,03), -4.48],[Date.UTC(2010,9,02), 5.29],[Date.UTC(2011,9,01), 7.44],[Date.UTC(2012,8,29), 3.39],[Date.UTC(2013,8,28), 6.54],
]
}]
Under plotOptions, you are setting the dataLabels option for line charts, not spline charts. They have to match:
plotOptions: {
spline: { // has to say spline here
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
Updated fiddle.