Areaspline: edge to edge lines and hide first y label - highcharts

Question

I received a mockup of a graph using an areaspline (ignoring the column chart):
I have two questions that I can't seem to find any configuration that would satisfy the requirements.
Is there a way to extend the lines to the edge of the graph based on their trending slope, or possibly just a little above or below the end point? On a graph like this, it wouldn't look bad to omit those edge lines, but on a graph in the same area with only 3 data points, the whitespace is much more noticeable.
I have the y-axis labels stepping every other, but I can't seem to find a way to hide the first label ($0) in this case. Aside from just hiding the text element itself, is there a configuration to do this?
Edit: Here's an example of my configuration:
var themeColors = {
primaryColor: '#067bc2', //dark blue
secondaryColor: '#6a61a7', //dark purple
tertiaryColor: '#5ccadc', //turquoise
darkGray: '#37383e', //dark gray
mediumGray: '#919aa2', //medium gray
mediumLightGray: '#c9d3dc', //medium blue gray
lightGray: '#eaf1f8', //light blue gray (hover color)
primaryRed: '#e54443',
secondaryRed: '#e54443',
primaryGreen: '#2bbb2d',
secondaryGreen: '#2bbb2d',
primaryOrange: '#ffa883', //peach
primaryBackground: '#fafcfe',//light blue
secondaryBackground: '#ffffff',
primaryText: '#37383e', //dark gray
secondaryText: '#919aa2', //medium gray
selectedColor: '#f5fafd' //light blue, slightly darker than background
};
var colors = [
themeColors.secondaryColor,
themeColors.tertiaryColor,
themeColors.primaryOrange
];
(function renderChart(series) {
var options = {
chart: {
height: 400,
spacing: [0,0,0,0],
type: 'areaspline',
},
colors: colors,
credits: { enabled: false },
legend: {
align: 'left',
itemStyle: {
color: themeColors.secondaryText,
fontSize: '12px',
fontWeight: 'normal',
},
margin: 30,
symbolHeight: 14,
symbolRadius: 0,
symbolWidth: 14,
},
plotOptions: {
areaspline: {
marker: {
fillColor: themeColors.secondaryBackground,
lineColor: null,
lineWidth: 2,
radius: 3,
symbol: 'circle',
}
}
},
title: { text: null },
xAxis: {
categories: ['first', 'second', 'third'],
crosshair: {
color: Highcharts.color(themeColors.lightGray).setOpacity(.5).get('rgba'),
width: 12
},
labels: {
style: {
color: themeColors.secondaryText,
fontSize: '12px'
}
},
lineColor: themeColors.lightGray,
tickColor: themeColors.lightGray,
tickWidth: 0,
},
yAxis: {
gridLineColor: themeColors.lightGray,
labels: {
align: 'left',
step: 2,
style: {
color: themeColors.secondaryText,
fontSize: '12px'
},
x: 0,
y: 12,
},
lineColor: themeColors.lightGray,
tickColor: themeColors.lightGray,
title: { text: null },
},
};
series.forEach((s,i)=>{
s.fillColor = {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.color(colors[i]).setOpacity(0.1).get('rgba')],
[1, Highcharts.color(colors[i]).setOpacity(0).get('rgba')]
]
};
});
options.series = series;
Highcharts.chart('container',options);
})([
{ name: 'a', data:[1,4,2] },
{ name: 'b', data:[3,1,2] }
]);
jsFiddle: https://jsfiddle.net/mtowj6ng/
Thanks!!

Answer 1

You can set min and max of the axis.
xAxis: {
categories: ['first', 'second', 'third'],
min: 0.5,
max: 1.5,
If you have 3 categories, the axis range will be 0 - 2, so you can increase the min and decrease the max in the amount of 0.5 (the middle of the category).
You can also do it dynamically by updating the xAxis with xAxis.update on chart load.
chart: {
events: {
load: function () {
const min = Math.min.apply(null, this.series[0].xData)
const max = Math.max.apply(null, this.series[0].xData)
this.xAxis[0].update({
min: min + 0.5,
max: max - 0.5
})
}
}
},
You can also do it before you render the chart.
Set yAxis.showFirstLabel to false.
example: https://jsfiddle.net/bbd3pu9j/