I have been tasked with customizing a line chart that was not originally created by me. The application pulls data from a database and organizes each element by hour before displaying it on the chart. When you hover over a point, the interface looks like this:
My specific task is to highlight the area below with a different color (similar to an area chart):
This is the code snippet responsible for generating the chart:
var chart = Highcharts.stockChart('production-time-chart', {
... (code continues)
And here is the code used to add a series to the chart:
chart.addSeries({
... (code continues)
});
I have searched for solutions online, but many involve using two separate series to display different charts or follow a completely different approach to creating the chart. The closest solution I found involved adding the property "type: 'areaspline'" to the chart constructor, but this resulted in overwriting the style and hiding the points:
My objective is to incorporate color to the area below the data points while maintaining the original style and functionality of the chart. Please let me know if you require additional information to assist with this task.