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
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
Consider this jsfiddle
Highcharts.chart('container', {
chart: {
plotBorderWidth: 1,
marginLeft: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Title aligned left',
align: 'left',
x: 70
},
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 have a default text in the middle of the chart, if the data is empty.
Is there a way to accomplish that?
There is a specific module for that called no-data-to-display.js and you can customize the text too like that :
Highcharts.setOptions({
lang:{
noData:'Something is missing !' // Your text when there is no data
}
});
Fiddle
You can use the loading option to show some text in middle of the chart when you have no data:
lang:{
loading: 'your text here'
},
Then call showLoading() to show this text when you have no data. Here are the documentation of how to customize the loading text.
Working example:
let my_chart = Highcharts.chart('container', {
chart: {
plotBorderWidth: 1,
marginLeft: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Title aligned left',
align: 'left',
x: 70
},
lang:{
loading: 'your text here'
},
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]
}]
});
if (!my_chart.series[0].data.length)
my_chart.showLoading()
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
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.
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();
});
});