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 Articles
- 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
- How can i align the highchart legend pagination to right or left side of the legends?
- highchart legend multiple position ? first legend left and 2nd legend right show in a chart
- how can I move yAxis labels from Right of chart to left of chart in highstock
- Highchart - line or area not starting at the left point
- How to use Highcharts to implement this dynamically shifting from right to left effect?
- Keep Scroll on the Right Highchart
- Highchart js bar graph label left alignment
- Highcharts graph should start entirely to the left and end entirely to the right
- HighCharts - how to align (justify) xAxis labels left and right
- Align left multi category xaxis highchart
- Highchart range selector right align
- Highcharts: How to make line touch left + right sides
- Is it possible to create network graph using from left to right as tree graph using highcharts?
- Highchart : Add data padding for left stepped area last point
- HightCharts: How to align pie chart positions to right or left corner of the container
- Strange character in the Highstock source code
- Highcharts - three series using left Y axis and the fourth using the right Y axis
- Why does my Highchart look different when I transfer my code from Jsfiddle to my server?
- 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
- Highcharts: moving yAxes from left to right
- I had follow someone code samples and try apply to my HighChart program but I can't get it work at all
- Column based Highchart drilldown series assign color code to each column
- How to start highchart column chart from left most corner of x-axis?
- Highchart point is not right in its line
- x-axis, y-axis lines does not appear, when I include 3D chart library of HighChart in my code
- Trying to use highcharts inside native script web-view. Does not work
- highcharts - Hide some labels in yAxis
- How do I add a tooltip to the x-axis labels in highcharts?
- How to add the attribute `preserveAspectRatio` to Highchart svg
- Highchart.js drilldown adding to data dynamicaly without hardcoding.
- how to implement multiple point data selection in highcharts?
- setCategories not printing the data in expected format in highchart
- How to use axios to fetch data from servlet and then crossfilter it and display via highcharts
- ERROR TypeError: (intermediate value)(intermediate value).init is not a function - Angular 6
- highcharter hcaes "group" usage while plotting large amounts of data with highchart2()
- Highstock: On Series Flags that are inverted
- Highchart - Set Time(Hour:Minute) on X axis
- highcharts StockChart pass multiple values to tooltip
- Highcharts won't display in Chrome App
- highcharts, json data: line and column
- the milliseconds data is not present in the history data of highcharts
- canvas image gets blurry
- HIghchart Area Chart display NULL value in a wrong way
- Data label is getting shown inside of the bar in sometimes
- Highcharts show / highlight y-Axis on mouseover over chart line