how to add images when exporting in highcharts? - javascript

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();
});
});​

Related

How to move x-axis labels to the left using highcharts?

I am using highcharts to create a nice chart. In my case I want to rotate the x-axis labels, but when I do so, the label on the right is not fully visible. Because of that, I want to position the labels more to the left. How can I do this?
I changed an online example so it is easy to play around; http://jsfiddle.net/6hw9tw8q/
Highcharts.chart('container', {
chart: {
marginBottom: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'December'],
labels: {
rotation: 45
},
},
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]
}]
});
Thanks for your help!
labels: {
rotation: 45,
x:-12
},
You can use x value to change position in x-asix doc.
Here is updated fiddle.
You can add a margin to the right side of the graph, this will mean that the text will not go outside the chart bounds.
Highcharts.chart('container', {
chart: {
marginBottom: 80,
marginRight: 40 //added this line
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'December'],
labels: {
rotation: 45,
},
},
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]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
fiddle: http://jsfiddle.net/6hw9tw8q/3/
API on marginRight: https://api.highcharts.com/highcharts/chart.marginRight
I just found a better solution for my problem. I changed the rotation to minus 45 and this keeps the labels within the window...
http://jsfiddle.net/nxwkLr70/
labels: {
rotation: -45
},

Highcharts threshold background color from 100 y-axis

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.

Highcharts - Font Stretch

I would like to apply a font-stretch property to a text in Highcharts.
How can I do this ?
Here is a jsFiddle I've already tried : http://jsfiddle.net/5hPcP/11/
But it does nothing.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events:{
load: function(){
this.renderer.text('Stretched text',60, 60 ).
css({
fontStretch:"extra-expanded",
fontSize : "12pt"
}).attr({
fontStretch:"extra-expanded",
zIndex: 10000
}).add();
}
}
},
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]
}]
});
});
W3C CSS info.
W3C SVG text. Then search for stretch.

Resize chart and navigator

How can I resize a chart and the navigator? In my JSFiddle http://jsfiddle.net/Charissima/8nenL/4/ the chart disappears, when the window is resized.
$(window).resize(function()
{
chart.setSize(
$(document).width(),
$(document).height()/2,
false
);
});
var chart = new Highcharts.Chart({
chart: {
renderTo: container,
spacingTop: 3,
spacingRight: 0,
spacingBottom: 3,
spacingLeft: 0
},
navigator: {
enabled: true,
top: 330, // Abstand von oben
outlineColor: '#C0C0C0',
outlineWidth: 1
},
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]
}]
});
It looks like a global problem with highstock, so I reported it to our developers here: https://github.com/highslide-software/highcharts.com/issues/2364

Highcharts Information bubbles at bottom of chart - is it possible?

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.

Categories