Area range legend icon does not match marker

Question

I have the following chart:

var highchartOptions = {
  "chart": {
    "type": "arearange",
    "renderTo": "chart-container"
  },
  "series": [{
    "marker": {
      "symbol": "square"
    },
    "tooltip": {
      "pointFormat": '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.formattedValue}</b><br/>'
    },
    "data": [{
        "low": 50.5,
        "high": 58.4,
        "formattedValue": "Between 50.5 and 58.4",
        "x": 0
      },
      {
        "low": 56.6,
        "high": 61.4,
        "formattedValue": "Between 56.6 and 61.4",
        "x": 1
      },
      {
        "low": 58,
        "high": 61.8,
        "formattedValue": "Between 58 and 61.8",
        "x": 2
      },
      {
        "low": 60.7,
        "high": 65.3,
        "formattedValue": "Between 60.7 and 65.3",
        "x": 3
      },
      {
        "low": 57.9,
        "high": 60.3,
        "formattedValue": "Between 57.9 and 60.3",
        "x": 4
      },
      {
        "low": 57,
        "high": 61.3,
        "formattedValue": "Between 57 and 61.3",
        "x": 5
      },
      {
        "low": 56.5,
        "high": 61.8,
        "formattedValue": "Between 56.5 and 61.8",
        "x": 6
      }
    ],
    "name": "Area"
  }]
};
var chart = new Highcharts.Chart(highchartOptions);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/5.0/highcharts.src.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/5.0/highcharts-more.src.js"></script>
<div id='chart-container' style="width: 800px; height: 500px;">
</div>

The problem is that while I have specified a marker with a square symbol I'm getting a circle in the legend. Is there a way to get the legend to match the marker?

If you just wanted to change all the symbols to square then this would do: `legend: { symbolRadius: 0 }`, I realize that is probably not what you are after, but rather a per series setting. That does not exist, you would need to configure each legend item seperatley, something like this: http://jsfiddle.net/ewolden/ycen9f3k/12/ — ewolden, Apr 11 '18 at 11:07
Possible duplicate: https://stackoverflow.com/questions/27510810/highcharts-make-the-legend-symbol-a-square-or-rectangle — João Menighin, Apr 11 '18 at 11:17
@JoãoMenighin this is not a duplicate because achieving what I want on line charts is trivial if you see https://jsfiddle.net/my51r39L/ this is for the arearange chart — apokryfos, Apr 11 '18 at 11:19

Kamil Kulig · Accepted Answer · 2018-04-12T08:15:22.587

1

Same issue is reported on github: https://github.com/highcharts/highcharts/issues/7771

Workaround proposed there modifies Highcharts core slightly:

Highcharts.seriesTypes.arearange.prototype.drawLegendSymbol = function(legend) {
  var lineWidth = this.options.lineWidth;
  this.options.lineWidth = 0;
  Highcharts.LegendSymbolMixin.drawLineMarker.apply(this, arguments);
  this.options.lineWidth = lineWidth;
}

edited Apr 12 '18 at 08:15

answered Apr 12 '18 at 08:05

Kamil Kulig

5,756
1
8
12

