We Keep Coding

Highchart , how to remove the margins, inside the chart? Creating a 100% zoom?

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

How to add text in the middle of a chart in highchart

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>

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.

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