If I programmatically add a series to a graph that already has hover disabled it will enable it. I cannot seem to disable it after adding a new series.
I have recreated the code here https://jsfiddle.net/alexros/cxeh0po8/1/
hover over the series on load and see that it remains static. then click add series then hover over the series, they will go to transparent. Is this a bug or should I be calling a function after everything to reset it?
// create the chart
const chart = Highcharts.chart('container', {
chart: {
},
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
// activate the button
document.getElementById('button').addEventListener('click', e => {
chart.addSeries({
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
});
e.target.disabled = true;
});
You need to also disable inactive state:
plotOptions: {
series: {
states: {
hover: {
enabled: false
},
inactive: {
enabled: false
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/hL4bx91e/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.states.inactive
Related
Is there a solution in Highcharts to format a Label depending on the value?
I know there are color zones option for the dependent formatting of columns based on the value of the data. For example, if the value is bigger than 10 the column turns red, else remains the base color.
I need to get very similar function on the dataLabels. If the value is bigger than 10 turn the label background to red. If this is possible do exist a solution to dynamically get this specific value from the data series, or only can be/ should be a static setting?
Values bigger than 100 should have red dataLabel background color, and the rest (smaller) green background color:
https://jsfiddle.net/saboarpad/6bow3mx1/3/
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
backgroundColor:'red',
color:'white'
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
You can edit data labels style after they have been generated:
chart: {
events: {
load: function() {
var points = this.series[0].points;
points.forEach(function(point) {
if (point.y > 100) {
point.dataLabel.text.css({
'color': 'white',
'background-color': 'red'
});
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/h64gjL2t/
Also, you can individually format dataLabel for each point: https://jsfiddle.net/BlackLabel/4k8p6mfg/
series: [{
data: [{
x: 0,
y: 29.9,
dataLabels: {
backgroundColor: 'red',
color: 'white'
}
},
71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4
]
}]
API: https://api.highcharts.com/highcharts/series.line.data.dataLabels
I find a similar solution, but not clear the use of the code.
In the dataLabels nod there is this "formatter" function which defines the color code based on the this.y value, so here We can do some compare of data: which one is bigger or smaller, and the function returns the color code and concatenates into a HTML span elements inline style.
However, everything is work until is use the plain "color" tag, but this is for the color of the fonts. I needed to change the a background as well. So I changed the color tag to:
1. Highcharts own tag: "backgroundColor" -- nothing happens
2. HMTL back ground color tag: "background-color" -- nothing happens
:( Im feel kind of lost.
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: 'blue',
formatter: function() {
var color = this.y > 100 ? 'red': 'green'
return '<span style="color: ' + color + '">' + this.y + '</span>';
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
I made a jsfiddle example to demo this.
http://jsfiddle.net/daxu/ttxvpduv/.
$(function () {
$('#container').highcharts({
legend: {
enabled: true
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name:'a',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
{
name:'b',
type:'area',
data: [129.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
In my example, I have two series (one line, one area). We can see that the legend for line chart is a line, and the legend area is bigger (like an area).
Is there a way to make all legends a line or some style?
Many Thanks
This is a little hacky (maybe I've just been using d3.js too much lately) but you could modify the SVG on the fly:
, function(chart){
// remove the line and rect
$('.highcharts-legend-item path, .highcharts-legend-item rect').remove();
// add in your own elements
$('.highcharts-legend-item').each(function(i, obj){
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
$(circle).attr({"r":10,"fill":"red", "cy": 10});
$(obj).append(circle);
});
});
Fiddle here.
worked out this now.
see http://jsfiddle.net/ttxvpduv/2/
Highcharts.seriesTypes.line.prototype.drawLegendSymbol =
Highcharts.seriesTypes.column.prototype.drawLegendSymbol;
I am using highcharts and I have a column chart which has 2 data series', the first has each point with different coloured bars, the second series has all the same colour bars.
I understand that because I have set colorbypoint to true that its going to remove the colour swatch from the legend, but is there not a way to add one back in for the second series which is all 1 colour??
I have tried setting various options from the api including trying to add the colorbypoint to just the coloured series but that does not get applied. I have also tried to set colorbypoint to false on the plain series but that does not get applied either.
Is this even possible?
here is a link to a fiddle
http://jsfiddle.net/wf_4/X4K4R/
Just set colorByPoint: false for a second series, and set one color instead of colors array. See demo: http://jsfiddle.net/X4K4R/1/
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
colorByPoint: false,
data: [54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6],
color: '#000000'
}]
});
With the last version of Highcharts (3.0.2), there is an issue when trying to prevent zooming on the mobile device. After prevent, the series disappear from the chart.
In the below code can be seen that at the selection event of the chart it is prevented the zoom action:
$('#container').highcharts({
chart: {
zoomType:'x',
events: {
**selection: function(event) {
event.preventDefault();
}**
},
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
marker: {
enabled:false,
states: {
hover: {
enabled: true
},
select:{
enabled:true
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
},function(chart){
chart.series[0].data[1].select();
});
The link for this test is http://jsfiddle.net/mihaelaCiocoiu/YAe9f/
and the link for load on the mobile is http://jsfiddle.net/m/pvb/
Please test on the Android mobile device in order to see this issue, by zooming in this example.
Thank you!
Indeed it looks like a bug, so I reported to the developers https://github.com/highslide-software/highcharts.com/issues/1963
I want to register a click event with a point on a scatter series. This works when there are no other series displayed on the chart. However, when a line series is displayed i cannot get the click to occur on the scatter series. It only registers on the line series. This happens no matter what order i add the series to the chart. How can i register a click event on a scatter point in this case?
I have an example of the issue here: http://jsfiddle.net/scottmlaplante/AfNzC/1/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
navigator:{
baseSeries:1
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(event) {
alert ('Category: '+ this.category +', value: '+ this.y + event.point.series.name);
}
}
}
}
},
series: [
{
type: "scatter",
name: "scatter series",
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
{
type: "line",
name:"line series",
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
You can recognise which series point is clickec by checking index of series.
if(this.series.index==1)
alert('scatter');
else
alert('line')
http://jsfiddle.net/scottmlaplante/AfNzC/1/