brooklara
Posts: 2
Joined: Sun Jul 24, 2022 3:47 am

selecting legends custom function in highcharts angular

Hi guys ,
I've been working on the highcharts angular and I got stuck in a logic where I can't find a way. If anyone can help me it will be very helpful.

HTML FILE

Code: Select all

       <highcharts-chart
       id="container"
       [Highcharts]="Highcharts"
       [options]="chartOptions"
       style="width: 100%; height: 400px; display: block;"
     >
     </highcharts-chart>
TS File

Code: Select all

chartoptions:Highchart.options
      chartOneRender() {
        this.chartoptions = {
        title : {
          text: "Chsart1",
        },
        exporting : {
          sourceWidth: 1500,
          sourceHeight: 300,
          scale: 1,
          enabled: true,
          buttons: {
            contextButton: {
              menuItems: ["viewFullscreen", "downloadCSV", "downloadPNG", "downloadPDF"],
              theme: {
                stroke: '#adaaaa00',
                fill: '#adaaaa00',
              },
              y: 10,
              x: 0,
            },
            custom: this.buttonClicker(optionchart)
          }
        },
          series : [
            {
              name: "s1",
              type: 'column',
              data:  [20,30,40,50]
              visible: true,
            }, {
              name: "s2",
              type: 'column',
              data: [90,98,76,54],
              visible: false,
            }, {
              name: "s3",
              type: 'column',
              data: [67,78,89,54],
              visible: false,
            },
            {
              name: "s4",
              type: 'column',
              data: [89,78,65,45],
              visible: false,
            },
            {
              name: "s5",
              type: 'column',
              data: [78,56,90,98],
              visible: false,
            }
          ],
          }
      }




      buttonClicker(chartOptions: any) {
        var button = {
          y: 10,
          x: -630,
          text: 'Select All',
          theme: {
            stroke: '#000',
            states: {
              hover: {
                stroke: '#298AFC',
                fill: '#fff'
              },
              select: {
                stroke: '#298AFC',
                fill: '#fff'
              }
            }
          },
          onclick: () => {
            this.chartOptions.series.update({
              visible:true
            })
            this.chartOneRender()
        }

        return button
      }

In the above file there is a function called buttonClicker() I want to select all the legends while clicking the button. If anyone knows any solution help me in this please.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: selecting legends custom function in highcharts angular

Hi there,

The main issue I can see is that you are not iterating over all available series.

Your reference points to series, which is an array. Please change that to a JS loop (i.e forEach loop), and then on every series call the update method and set visibility to true on them.

If that won't resolve your issue, please recreate it in an online editor such as Codesandbox or Stackblitz so that I can work on a solution in your project.

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”