I've got a chart with two series. I want to toggle the dataLabels of the series by clicking a button.
changeDatalabel(): void {
if (!this.dataLabelEnabled) { // global Var
this.chart.ref.series[0].update({ dataLabels: { enabled: true } }); // Compile error
this.dataLabelEnabled = true; // for toggling
} else {
this.chart.ref.series[0].update({ dataLabels: { enabled: false } }); // Compile error
this.dataLabelEnabled = false; // for toggling
}
The problem is that the updateMethod get a compile error when I insert "dataLabels: {enable: true}" and he is jumping out of the method "changeDatalabel()".
When i got two buttons with the updateMethod the compile error turn up again but it works.
createLabel(): void {
this.chart.ref.series[0].update({ dataLabels: { enabled: true } });
deleteLabel(): void {
this.chart.ref.series[0].update({ dataLabels: { enabled: false } });
It is the issue with the correct types. You can see in #types/highcharts that the series.update first param is of IndividualSeriesOptions type which dooes not have DataLabels prop.
You can set the options type explicitly to be of LineChart type:
import { LineChart } from 'highcharts';
...
toggleLabel(): void {
const options: LineChart = {
dataLabels: {
enabled: !this.dataLabelEnabled
}
}
this.chart.ref.series[0].update(options);
this.dataLabelEnabled = !this.dataLabelEnabled;
}
example: https://stackblitz.com/edit/angular-bmhomi?file=app/highchart-demo/highchart-demo.component.ts
Related
I'm using the small U.S. map in HighMaps and I want each state and it's datalabel to open up a new URL when clicked. I have the state working, but the label does not work.
this is what I tried:
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function(e) {
const url = e.target.point.value;
window.open(url);
}
}
},
datalabels: {
events: {
click: function(e) {
const url = e.target.point.value;
window.open(url);
}
}
}
}
},
Please see https://jsfiddle.net/sfjeld/zcsxobfa/12/ for the code.
Use the this.value instead of e.target.point.value:
plotOptions: {
series: {
point: {
events: {
click: function() {
const url = this.value;
window.open(url);
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/6gpL57nf/
In your example, you could use:
e.point.properties.hasc
For get the value from the clicked point.
Code:
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function(e) {
const url = "https://www.google.com/search?q=" + e.point.properties.hasc;
window.open(url);
}
}
},
}
},
You can check other values using this path:
console.log(e.point.properties);
The full code is in this forked jsfiddle
I am using highchart contextmenu (using: https://blacklabel.github.io/custom_events/js/customEvents.js) and drill down and drill up.
Problem:
When I right click on pie chart we are able to call alert which is in contextmenu. At the same time, when I drill down and drill up then right click on pie chart, contextmenu is not working. In plotoption it's working fine but I do not need it in plotoption.
Code:
chart: {
type: 'pie',
events: {
drillup: function () {
var chart = this;
window['chart'] = chart;
setTimeout(function () {
console.log('drillup',chart.series[0].events);
if (!chart.plotOptions){
chart.plotOptions = {};
}
if (!chart.plotOptions.series) {
chart.plotOptions.series = {};
}
if (!chart.plotOptions.series.events) {
chart.plotOptions.series['events'] = {
contextmenu: function () {
alert('hi33')
}
}
}
/*
plotOptions: {
series: {
events: {
contextmenu: function () {
alert('hi33')
}
},
}
},
*/
console.log('drillup222',chart);
}, 100);
},
drilldown: function (e) {
var chart = this;
window['chart'] = chart;
setTimeout(function () {
if (!chart.series[0].events) {
chart.series[0]['events'] = {
contextmenu: function () {
alert('hi33')
}
}
}
console.log('drilldown',chart.series[0]);
}, 100);
}
}
},
https://jsfiddle.net/k14ajzpo/2/
https://jsfiddle.net/0txqk2cn/1/
The workaround for this issue is to add an event to plotOptions and check if event occurred on main series. Check demo and code posted below.
Code:
chart: {
type: 'pie',
events: {
load: function () {
var chart = this;
chart.series[0].customEventsEnabled = true;
}
}
},
plotOptions: {
series: {
events: {
contextmenu: function() {
var series = this;
if (series.customEventsEnabled || series.drilldownLevel) {
console.log('working');
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/0pLqvmky/
I have a set of series with markers disabled, and I want to enable all the markers on serie hover, not individual point ans the doc states here: http://api.highcharts.com/highcharts/plotOptions.series.states.hover
The closest thing I had is this:
plotOptions: {
series: {
marker: {
enabled: false
},
states: {
hover: {
enabled: true,
marker: {
enabled: false
}
}
}
}
}
With this I hoped that the markers are all off, and when hovering all the markers are showed, as I thought that the series markers.enabled was set to true, but as the docs I shown above states, this is not what happens.
I would like to do this to show the user where he can mouseover to see the next/prev tooltip, as the markers are not equidistant.
Is possible to achieve this?
You can use series.events.mouseOver and series.events.mouseOut functions for updating your series, so you will show or hide your markers.
plotOptions: {
series: {
stickyTracking: false,
marker: {
enabled: false
},
events: {
mouseOver: function() {
this.update({
marker: {
enabled: true
}
});
},mouseOut: function() {
this.update({
marker: {
enabled: false
}
});
}
}
}
},
Here you can see an example how it can work: http://jsfiddle.net/hgbz7kg6/
Consider the Highstocks async data loading example. I want to hide the preview and show just the scroll bar. So I set enabled to false in the chart configuration:
navigator: {
enabled: false,
adaptToUpdatedData: false,
...
This will cause the adaptToUpdatedData option not to work as described, i.e., when zooming the width of the scroll bar will be always 100%. Is it possible to keep the same behavior of the demo while hiding the preview?
You could visually hide all the elements of the navigator instead of disabling it.
For example (JSFiddle):
$('#container').highcharts('StockChart', {
navigator : {
adaptToUpdatedData: false,
height: 0,
handles: {
backgroundColor: 'transparent',
borderColor: 'transparent'
},
series : {
data : data
},
xAxis: {
labels: {
enabled: false
}
}
}
// ...
});
You might notice that the cursor still changes where the handles would be. If you want to get rid of this you could prevent the drawing of the handles all together.
For example (JSFiddle):
(function (H) {
H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed, x, index) {
});
}(Highcharts));
$('#container').highcharts('StockChart', {
navigator : {
adaptToUpdatedData: false,
height: 0,
series : {
data : data
},
xAxis: {
labels: {
enabled: false
}
}
}
// ...
});
When I call series[0].remove() in a while loop, the shadow of the cursor is never cleaned.
The code is called on a area-stacked click.
plotOptions: {
area: {
stacking: 'percent',
trackByArea: true,
events: {
click: function () {
var chart = $('#container').highcharts();
while(chart.series[0]) {
chart.series[0].remove();
}
}
}
}
}
JSFiddle : http://jsfiddle.net/4sV5g/
Any idea on how to avoid that ?
Found the solution here : https://stackoverflow.com/a/18659064/1456184
for(var i = chart.series.length - 1; i > -1; i--) {
if(chart.series[i].name !== 'Navigator') {
chart.series[i].remove(false);
}
}
Using remove(false) and then a redraw() will not have artifacts.
And I'm not removing the navigator series so there is no bug there too.
I should probably update it like in this fiddle : http://jsfiddle.net/engemasa/WcLQc/