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 Query
- Adding space between the line and the fill in a Highcharts area chart
- Highcharts AreaSpline - Adding padding in between the chart and plot area
- Highcharts - reduce the space between zero data line and x-axis
- How to change space value between grid and yAxis in Highcharts line chart
- How to add space between chart and axis in highcharts
- How do I reduce the space between title and chart of a High Chart?
- Highcharts - Bar - Setting the X axis width and the chart area width to be constant
- Distance between x-axis labels and the chart in Highcharts
- High charts - Increasing the space between chart and title
- HighCharts - Need more space between bottom of chart and Xaxis labels
- Highcharts: Area chart: fill in space between 0 and first point
- highcharts - Draw horizontal line outside the chart area
- Highcharts - column chart has space between bar and xAxis
- How to remove fine white line between halo and Highcharts pie chart
- Find and fill intersection of line chart with plot line in highcharts
- 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
- Reduce gap between plot area and actual chart in highcharts
- How do you reduce the space between pie chart and legend? (highcharts.js)
- HIGHCHARTS How to to make separate colors for shaded region and the line in Area Graph
- 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 => Getting the id of a point when clicking on a line chart
- Highcharts: Remove space between plot border and actual chart
- HighCharts : Adding Hyperlinks to the X-Axis of the chart
- How do you increase the performance of highcharts chart creation and rendering
- Highchart Area Range chart with gradient that follows the line
- Add a gap between the second and third series in a Highcharts column plot with four series displayed
- Highcharts - How to remove connecting line between fixed tooltip and point
More Query from same tag
- Highcharts - Stack Chart to Stack Chart in Drilldown
- How to update Highcharts with React JS via input fields
- Can we control the Zoom Level when we click on the cluster in Highcharts?
- Highcharts: Is it possible to have separate plotOptions for each series?
- Highchart - Plot missing DateTime values on xAxis
- How to append dynamic values to the area chart in High charts or convert the data to arrays?
- Uncaught TypeError: c.color.tweenTo is not a function
- Set customize credits in Highcharts
- Highcharts SVG difference with Node JS SVG
- Cannot read property 'addEvent' of undefined
- Column Labels in Sankey Charts in Highcharts
- Customizing X axis Highcharts, adding custom markers under the X axis
- How to find a point with longitude and latitude in a Highmaps maps serie, initiated with GeoJson?
- Remove first and last grid lines in highcharts?
- programmatically trigger click event in svg rect element
- Calling Highcharts within a function
- accessing values from a controller to directive which is having local scope
- Issue while Dynamically Modifying yAxis Extremes in Highchart
- How to add custom exporting button in highCharts?
- Callouts CSS implementation for highcharts not working
- Highcharts how to use column title as X axis and not as Legend
- Highcharts - Sankey chart - How to display some series dataLabels name into icon or some different name
- How to show circular progress pie chart using the highcharts
- Update series using Highcharts React wrapper
- HighChart Tooltip different suffix values
- How to force a line break without using <br/>
- Update Series Array on HighChart after editing chart
- Why text in highchart doesn't place in a correct position?
- How to add dotted lines between two interval of x-axis in hightcharts
- HighCharts - How to create dynamic chart that exports EVERYTHING