Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

90
Visualizações
selecting legends using customized button in highcharts angular

Hi guys I've been working on the highcharts 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

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

TS FILE


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 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.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

In your code this.chartOptions.series refers to all series in the chart. You need to iterate on all series and update() each of them separately.

Simplified demo: https://jsfiddle.net/BlackLabel/oL45egh8/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#update

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda