score:2
Accepted answer
The problem is not your margins but where Highcharts is setting up the xAxis ticks. Easiest fix is to set min/max values.
$(function() {
$('#chart-container').highcharts({
chart: {
type: 'area',
renderTo: 'container',
margin: [0, 0, 0, 0]
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
exporting: {
enabled: false
},
xAxis: {
categories: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'Septemper', 'Oktober', 'November', 'December'],
"tickWidth": 0,
lineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
min: 0.5, //<- added this
max: 10.5
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
},
},
tooltip: {
valueSuffix: ' Kr.'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
name: 'Profit',
data: [0.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
color: '#cc0000',
}]
});
});
.t-box {
background-color: #fff;
border: 1px solid #cccccc;
float: left;
width: 100%;
height: auto;
}
.chart-box {
width: 100%;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div class="t-box">
<div class="chart-box">
<div id="chart-container" style="min-width: 310px; height: 100%; margin: 0 auto"></div>
</div>
</div>
Source: stackoverflow.com
Related Query
- set left and right margin in highchart
- Set left and right border-like on highchart
- move x and y axis from left to right in highchart
- Position next and previous buttons on far right and left side of the Highchart
- highchart legend multiple position ? first legend left and 2nd legend right show in a chart
- How to set series-label to false by default and change the color of series label text in highchart
- Highcharts graph should start entirely to the left and end entirely to the right
- HighCharts - how to align (justify) xAxis labels left and right
- How to set the highchart and the table horizontally?
- Highchart : by passing FROM DATE and TO DATE x axis labels should set
- highchart - scatter : set decimals of x-axis and y-axis
- Highchart min/max values doesn't set and chart not plotted properly
- Highcharts - three series using left Y axis and the fourth using the right Y axis
- align text on the left and the right in Highcharts
- Adding a label to the left and to the right of a bar in highcharts
- how to add data from database and set it to data serie in highchart C#
- I had follow someone code samples and try apply to my HighChart program but I can't get it work at all
- set minimum and maximum values for axis' data in highchart
- combine and merge two array into set of arrays for Highchart Pie
- Set min and max value in double for y-axis in highchart
- set highchart margin
- How can i align the highchart legend pagination to right or left side of the legends?
- How can you align the left and right Y-axes of vertically stacked HighCharts charts?
- Highcharts.js question: is it possible to add blank space from the left and right side of chart that will be visible only during panning?
- Highcharts: Combined line and column chart - start / end line on left / right side, not on column chart data points
- Position highcharts datalabels to the left of positive bars and to the right of negative bars
- Highchart data based to set div width and height dynamically
- Highcharts legend for left and right axis separated
- Setting extremes sometimes results in unwanted padding left and right
- When there is a plotband and a plotline emerging from yAxis how to set a particular width for plotband only in highchart
More Query from same tag
- Highmaps mulitple series can't seen without disable one
- Highcharts 4.0.4 Export Issue on Internet Explorer
- R Shiny: setExtremes in Highcharts (rCharts) on page load
- Integrating Highcharts into an Ember Application
- How to make 1st bar selected in column highchart on page load?
- How to join two series before draw graph in highstocks?
- Highcharts x-axis tick starts with an offset
- Setting a custom variable in Highcharts
- setData is not a function + Angular2-Highcharts
- Windows Forms WebBrowser control in different target platform
- Highcharts not displaying series pushed from JSON
- Issue with tooltip on Highcharts with multiple series added dynamically
- How to remove the white outline/border on Highcharts 3D on setData?
- HighChart with large amount of data not working
- Define a Global Custom Formatter for Highcharts
- Highcharts not rendering
- Highcharts funnel graph constructor
- Big Tooltip over points - Highcharts
- Center Highcharts tooltip in the middle of donut chart in a responsive way
- Highchart Combination Chart Area Range not displaying on chart but line chart works
- HighCharts Data Structure - Multiple Independent Series, Stacked Column Chart
- How to make Basic Line chart to show value
- Facing issues with Highcarts.Chart
- solution : Manage space between group columns in highchart
- Highcharts, vue component. 3 charts in 1
- Preprocess Highchart data using CSV file
- Rotate X Axis labels in Highchart Gantt
- Highcharts - multiple charts
- highcharts select multiple points in one go
- Highcharts maps with decimals