I have built a chart and I am looking to add information bubbles (like the image below) to the bottom of the chart, is there anything in highcharts that I could use to do this?
You could use a scatter plot series to add dots at specific points. jsFiddle and code:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis : {
min:0
},
series: [{
type: 'line',
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: 'Temperature'
}, {
type: 'scatter',
data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
name: 'Rainfall'
}]
});
});
Edit:
You can set showInLegend to false to hide the scatter series from the legend, and you could add a tooltip function to display whatever info you want.
Related
I have the following chart, and I need to delete the default internal margin (market with red boxes)
I havent been able to do so
This is my current code
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'xy',
margin: [0,0,0,0],
},
title: {text: null},
legend: { 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]
}]
});
https://jsfiddle.net/41z9qk2m/
This is the doc page
https://api.highcharts.com/highcharts/chart.margin
Use
xAxis ,and yAxis min max
as per
https://api.highcharts.com/highcharts/xAxis.max
I have a highcharts with two yAxis. The second yAxis have a '300px' top value. When I click on 'Download as PNG', a PNG file downloads and the downloaded image is misaligned.
This is my javascript
Highcharts.chart('container', {
title: {
text: ''
},
subtitle: {
text: ''
},
chart: {
type: 'line'
},
yAxis: [{
height: 200,
},
{
height: 200,
top: 200,
}],
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, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4],
yAxis : 0,
},
{
data: [54.9, 95.5, 194.4, 216.2, 148.0, 126.0, 135.6, 176.0, 144.5, 129.4, 106.1, 71.6, 29.4],
yAxis: 1,
}]
});
This is my fiddle
Can anyone help me to sort this?
That issue is a Highcharts bug and it is reported here: https://github.com/highcharts/highcharts/issues/11509
As a workaround, you can set:
height as a chart property:
chart: {
...,
height: 600
},
or:
height style directly on the container:
document.getElementById('container').style.height = '600px';
Live demo: https://jsfiddle.net/BlackLabel/ot2fa94v/
API Reference: https://api.highcharts.com/highcharts/chart.height
I have a simple bar graph and I wanted to add percentage change over the top of those bars.
Check the inline image.
I read the highcharts documentation and I did not see anything similar. So can we create such chart with highcharts with some hacks, if yes I would appreciate a code sample since my javascript skills are rudimentary. If not then can you suggest some alternative.
With code all things are possible :)
Here's an example which uses a secondary value as the data label:
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function(){
return this.series.userOptions.someValues[this.point.x] + '%';
}
}
}
},
series: [{
someValues: [10, 22, 35, 16, 61, 34, 13, 73, 43, 51, 12, 37],
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]
}]
});
Produces (fiddle here):
This can be done using flotCharts, but I like using Highcharts a lot more for graphing data.
It's done by using:
grid: {
markings: [ {
xaxis: { from: -1, to: 12 },
yaxis: { from: 100, to: 300 },
color: "#FFA5A5" }]}
I was wondering if something like this is possible in highcharts ?
Right now I'm using limit-min and limit-max to draw a line at y-axis 10 like this: http://jsfiddle.net/kyUaR/32/ but I'd rather have the entire background change from that point upwards.
flots markings is analagous to Highchart's plot bands.
Quick example:
$('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
plotBands: [{
color: '#FCFFC5',
from: 100,
to: 300
}]
},
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]
}]
});
Fiddle here.
I want to know how to add images while exporting the image from highcharts. i dont want the images to be "on" the highchart images but i want it to display like this...
<"IMAGE1">
<"CHART">
<"IMAGE2">
is it possible and if it is then how? i understand that there is a image renderer in high charts but that is not what i want..
renderer.image('http://highcharts.com/demo/gfx/sun.png', 100, 100, 30, 30)
.add();
Thanks in advanced.:)
You could use the renderer.image and pad the top and bottom of the plot with space. Fiddle here:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
spacingTop: 90,
spacingBottom: 90
},
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.image('http://highcharts.com/demo/gfx/sun.png', 0, 0, 100, 100)
.add();
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 0, 500, 100, 100)
.add();
});
});