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
Related
Highcharts.chart('container',{
chart: {
//renderTo: document.getElementById("container"),
type: 'column'
},
accessibility: {
description:'access description'
},
title: {
text: 'this is the graph'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
showInLegend: true
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
{
name: 'japan',
data: [29.9, 73.5, 106.4, 45.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>
<div id="container" tabindex="0" style="padding: 10px 1px 1px 1px; height: 240px; width: 500px;"></div>
I have a column chart with two series. The narrator creates issue in reading the data in such scenario whereas with one series, it's working. Any insights on this?
Demo project: jsfiddle.net/pfsbyxwz/3
I want to make last point blinking in high-stock. But there is no feature for that.
Can I do it by java-script?
One way you could achieve this is to assign a custom class to your last point, and do some CSS for that point to make it blink.
Assigning a custom class to a point can be done like this
series: [{
data: [29.9, 71.5, {y: 54.4, className: 'customClass'}],
}]
Here, the last point as been assigned to with the class customClass. Then we use some CSS magic taken from this answer. And we get a blinking last point:
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, {y: 54.4, className: 'customClass'}],
marker: {
radius: 10
}
}]
});
.customClass {
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 250px"></div>
JSFiddle example: https://jsfiddle.net/ewolden/jr2x64t8/9/
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 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/