'How to make legend color show up in Highcharts for a line graph under certain conditions?

I'm exploring Highcharts and it seems like a very comprehensive package! I have a question regarding legend colors.

I notice that when I use a linear color gradient for a line, the color next to the legend (I believe it's called the symbolColor) may or may not show up, depending on the format I use:

1) symbolColor works fine: linearGradient: [ 00, 00, 00, 350 ]
2) symbolColor doesn't show up: linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }

I'd rather use the second format; it's easier and the first is not responsive.

Should the symbolColor always show up and this is an obscure issue/bug? Or am I doing something wrong? I also just noticed that if the marker is enabled in the plotOptions for series, symbolColor works fine with the second format. But I have many data points and don't want to use markers.

The fiddle graph has two lines -- purple and green -- and while the purple symbolColor using method (1) looks fine, you'll notice that the green symbolColor using method (2) doesn't show up.

https://jsfiddle.net/jwinkle/s6d9ah17/6/

highcharts


Solution 1:[1]

In your HTML file, add:

<script src="https://code.highcharts.com/maps/modules/map.src.js"></script>

Above your chart code add:

Highcharts.addEvent(Highcharts.Chart.prototype, 'render', function() {
    this.series.forEach(function(series) {
      if (series.legendLine) {
        var pathDef = series.legendLine.attr('d').split(' ');
        pathDef[5] = parseFloat(pathDef[2]) + 0.0001;
        series.legendLine.attr({
          d: pathDef
        });
      }
    })
  });

The fix is in adding a smidge to your path definition (you can test this by going into the svg path element in dev tools and changing the last number in the 'd' attribute to a float:

<path fill="none" d="M 0 11 L 16 11" ... ></path>

becomes:

<path fill="none" d="M 0 11 L 16 11.1" ... ></path>

The function above goes through each series and massages the line data adding the fractional value in the right place. Total hack. However why the line does not appear if it does have this fractional value, I don't know. I would also test this across browsers to see that it works consistently as it may not (I tested in Chrome).

Here is a somewhat related issue where I cribbed the fix: https://www.highcharts.com/forum/viewtopic.php?t=38588 (Most of it is addressing a completely different problem, but the legend lines did show up so I investigated why).

If you don't want to use the extra library, you could probably write a native js function to find the legend lines and manipulate them in the same way.

Solution 2:[2]

Here, you can find a nice explanation of the problem.

The difference results from the fact that Highcharts uses 'userSpaceOnUse' as a default value for gradientUnits if a gradient is defined as an array.

Highcharts source code:

// Keep < 2.2 kompatibility
if (isArray(gradAttr)) {
  (colorOptions as any)[gradName] = gradAttr = {
    x1: gradAttr[0] as number,
    y1: gradAttr[1] as number,
    x2: gradAttr[2] as number,
    y2: gradAttr[3] as number,
    gradientUnits: 'userSpaceOnUse'
  };
}

As a possible solution, you can set gradientUnits also for linearGradient defined as an object:

color: {
  linearGradient: {
    ...,
    gradientUnits: 'userSpaceOnUse'
  },
  ...
}

Live demo: http://jsfiddle.net/BlackLabel/yz6sagxj/

Or modify the paths very slightly so that they are not perfectly horizontal

chart: {
  events: {
    render: function() {
      this.series.forEach(function(series) {
        if (series.legendLine) {
          var pathDef = series.legendLine.attr('d').split(' ');
          pathDef[5] = parseFloat(pathDef[2]) + 0.0001;
          series.legendLine.attr({
            d: pathDef
          });
        }
      })
    }
  }
}

Live demo: http://jsfiddle.net/BlackLabel/L1kzg0cn/

Github thread: https://github.com/highcharts/highcharts/issues/1936

Solution 3:[3]

In addition to @Katharine's solution, here's another I discovered.

If I enable the marker in one series (setting the radius to 0) and then put the data in a second series which is linked to the previous, it works. (If I do it all in one series, there is again no legend color.)

series: [{
    name: 'purple', lineWidth: 3, color: {
        linearGradient: [ 00, 00, 00, 350 ],
        //linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1, },
        stops: [
            [0, 'purple'], // start 
            [1, 'black'] // end
        ], 
    }, 
    data: [ 100, 95, 80, 60, 35, 50, 20, 10, 3, 2, 30, 40, ],
},{
    marker: {
        enabled: true,
        radius: 0,
    },
    name: 'green', color: 'green', lineWidth: 3, 
},{
    linkedTo: ':previous',
    lineWidth: 3, color: {
        //linearGradient: [ 00, 00, 00, 350 ], 
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1, },
        stops: [
            [0, 'green'], // start 
            [1, 'black'] // end
        ], 
    }, 
    data: [ 100, 100, 95, 80, 60, 35, 50, 20, 10, 3, 2, 30, ],
}],

Here's the "fixed" fiddle: https://jsfiddle.net/jwinkle/wztq78n1/6/

I reported the original issue as a possible bug to Highcharts, and they confirmed that it's an SVG rendering problem out of their control.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Katharine Osborne
Solution 2 ppotaczek
Solution 3

Related Questions