CODEWITHSUNDEEP
javascripthighcharts
apokryfos
apokryfos

Reputation: 40730

Area range legend icon does not match marker

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?

Upvotes: 4

Views: 460

Answers (3)

Brad
Brad

Reputation: 840

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;

Upvotes: 0

Kamil Kulig
Kamil Kulig

Reputation: 5826

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;
}

Upvotes: 1

apokryfos
apokryfos

Reputation: 40730

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.:

  1. You need 3 series instead of 1
  2. 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.

Upvotes: 0

Related Questions