angularhighchartsangular-highcharts

Higcharts spline lineargradient when line is flat not drawing line


Good morning, I'm facing this problem using HighCharts in an angular application. We are trying to draw a graph which is supposed to be changing over time, but at the beggining it's flat, you can take this as an example: https://highcharts-angular-basic-line-y7uwai.stackblitz.io

as you can see when the graph is flatten the line isn't drawn using a linear gradient. Why is this happening? Is it because when there isn't any progression no linear gradient can be drawn?

What's even stranger is that when I don't use the types offered by the library and I insert an object as any type in the highchart component it seems to work when setting the linearGradient as an array:

color: {
    linearGradient: [0,0,0,300],
    stops: [
        [0, "#66CC00"],
        [1, "#cc0019"],
    ],
}
      

enter image description here

any help with this is highly appreciated.


Solution

  • This is a direct issue in the engines we can not fix: https://github.com/highcharts/highcharts/issues/1677 (reported as radial gradient, but it's a general issue with gradients).

    As you noticed, defining gradient as an array don't cause such an issue. It is because start/end positions are differently calculated in that case - they have to be declared as pixels on the chart, not as a range of 0 to 1 as in the case of gradient defined as an object.

    Based on the following example, 400 means 400px:

    Highcharts.chart('container', {
      series: [{
        type: 'line',
        color: {
          linearGradient: [0, 0, 400, 0], // x1: 0, y1: 0, x2: 400, y2: 0
          stops: [
            [0, '#ff0000'],
            [1, '#0000ff']
          ]
        },
        data: [1, 1, 1, 1]
      }]
    });
    

    It is possible to use linear gradients defined as an object, but it needs of overwriting the default gradientUnits to the userSpaceOnUse - which will represent values as pixels as well.

    import { Component } from '@angular/core';
    import * as Highcharts from 'highcharts';
    
    interface LinearGradientColorObject {
      x1: number;
      y1: number;
      x2: number;
      y2: number;
      gradientUnits: string;
    }
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
    })
    export class AppComponent {
      Highcharts: typeof Highcharts = Highcharts;
    
      chartOptions: Highcharts.Options = {
        series: [
          {
            type: 'line',
            color: {
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 400,
                y2: 0,
                gradientUnits: 'userSpaceOnUse',
              } as LinearGradientColorObject,
    
              stops: [
                [0, '#ff0000'],
                [1, '#0000ff'],
              ],
            },
            data: [1, 1, 1, 1],
          },
        ],
      };
    }
    

    Demo TS: https://stackblitz.com/edit/highcharts-angular-line-1qpecs?file=src%2Fapp%2Fapp.component.ts

    Demo JS: https://jsfiddle.net/BlackLabel/p4y1br2e/

    Article about colors in Highcharts:

    https://www.highcharts.com/docs/chart-design-and-style/colors