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

374
Visualizações
how i use the same legend for two different pie charts with apexcharts in Vue

Pie Charts to edit

I just need one LEGEND for these two charts, and that be reactive for both, how can I do?? I don't know if it is possible to connect the legend with any of the charts, programmatically way or something, with and "id" property or the same options for both charts...

<template>
  <div>
    <b-card title="Apexchart">
      <b-card-body>
        <b-row>
          <b-col cols="6">
            <apexchart type="pie" :options="chartOptions" :series="series" />
          </b-col>
          <b-col cols="6"> 
            <apexchart type="pie" :options="chartOptions" :series="series" />
          </b-col>
        </b-row>
      </b-card-body>
    </b-card>
  </div>
</template>

<script>
export default {
  name: "Chart",
   data() {
    return {
      series: [60, 5, 10, 10],
      chartOptions: {
        chart: {
          width: "100%",
          type: "pie",
        },
        labels: ["legend-1", "legend-2", "legend-3", "legend-4"], //just need one, for both charts
        legend: {
          position: "bottom",
          offsetY: 0,
          markers: {
            radius: 4,
          }
        },
        title: {
          text: "Title",
          align: "center",
          offsetX: 0,
          offsetY: 0,
        },
      },
    };
  },
};
</script>

PS: My English is awful, I know, but I try >:D

about 4 years ago · Juan Pablo Isaza
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