Dashed line chart symbol for line chart is not coming for the legend items highcharts

Question

We are having a combination of areaspline and line chart in a single graph and the area chart markers are getting display as dots but the line chart which is customised as a dashed line chart is not showing the markers.

  const bitAreaChart = Highcharts.chart('kpiChartcontainer', {
                        chart: {
                           type: 'areaspline',
                            height: '312',
                            borderColor: '#FFFFFF',
                            borderWidth: 1,
                            borderRadius: 8,
                     
                        },
                        colors: colors,
                        title: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: { // don't display the dummy year
                                day: '%b-%y'
                            },
                           startOnTick: true,
                            endOnTick: true,
                            minorTickLength: 0,
                            tickLength: 0,
                            minPadding: 0,
                            maxPadding: 0,
                            style: {
                                textOverflow: 'none',
                                color: '#8C99A7'
                            },
                            labels: {
                              y: 23,
                              useHTML: true,
                            
                            },
                        },
                        
                        legend: {
                          itemDistance: 50,
                          itemMarginTop: 12,
                          itemStyle: {
                            color: '#2C3241',
                           
                            fontSize: '14px',
                            fontWeight: 'normal',
                            'line-height': '16px',
                            "textOverflow": 'none',
                            "margin-right": '50px'
                          },
                          symbolWidth: 10,
                          symbolHeight: 10                              
                        },
                         yAxis: [{
                          min: 0,
                          labels: {
                          
                            useHTML: true,
                            
                          }

                        } , {
                          min: 0,
                         
                          opposite: true,
                          labels: {
                         
                            useHTML: true,
                            
                          }

                        }],

                        tooltip: {
                            formatter: function(this: any) {
                                return this.series.name + " : " + Highcharts.numberFormat((this.y), 2, '.', ',');
                            }
                        },
                        exporting: {
                            buttons: {
                                contextButton: {
                                    enabled: false
                                }
                            }
                        },

                      
                        
                        series: seriesobj


        } as any);

the series object is something like this:

static KpiSeriesData = [
  

{
         // type: 'areaspline',
          name: 'BIT Value',
          data: [],
          marker: {
                    enabled: false,
                    symbol: 'circle',
                    linewidth: 4,
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
        }, {
         // type: 'areaspline',
          name: 'Relationship Cost',
          data: [],
          marker: {
                    enabled: false,
                    symbol: 'circle',
                    linewidth: 4,
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
        }, {
          type: 'line',
          dashStyle: 'shortdash',
          name: 'Quantum Score',
          yAxis: 1,
          data: [],
           customLineLegendSymbol: true,
          marker: {
            enabled: false,
            color: '#FF9D36',
           // radius: 2,
            states: {
                        hover: {
                            enabled: true
                        }
                    },
             lineWidth: 15
          },
             lineWidth: 5
        }             
]

But we want the dashed line symbol for the last legend like below image

What ever we change for this the symbol is not coming up. Please help us

Answer 1

I managed to show the dashed line in legend, just by increasing symbolWidth property and setting legendSymbol to 'rectangle' for the area series.

For example:

const seriesobj = [{
  legendSymbol: 'rectangle',
  ...
}, {
  legendSymbol: 'rectangle',
  ...
}, {
  ...
}]

const bitAreaChart = Highcharts.chart('kpiChartcontainer', {
  legend: {
    itemDistance: 50,
    itemMarginTop: 12,
    symbolWidth: 40,
    symbolHeight: 15,
    ...
  },
  series: seriesobj,
  ...
});

---

Live demo: https://jsfiddle.net/BlackLabel/c38forz5/

API Reference: https://api.highcharts.com/highcharts/series.areaspline.legendSymbol