vivek.parmar
Posts: 2
Joined: Tue Nov 12, 2024 4:36 am

AreaSpline and Line Chart Combine

Hello Team,

I am working on a chart that combines an areaspline chart and three line charts. The areaspline data is in the form of an array [[timestampInMilliseconds, valueFromZeroToHundred]].
The three line charts are:
a) Maximum, which uses data [[timestampInMilliseconds, hundred]]
b) Minimum, which uses data [[timestampInMilliseconds, zero]]
c) Average, which uses data [[timestampInMilliseconds, average]] (average around 48)

These three lines create horizontal lines on the chart. The names of the lines (Max, Min, and Average) are displayed over the lines when there is less data. However, when there is more data, the names for the Average and Min lines no longer appear.

Can you explain what might be causing this behavior?
andrzej.b
Site Moderator
Posts: 576
Joined: Mon Jul 15, 2024 12:34 pm

Re: AreaSpline and Line Chart Combine

Hi Vivek,

It sounds like the issue could be related to the chart's data density and label overlap management. When there's more data, Highcharts might be automatically hiding some labels to avoid clutter and overlap. Here are a few things you can try to address this:
1. ​Data Labels Visibility​: Ensure that the dataLabels property is set correctly for each series. You can force the data labels to show by setting allowOverlap to true:

Code: Select all

dataLabels: {
        enabled: true,
        allowOverlap: true
    }
    
2. ​Label Placement​: Adjust the align and verticalAlign properties within dataLabels to position them more effectively:

Code: Select all

dataLabels: {
        align: 'right', // or 'left', 'center'
        verticalAlign: 'top', // or 'bottom', 'middle'
    }
    
3. ​zIndex​: Ensure that the zIndex for the line charts is set higher than the areaspline, so that their labels have priority in rendering.
4. ​Plot Options​: Review the plotOptions for line charts to ensure that the labels are not being inadvertently hidden:

Code: Select all

plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            }
        }
    }
5. ​Chart Size and Spacing​: Increase the chart size or adjust the margin and spacing properties to give the labels more space.
6. ​Responsive Rules​: Check if there are any responsive rules that might be affecting label visibility on different screen sizes.

If you implement these suggestions and still face issues, please reproduce the issue in an online editor and we can dig deeper into the specifics.
Andrzej
Highcharts Developer

Return to “Highcharts Usage”