Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

377
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!