I want to export a highchart to a jpeg image and place it into a specific folder.
What is the flow that goes through the highscript.js?
You can export into jpeg ,but it renders on browser as api did not provide location .
API URL :http://api.highcharts.com/highcharts#exporting
and
$('#container').highcharts({
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]
}],
navigation: {
buttonOptions: {
enabled: false
}
},
exporting: {
type: 'image/jpeg'
}
});
You can prepare your own server (http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts) and define directory, where exported file should be saved, but you have no ability to have influence on customer / client direction (security aspects).
Related
am trying to plot a line graph in highchart but its rectangle in shape, how to make it in square shape.
code here
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
fillOpacity: 0.1
}
},
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]
}]
});
Should be something like above img
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
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]
}]
});
});