Odtnhj

Use the following chart as an example.

https://jsfiddle.net/albertwang/rqekhf9s/1/

 legend: {
 symbolHeight: 20,
 ......

I want to change the height of both of these two legend symbols. However, I can only change the first one by using legend.symbolHeight.

Thank you for your help.

You cannot change the legend size of the spline series, because highcharts uses the same spline symbol in the legend as in the series. You can change the width, and the line will get longer, but height has no effect. If the height was also changed, the legend would not be identical to the series anymore. Imagine if you had 2 series, both with round symbols where one of them is larger than the other. The only way to tell these two apart in the legend, would be the size of the symbol.

There is no setting you can set to achieve what you want, your only option would be to wrap the function that draws the legend symbols.

How to wrap functions in highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

The function that draws legend symbols: https://github.com/highcharts/highcharts/blob/master/js/parts/Legend.js#L1277

If you are going to do this, be aware that you can wrap this function for different series types, or all of them.

To acheieve the wanted result, you can use a simple workaround. Create additional empty spline series with the marker like you want and id property. Next, use linkedTo in basic spline series:

series: [
 name: 'Rainfall',
 type: 'column',
 yAxis: 1,
 data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
 tooltip: 
 valueSuffix: ' mm'
 

, 
 type: 'spline',
 linkedTo: 'fakeSeries',
 data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
 tooltip: 
 valueSuffix: '°C'
 
, 
 type: 'spline',
 marker: 
 radius: 10,
 symbol: 'circle'
 ,
 color: 'black',
 name: 'Temperature',
 id: 'fakeSeries'
]

Live demo: https://jsfiddle.net/BlackLabel/8cmurd3q/

API:

https://api.highcharts.com/highcharts/series.spline.linkedTo

https://api.highcharts.com/highcharts/series.spline.marker.symbol