Wow this actually works (e.g. at https://jsfiddle.net/3onqd9L5/1/) If you want to update this answer and move the `Highcharts.seriesTypes.arearange.prototype.drawLegendSymbol` part here I can mark it as accepted. – apokryfos Apr 12 '18 at 08:10

score 0 · Answer 2 · answered Apr 11 '18 at 11:38

Well, I have something that kind of looks like what I want. But it feels very (very) hacky.

The idea is to create two line charts, one for the upper limit and one for the lower limit. These line charts should have the same color and symbol and also a line width of 0 (to not show the line between the marker in the legend). I then create the arearange series as before.

These 3 series should be linked.

The result technically works:

var highchartOptions = {
  "chart": {
"type": "line",
"renderTo": "chart-container"
  },
  "series": [{
    "color": 'rgba(0,0, 150, 1)',
  "marker": {
    "symbol": "diamond"
  },
  lineWidth: 0,
  "tooltip": { enabled: false },
  "data": [{
      "y": 50.5,
      "formattedValue": "Between 50.5 and 58.4",
      "x": 0
    },
    {
      "y": 56.6,
      "formattedValue": "Between 56.6 and 61.4",
      "x": 1
    },
    {
      "y": 58,
      "formattedValue": "Between 58 and 61.8",
      "x": 2
    },
    {
      "y": 60.7,
      "formattedValue": "Between 60.7 and 65.3",
      "x": 3
    },
    {
      "y": 57.9,
      "formattedValue": "Between 57.9 and 60.3",
      "x": 4
    },
    {
      "y": 57,
      "formattedValue": "Between 57 and 61.3",
      "x": 5
    },
    {
      "y": 56.5,
      "formattedValue": "Between 56.5 and 61.8",
      "x": 6
    }
  ],
  "name": "Area"
},
{
  lineWidth: 0,
  "color": 'rgba(0,0, 150, 1)',
  "marker": {
    "symbol": "diamond"
  },
  "linkedTo": ":previous",
  "data": [{
      "y": 58.4,
      "formattedValue": "Between 50.5 and 58.4",
      "x": 0
    },
    {
      "y": 61.4,
      "formattedValue": "Between 56.6 and 61.4",
      "x": 1
    },
    {
      "y": 61.8,
      "formattedValue": "Between 58 and 61.8",
      "x": 2
    },
    {
      "y": 65.3,
      "formattedValue": "Between 60.7 and 65.3",
      "x": 3
    },
    {
      "y": 60.3,
      "formattedValue": "Between 57.9 and 60.3",
      "x": 4
    },
    {
      "y": 61.3,
      "formattedValue": "Between 57 and 61.3",
      "x": 5
    },
    {
      "y": 61.8,
      "formattedValue": "Between 56.5 and 61.8",
      "x": 6
    }
  ],
  "name": "Area"
},
{
 "color": 'rgba(0,0, 150, 0.5)',
 "type": "arearange",
  "linkedTo": ":previous",
  "tooltip": {
    "pointFormat": '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.formattedValue}</b><br/>'
  },
  marker: {
   enabled: false,
    symbol: 'diamond'
  },      
  "data": [{
      "low": 50.5,
      "high": 58.4,
      "formattedValue": "Between 50.5 and 58.4",
      "x": 0
    },
    {
      "low": 56.6,
      "high": 61.4,
      "formattedValue": "Between 56.6 and 61.4",
      "x": 1
    },
    {
      "low": 58,
      "high": 61.8,
      "formattedValue": "Between 58 and 61.8",
      "x": 2
    },
    {
      "low": 60.7,
      "high": 65.3,
      "formattedValue": "Between 60.7 and 65.3",
      "x": 3
    },
    {
      "low": 57.9,
      "high": 60.3,
      "formattedValue": "Between 57.9 and 60.3",
      "x": 4
    },
    {
      "low": 57,
      "high": 61.3,
      "formattedValue": "Between 57 and 61.3",
      "x": 5
    },
    {
      "low": 56.5,
      "high": 61.8,
      "formattedValue": "Between 56.5 and 61.8",
      "x": 6
    }
  ],
  "name": "Area"
}
  ]
};
var chart = new Highcharts.Chart(highchartOptions);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/5.0/highcharts.src.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/5.0/highcharts-more.src.js"></script>
<div id='chart-container' style="width: 800px; height: 500px;">
</div>

There are obvious drawbacks to this i.e.:

You need 3 series instead of 1
You have to explicitly set colours for all 3 to match otherwise it looks strange.

This feels like a really bad solution so if anyone has better ideas then do let me know.

score 0 · Answer 3 · answered Jul 02 '21 at 15:29

Per this GitHub issue comment:

https://github.com/highcharts/highcharts/issues/7771#issuecomment-361981394

You can just replace the renderer:

Highcharts['seriesTypes'].arearange.prototype.drawLegendSymbol = 
Highcharts['seriesTypes'].line.prototype.drawLegendSymbol;

Area range legend icon does not match marker

3 Answers3