javascripthighchartsangular-highcharts

How to make - - legend in 'areaspline' type high charts?

I already had look at Highcharts - How do I get dashed lines in legend . Its for "line" chart type my chart type is "areaspline" where I need dashed style legend "-- Legend" even below code events: {load: function(event) {$('.highcharts-legend-item rect').attr('height', '2').attr('y', '10');}} could bring '-'line legend but I am in need of "--" here is my fiddle http://jsfiddle.net/manjula_dhamodharan/4tejg3v6/2/

Solution

  • You can create mocked line series and link areaspline ones to them. Example:

      series: [{
    name: 'Tokyo',
    dashStyle: 'longdash',
    type: 'line',
    id: 'line1'
  }, {
    name: 'London',
    dashStyle: 'longdash',
    type: 'line',
    id: 'line2'
  }, {
    linkedTo: 'line1',
    name: 'Tokyo',
    ...

  }, {
    linkedTo: 'line2',
    name: 'London',
    ...
  }]

    Live demo: http://jsfiddle.net/BlackLabel/815vctmr/

    API Reference: https://api.highcharts.com/highcharts/series.line.linkedTo