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/
Related
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
I am. trying to hide a portion of a series. I am using zone to do that, but somehow the visbile: false property doesn't work inside a zone. Is there any better way of doing that?
E.g., I am trying to hide the dotted part in the below exmpale:
https://jsfiddle.net/abdfahim/7849x56y/9/
Define the custom class for the zones and hide all the lines and points.
Highcharts.chart('container', {
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]
}, {
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],
zoneAxis: 'x',
zones: [{
value: 3,
dashStyle: 'solid',
className: 'zone-0'
}, {
value: 5,
className: 'zone-1'
}, {
dashStyle: 'solid',
className: 'zone-2'
}]
}]
});
.highcharts-graph.zone-1 {
display: none;
}
.highcharts-area.zone-1 {
display: none;
}
.highcharts-point.zone-1 {
display: none;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
API Reference: https://api.highcharts.com/highstock/plotOptions.series.zones
I have 2 series on my graph:
column (histogram)
line
My problem is that some values of my line series are hidden by the column series (the histogram cuts off line graph whenever there is a merge of the two graphs).
How could I be sure line graph is on the forefront?
Use the z-index attribute:
example:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
lineWidth: 5
}
},
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: 'column',
color: 'blue',
zIndex: 1
}, {
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],
color: 'yellow',
zIndex: 2
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
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'
}]
});