score:2
Accepted answer
EDIT: A more elegant solution that doesn't require you to edit highcharts.js
but instead makes use of prototype to extend Highcharts. Add the following Javascript snippet to your code before you instantiate any graphs:
Highcharts.Series.prototype.drawGraph = (function (func) {
return function () {
func.apply(this, arguments);
if (typeof this.options.areaPadding !== "undefined"){
for (i=2;i<this.areaPath.length;i+=3){
this.areaPath[i]+=this.options.areaPadding;
}
}
};
} (Highcharts.Series.prototype.drawGraph));
Then use the areaPadding
parameter like so to add space between the line and the area:
var chart = new Highcharts.Chart({
plotOptions:{
area: {
areaPadding: 4
}
}
});
See it in action here: http://jsfiddle.net/AAQEq/
Source: stackoverflow.com
Related Articles
- Adding space between the line and the fill in a Highcharts area chart
- How to change space value between grid and yAxis in Highcharts line chart
- Highcharts AreaSpline - Adding padding in between the chart and plot area
- How to add space between chart and axis in highcharts
- HighCharts - Need more space between bottom of chart and Xaxis labels
- Highcharts - reduce the space between zero data line and x-axis
- Highcharts - gap between series in stacked area chart
- Highcharts: Area chart: fill in space between 0 and first point
- Adding series markers to highcharts area chart
- Highcharts Area chart gradient fill
- highcharts - Draw horizontal line outside the chart area
- Looking for a line chart drill down to area chart using Highcharts
- Highcharts - column chart has space between bar and xAxis
- How to remove fine white line between halo and Highcharts pie chart
- Highcharts two colors for fill of area chart
- Find and fill intersection of line chart with plot line in highcharts
- Highcharts Line Chart with multicolor area
- Highcharts to display area range and line chart with data from a CSV file
- Highcharts Pie chart how to reduce space between chart and legend caused by plot width
- Highcharts (column, candlestick) show mouseover tooltip anywhere on chart similar to line or area
- Reduce gap between plot area and actual chart in highcharts
- How to make color fill area between 2 points at HighCharts
- How to fill the blank space between the bars with specific color in gantt chart of highcharts?
- Flow chart in Highcharts adding list and line breaks
- Highcharts showing points on hovering over the line which are outside the chart area when the chart is zoomed in
- HighCharts turn animation false for line chart
- Highcharts => Getting the id of a point when clicking on a line chart
- Highcharts Area graph, use 2 fill colors above / below X axis
- Gradient Fill on Line Chart (Highcharts)
- Highcharts: Remove space between plot border and actual chart
- Tooltip overlap issue in highchart, can not select plotpoint on same datetime?
- Highcharts transform JSON into data without losing informations
- How to create a row isolated heatmap with Highcharts
- How to display grid line on top of highchart
- Highcharts: how to get the default export options on a chart?
- Using Highchart with javascript
- Does highcharts support displaying groups of columns at different x values?
- Highcharts- Unable to change yAxis label
- Highcharts formatting data labels
- How to set xaxis label according my json result data?
- R HighCharter - customize tool tip captions
- How can I put xAxis in highcharts starting in the horizontal line when all values are in 0?
- External legend in Highcharts
- Override Highcharts waterfall isSum() value
- Highcharts series data array not working
- Highcharts- how to get focus only when the cursor enter the point?
- Highcharts Map bubble on Pacific Centered World map
- Getting javascript undefined TypeError
- Using HighCharts with LARAVEL
- Unable to download a file using java