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>
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 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
},
How to display the grid line on top of chart,
I'm having red color grid line in my chart, how to display the grid line on top of chart
I'm trying by setting index in css
code:
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
gridLineColor: 'red'
},
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 link: http://jsfiddle.net/pewx4esm/1/
Helps much appreciated
Try this:
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
gridLineColor: 'red',
gridZIndex:90
},
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]
}]
});
Go through
http://www.highcharts.com/docs/chart-and-series-types/chart-types for help regarding any property of highcharts
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.