It looks like Highcharts has added more explicit support for annotations in version 6.0.0 but it doesn't seem to be working. Trying the example right of their website but the described annotations are not appearing on the chart.
Below is the code taken directly from the website:
$(function () {
console.log('ready ', Highcharts.version);
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Highcharts Annotations'
},
series: [{
data: [{y: 29.9, id: 'min'}, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
y: 216.4,
id: 'max'
}, 194.1, 95.6, 54.4]
}],
annotations: [{
labels: [{
point: 'max',
text: 'Max'
}, {
point: 'min',
text: 'Min',
backgroundColor: 'white'
}]
}]
});
}
)
Found the problem. You need to also require or include a script tag for 'annotations.js' in addition to highcharts.js
Related
I have tried using my own custom image url for the context menu, however, the hover does not align with the actual image itself. It is similar to this: http://jsfiddle.net/858m3kxv/
You can see in the fiddle that the hover is misaligned. Can someone help me with this? Thanks in advance!
title: {
text: 'Custom context menu symbol'
},
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]
}],
exporting: {
buttons: {
contextButton: {
symbol: 'url(https://www.highcharts.com/images/ico/favicon-192x192.png)'
}
}
}
});
You can position the image by using symbolX and symbolY properties.
exporting: {
buttons: {
contextButton: {
symbol: 'url(https://www.highcharts.com/images/ico/favicon-192x192.png)',
symbolX: 18,
symbolY: 18
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/qLc7fxap/
API Reference: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.symbolX
Example code:
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
lineWidth: 8,
color: '#FF0000'
}
},
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]
}]
});
How can I set color and width for the border of the line?
I need the line appearing like this one:
You can achieve line series with a border by adding additional series with the same data array that is linked to the main one. Then just set greater lineWidth and different color.
Code:
const 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];
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
lineWidth: 5,
color: '#000',
marker: {
enabled: false
},
data: data,
linkedTo: 'main'
}, {
lineWidth: 2,
id: 'main',
color: '#FF0000',
name: 'Test',
marker: {
enabled: false
},
states: {
hover: {
lineWidthPlus: 0
}
},
data: data
}]
});
Demo:
https://jsfiddle.net/BlackLabel/d1m4feyx/
API reference:
https://api.highcharts.com/highcharts/series.line.linkedTo
I'm trying to translate a graphs language from English to Arabic, I'm using ruby on rails with haml, I also have chartkick gem, and highcharts, here is what I did:
on the view i have a div with an Id 'con'
#con
and for the JavaScript I have this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'con'
},
title: {
text: 'أضغط لعرضها فى المقدمة'
},
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]
}]
});
my problem is when I run this on Firefox everything works perfectly
and it gives me the correct title
أضغط لعرضها فى المقدمة
but when I run it on chrome it gives me the reversed latter and they are not connected to each others something like this:
ف ي ةم د ق م ل ا.....
I have solved this, just in case someone else needed the answer: you should add useHTML: true
var chart = new Highcharts.Chart({
chart: {
renderTo: 'con'
},
title: {
text: 'أضغط لعرضها فى المقدمة',
useHTML: true
},
.....
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]
}]
});
I have a line graph where Y values are -10 to +60. I would like to style the y=0 line to stand out from other grid lines.
Is this possible?
Thanks.
Take a look at the plotLines API in the yAxis...
http://api.highcharts.com/highcharts#yAxis.plotLines
Example...
http://jsfiddle.net/48dUL/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
plotLines: [{
color: '#C0C0C0',
width: 5,
value: 0
}]
},
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]
}]
});
});