Using this fiddle as an example.
I cannot find a way to default to a certain level and selection: in the linked example, if I wanted to start drilled-down into South-East Asia, how could I do so? (as if I had clicked South-East Asia once it loaded)
Highcharts.chart('container', {
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: points
}]
});
As I understood - you would like to trigger a drilldown event on the initial load, am I right? If yes, here is a demo with the example how to achieve it.
if (Highcharts.isString(drillId)) {
series.setRootNode(drillId, true, {
trigger: 'click'
});
}
Related
i have a highstock chart with multiple series, each one has it's own tooltip(shared:false), after hovering mouse, a label appear on xAxis, how to get ride of it?
{
xAxis: {
crosshair: false
},
tooltip: {
useHTML: true,
shadow: false,
borderRadius: 0,
borderColor: "transparent",
backgroundColor: "transparent",
borderWidth: 0,
},
plotOptions: {
series: {
turboThreshold: 0,
},
states: {
hover: {
enabled: false,
},
},
},
series: [ {
type: "line",
name: series[0].name,
data: [...],
color: series[0].color,
tooltip: {
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
},
},
{
type: "line",
data: [...],
name: series[1].name,
color: series[1].color,
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
}],
}
in here i put a sample of what i mean and a picture:
js fiddle
From Highcharts API:
split: boolean Since 5.0.0
Split the tooltip into one label per series, with the header close to
the axis. This is recommended over shared tooltips for charts with
multiple line series, generally making them easier to read. This
option takes precedence over tooltip.shared.
To get rid of the header set headerFormat to an empty string.
tooltip: {
headerFormat: ''
}
Live demo: https://jsfiddle.net/BlackLabel/bc467dmo/
API Reference: https://api.highcharts.com/highstock/tooltip.headerFormat
I am implementing a chart with highcharts based on vue.js.
LineWidthPlus function works well on hover, but lineWidthPlus does not work on select.
This is part of my code.
plotOptions = {
series: {
lineWidth: 2,
boostThreshold: 1,
allowPointSelect: true,
stickyTracking: false,
states: {
hover: {
enabled: false,
},
select: {
enabled: true,
lineWidthPlus: 10,
},
},
}
What is the cause and if there is a demo, please tell me the demo url. thank you.
I'm using Highcharts in an Angular 8 application, and while the chart itself renders quite fast, I am encountering some seriously degraded performance rendering tooltips on charts bound to larger data sets. Interestingly the issue seems less related to the number of data points than to the amount of the plot area series fill.
We are using Boost (in app.module.ts):
Boost(Highcharts);
NoData(Highcharts);
More(Highcharts);
NoData(Highcharts);
theme(Highcharts);
and this is is the chart's config (series are added dynamically):
public baseChartOptions: Highcharts.Options = {
chart: {
type: 'line',
zoomType: 'x',
animation: false,
height: '55%'
},
boost: {
enabled: true,
useGPUTranslations: true,
usePreallocated: true
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
exporting: { enabled: false },
plotOptions: {
series: {
lineWidth: 1.5,
animation: false,
marker: {
enabled: false
}
}
},
xAxis: [
{
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d'
}
} as Highcharts.XAxisOptions
],
yAxis: [
{
minorTickLength: 0,
tickLength: 0,
title: {
text: ''
}
}
],
tooltip: {
shared: true,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y:.0f}</b><br/>',
animation: false
},
series: []
};
What are best practices for ensuring the best performance in rendering tooltips? I've seen the Highcharts demo showing over 1,000,000 points with good performance, but I don't seem to be able to achieve the same.
I've included a short video converted to gif that illustrates the behavior I'm seeing at three different data densities.
Thanks for your help!
highcharts tooltip performance
The performance should be better when you disable shared tooltip:
tooltip: {
animation: false,
valueDecimals: 2,
shared: false
}
Demo:
http://jsfiddle.net/BlackLabel/xhpqedrt/1/
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?
I have created a high chart but would like to have a similar voting style to youtube; with positive vs negative. My issue is getting the bar to stay the full width of the graph, I know percentages can fix this but I want whole numbers.
http://jsfiddle.net/u6H3b/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft:0
},
title: {
text: 'votes'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Apples'],
title: {
enabled: false
}
},
exporting: {
enabled: false
},
yAxis: {
min: 0,
max:23,
title: {
enabled: false },
gridLineColor: '#fff',
lineColor: '#fff'
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Yes',
data: [20]
},{
name: 'No',
data: [3]
}]
});
});
One option is to use 'endOnTick':
yAxis: {
endOnTick: false,
http://jsfiddle.net/f3eFd/
If you want the end tick (23) to show, you could also add:
tickInterval:23,
http://jsfiddle.net/bLDpg/
If you really want to get fancy, you can define each tick you need. In the following code, it prints ticks at 0, 3 and at 23.
tickPositioner: function () {
var positions = [0, 3, 23];
return positions;
},
http://jsfiddle.net/aSHz3/
I think, all you need to set is endOnTick: false and maxPadding: 0, see: http://jsfiddle.net/u6H3b/1/
The only problem is that last tick is not displayed, if this is issue for you, use tickPositioner as suggested by SteveP.