Need legends in high chart to be square shape

Question

I have implemented spline chart component using angular 4 . I need legend icons to be displayed as square but it is appearing as circle. One of the reasons why i feel it is circle is because , I have defined the marker as circle. It displays the circle for the plotted lines as well as legend icons. I need it to be displayed as circle for plotted lines but square for legends

I have tried the following but it doesn't seem to apply. Could somebody tell me why it isn't applying.

legend: {
          symbolRadius: 0,
          symbolHeight: 20,
          symbolWidth: 20
        }

It looks like this at present

Need it to look like this

The complete code is below

export class SplineChartComponent implements OnChanges {
    public options: any;
    chart: any;

    @Input() public series: any;
    @Input() public yaxisdata: any;

    @Input() public selectedRating: string = '';

    constructor() {
        this.options = {
            credits: {
                enabled: false
            },
            chart: {
                type: 'spline',
            },
             title:{
                 text:''
                },
                subtitle:{
                    text:''
                },
            legend: {
                align: 'right',
                verticalAlign: 'bottom',
                layout: 'horizontal',
                margin: 25,
                itemMarginTop: 0,
                symbolRadius: 0,
                symbolHeight: 20,
                symbolWidth: 20
            },
            yAxis: {
                categories: [
                ],
                allowDecimals: false,
            },
            tooltip: {

            },
            plotOptions: {

                series: {
            allowPointSelect: true
                  },
                spline: {
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 3
                        }
                    },
                    marker: {
                        enabled: true,
                         symbol: 'circle'

                    },
                }
            },
            series: [
                {
                 type: 'spline',
                 showInLegend: false
                }
            ]
        };
    }

Did you see this? https://stackoverflow.com/questions/27510810/highcharts-make-the-legend-symbol-a-square-or-rectangle — David, Mar 18 '18 at 12:59
Yes. I did see this and applied legend: { symbolRadius: 0, symbolHeight: 20, symbolWidth: 20 } . But it doesnt seem to work on spline chart. It works fine with the historgram — Tom, Mar 18 '18 at 13:02
@Tom I was talking the accepted answer (fake serie), as I assumed you wanted only the legend to be square, not the plotted symbols. What you have works with `column` charts, not for `line` or `spline` charts. If you want everything to be square, the @Pranay Rana's answer should work — David, Mar 18 '18 at 13:11
Yes i need only the legend to be square, not the plotted symbols. Pranays answer converts everything to square — Tom, Mar 18 '18 at 13:16
So have a look at the other SO I posted, that was a similar problem — David, Mar 18 '18 at 13:35
Possible duplicate of [Highcharts: Make the legend symbol a square or rectangle](https://stackoverflow.com/questions/27510810/highcharts-make-the-legend-symbol-a-square-or-rectangle) — David, Mar 18 '18 at 13:35
You just mentioned earlier that it What you have works with column charts, not for line or spline charts. So how can that answer my question. As i mentioned i tried legend: { symbolRadius: 0, symbolHeight: 20, symbolWidth: 20 } but it doestn work on spline chart. This was taken from that post — Tom, Mar 18 '18 at 13:50
@Tom check http://jsfiddle.net/ahs3ebwk/ using **First option** of https://stackoverflow.com/a/29477573/3898339 — Deep 3015, Mar 18 '18 at 18:01

Pranay Rana · Accepted Answer · 2018-03-19T10:05:53.323

5

In Angualr2/ Typescript you have to do as below

   @ViewChild('chartDiv') chartDiv: ElementRef;//get chart element
   options: Options;//assign this options to chart 

   this.options = {

      chart: {
        events: {
          load: () => {
            const elements = document.querySelectorAll('.highcharts-legend-item path');
            for (let i = 0; i < elements.length; i++) {
              elements[i].setAttribute('stroke-width', '10');

            }
          },
          redraw: () => {
            //use below if you have more then one chart and want to update specific chart only
            //  const elements = this.chartDiv.nativeElement.querySelectorAll('.highcharts-legend-item path');
            const elements = document.querySelectorAll('.highcharts-legend-item path');
            for (let i = 0; i < elements.length; i++) {
              elements[i].setAttribute('stroke-width', '10');
            }
          },
        }
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yAxis: {
        title: {
          text: 'Temperature (°C)'
        }
      },
      legend: {
        enabled: true,
      },
      series: [{
        name: 'Tokyo',
        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]
      }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
      }]
    };

    this.chart = new Chart(this.options);

I tried adding event for chart , and it works for me

var chart = Highcharts.chart('container', {
chart: {
    events: {
        load: function () { 
        $(".highcharts-legend-item path").attr('stroke-width', 10);
    },
    redraw: function () {
        $(".highcharts-legend-item path").attr('stroke-width', 10);
    }
    }
}

please check out full demo : working Demo, it working for me , might help you

you can make is square by adding marker : {symbol : 'square',radius : 12 }, to your series settings.

Example :

series: [{
        name: 'Tokyo',
         marker : {symbol : 'square',radius : 12 },
        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]
    }, {
        name: 'New York',
        marker : {symbol : 'square',radius : 12 },
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, 
    }]

Working Demo

edited Mar 19 '18 at 10:05

answered Mar 18 '18 at 13:05

Pranay Rana

175,020
35
237
263

Hi Pranay, I want the plotted lines to be circle and the legends to be square. I tried this option earlier which was turning everything to square – Tom Mar 18 '18 at 13:15
@Tom - i tried all option, and it seems like that legend and line plot symbol are both attached with each other that means you cannot have dirrent symbol for them ... – Pranay Rana Mar 18 '18 at 13:50
@Tom - can you please try out updated answer ... is that help ?? – Pranay Rana Mar 18 '18 at 15:21
Hi Pranay, I am using angular. – Tom Mar 18 '18 at 23:37
@Tom - i also use angular , you can convert code in angular..let me know if you need my help – Pranay Rana Mar 19 '18 at 05:23
Hi Rana, your proposed answer contains jquery. I can see that you are manipulating chart attributes. Not sure how it is fine in angular. I am trying to avoid using jwuery just for this bit of functionality – Tom Mar 19 '18 at 06:50
@Tom - can you please paste here which part you are not getting ..will try to convert it for you – Pranay Rana Mar 19 '18 at 06:53
Sorry what change have you made? I can still see jquery dollar in your answer – Tom Mar 19 '18 at 07:37
Thanks. Looking forward for it. – Tom Mar 19 '18 at 08:17
@Tom - updated my answer ..have look to it ...i did it in typescript – Pranay Rana Mar 19 '18 at 09:56
The events dont seem to be firing – Tom Mar 19 '18 at 11:20
When i put the piece of code on the retdraw method in my code it works – Tom Mar 19 '18 at 11:24
Thanks a ton. I shall mark your answer as it helped – Tom Mar 19 '18 at 11:28
@Tom - welcome, same here I went in much details to make it work , as I tried number of things at my end .. – Pranay Rana Mar 19 '18 at 11:29

Need legends in high chart to be square shape

1 Answers1