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/
Related
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
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 want to show cross hair by default in high chart not any event but it should always be there. How to show crosshair at every x-axis point in highchart?
Using highcharts api
The mouse course will change to crosshair when over a point on the chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'crosshair',
events: {
click: function () {
alert('You just clicked the graph');
}
}
}
},
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]
}]
});
using api jsfiddle
Using jquery
This will make the mouse cursor be a cross hair whenever its on the graph.
$("#container").css( 'cursor', 'crosshair' );
using jquery jsfiddle
How can we add content above every series like a html content .for ex - My Content. I am using line chart.
here is an example which i found in api.
jsFiddle: http://jsfiddle.net/ekec5nut/
$(function () {
$('#container').highcharts({
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]
}]
}, function (chart) { // on complete
chart.renderer.text('Series 1', 90, 150)
.attr({
rotation: 0
})
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});
});
but I do not want to give position like this : chart.renderer.text('Series 1', 90, 150) . I want is to have the content above each series while series are getting created.
How about simply using dataLabels for first point? Just like this:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [
{
dataLabels: {
enabled: true,
formatter: function() { return 'My Content'; }
},
y: 29.9
},
71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
How to on or off credits with a button click in highcharts?
Can some 1 explain with example
You can enable/disable by show/hide functions, related with SVG object.
http://jsfiddle.net/N6b6H/1/
$('#showhide').toggle(function () {
chart.credits.hide();
},function(){
chart.credits.show();
});
Here i created a jsfiddle in which bydefault the credit enable is false but onclick credit enables becomes true.
Try this:
[http://jsfiddle.net/jvaibhav/N6b6H/]
HTML is Like :
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px">
</div>
<button id="showhide"> Click Me </button>
Script is Like:
$(function () {
$('#showhide').click(function(){
$('#container').highcharts({
chart: {
},
credits: {
enabled: true
},
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]
}]
});
});
$('#container').highcharts({
chart: {
},
credits: {
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]
}]
});
});