I want to change the colors of series..
this the function:
function coloriamo(){
var ipocentro= this.point.y;
if(ipocentro<=50){
return '#ff0000';
}
else if((ipocentro >50)&&(ipocentro<=400)){
return '#ffff00';
}
else if(ipocentro>400){
return '#000000';
}
}
My chart is this:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-scatter-draggable/
how i can to change the color ?
i tried to insert that function in formatter function(), but nothing....
EDIT
If i set marker.fillColor in this way:
plotOptions: {
series: {
marker: {
fillColor: coloriamo(),
}
}
},
when
function coloriamo(){
var ipo= this.point.y;
if(ipo<50){
return '#ff0000';
}
return '#ffff00';
}
but doesn't work...
i tried also in this way but nothing:
http://jsfiddle.net/L9szetnj/
Related
plotOptions: {
series: {
events: {
afterAnimate: function () {
for (let item of this.chart.legend.allItems) {
item.legendItem.on('mouseover', function (e) {
/**
* Register a callback based on the legend selected
*/
}).on('mouseout', function (e) {
/**
* Degerister a callback
})
}
}
},
I wish to add functionality when I mouseover the legend item but the above removes the default transparency functionality. How can I easily re-invoke?
You can add a part of default code for the events functions:
plotOptions: {
series: {
events: {
afterAnimate: function() {
const legend = this.chart.legend,
boxWrapper = legend.chart.renderer.boxWrapper;
for (let item of legend.allItems) {
let isPoint = item instanceof Highcharts.Point,
activeClass = 'highcharts-legend-' +
(isPoint ? 'point' : 'series') + '-active';
item.legendItem.on('mouseover', function(e) {
if (item.visible) {
legend.allItems.forEach(function(inactiveItem) {
if (item !== inactiveItem) {
inactiveItem.setState('inactive', !isPoint);
}
});
}
item.setState('hover');
if (item.visible) {
boxWrapper.addClass(activeClass);
}
}).on('mouseout', function(e) {
legend.allItems.forEach(function(inactiveItem) {
if (item !== inactiveItem) {
inactiveItem.setState('', !isPoint);
}
});
boxWrapper.removeClass(activeClass);
item.setState();
})
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5000/
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
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/
using Highchart, how can we change the zIndex for a line according to its state, or dynamically from a click event ?
I tried :
plotOptions: {
series: {
states: {
select: {
lineWidth: 2,
zIndex:10
}
},
with : this.setState(this.state === 'select' ? '' : 'select'); in the Click event but it doesn't work.
Alright, it's definitely not pretty, but I couldn't find a way to actually set the zIndex, so I had to do some maneuvering to fake it and bring each series to the front in a certain order. Here's the snippet to include:
Highcharts.Series.prototype.setState = (function (func) {
return function () {
if (arguments.length>0){
if (arguments[0] !== ''){
if (typeof this.options.states[arguments[0]]['zIndex'] !== 'undefined'){
this.options.oldZIndex = this.group.zIndex;
this.group.zIndex = this.options.states[arguments[0]]['zIndex'];
}
}else{
if (typeof this.options['oldZIndex'] !== "undefined"){
this.group.zIndex = this.options['oldZIndex'];
}
}
var order = [], i = 0;
$.each(this.chart.series, function(){
order.push({id:i,zIndex:this.group.zIndex,me:this});
i++;
});
order.sort(function(a,b){return (a.zIndex>b.zIndex) ? 1 : -1;});
$.each(order, function(){
this.me.group.toFront();
});
func.apply(this, arguments);
}
};
} (Highcharts.Series.prototype.setState));
And here's the JSFiddle demonstrating:
http://jsfiddle.net/G9d9H/9/
Let me know if that's what you needed.
I think a better solution is to set the series.group.toFront() method on click (I prefer to use it on mouseover)
plotOptions: {
series: {
events: {
click: function () {
this.group.toFront();//bring series to front when hovered over
}
}
}
}
I have a Highcharts line chart going and I have tooltips enabled, however, I would like to disable tooltips for the certain case where x=0. Is there a way of doing this? The closest that I have come so far is this:
tooltip: {
formatter: function() {
if (this.x > 0) {
return this.x;
}
else return null;
}
}
This just creates an empty tooltip but there is still a popup.
Ok...just figured it out. I just have to return false instead of null.
tooltip: {
formatter: function() {
if (this.x > 0) {
return this.x;
}
else return false;
}
}