Search code examples
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