Highcharts: Make the Legend Symbol a Square or Rectangle

Highcharts: Make the legend symbol a square or rectangle

You can make a fake series as follows and provider marker to it.

$(function () {
var chart = new Highcharts.Chart({
    chart: {
    renderTo: 'container',
    type: 'line',
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            marker: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',

        //borderWidth: 0
    },

    series: [{

        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        showInLegend : false,

        marker:{enabled:false}

    },{
        name : "testing",
        data : {},
        marker : {symbol : 'square',radius : 12 }
    }
            ]
});
});

Working demo : DEMO

Need legends in high chart to be square shape

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

Change legend symbol in Column Chart in highcharts

I don't believe the Highchart's API offers the ability to customize the legend symbol with a bar chart. You can, however, modify the symbol after the chart is drawn.

   chart: {
        type: 'column',
        events: {
            load: function(event) {
                // modify the legend symbol from a rect to a line
                $('.highcharts-legend-item rect').attr('height', '2').attr('y', '10');
            }
        }   
    },

Fiddle here.

How to access legendSymbols and change their shape in HighCharts

You can use two series (one normal and one fake) with defined custom symbol. First should be hidden in legend. Then only what you need is use legendItemClick and call action.

http://jsfiddle.net/5m9JW/339/

Custom Highcharts legend symbol

You can use two series, connect them using linkedTo option, then for the main series, you can use image as symbol, for example:

$('#container').highcharts({
  series: [{
    data: [],
    id: 'main',
    marker: {
      symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
    }
  }, {
    linkedTo: 'main',
    data: [1, 3, -2, -4]
  }]
});

Demo: http://jsfiddle.net/hnc27nf2/

Screenshot:

Highcharts legend symbol sizes for scatter charts

You could do a translate on each chart.series to move them into the correct position before adjusting the width and height. Like this (JSFiddle example):

$(chart.series).each(function(){
    this.legendSymbol.translate((this.legendSymbol.width/2), ((this.legendSymbol.height/2)-4));
    this.legendSymbol.attr('width',8);
    this.legendSymbol.attr('height',8);
});

It does not fix the spacing that is left over between legend items from the original sizes, but at least each item is in position for their legend text.

There may be some more elegant ways to solve this.

---

Related Topics