Change font size of chart in apexchart

Admin 1
Viewed 8031

how can I increase the font size of the donut chart created using apexchart.

Here is the image

chart

<template>
  <section>
    <v-card raised>
      <v-card-title class="blue--text">Requests Overview</v-card-title>
      <apexchart width="530" type="donut" :options="options" :series="newSeries" />
    </v-card>
  </section>
</template>

<script>
import apexchart from "vue-apexcharts";

export default {
  components: {
    apexchart
  },
  data() {
    return {
      series: [],
      options: {
        height: 180,
        width: "100%",
        labels: [
          "Pending Requests",
          "Approved Requests",
          "Rescheduled Requests"
        ],
        //colors can be styled using hex code only
        colors: ["#54D52A", "#2A54D5", "#D52A54"],
      }
    };
  }
};
</script>

BTW, I did not put all the code here this is just the snippet.

apexcharts vuejs2 vue.js javascript
1 Answers

i'm not sure witch part of chart do you want to change the font size(data Labels that mean numbers in chart like 35.5% or Legends that mean name of chart parts that shows on top right of your image like "Pending Requests" and so)

BTW if you want to change font size of data labels you can do it like this:

options: {
         height: 180,
         width: "100%",
         dataLabels: {
              enabled: true,
              style: {
                fontSize: "140px",
                fontFamily: "Helvetica, Arial, sans-serif",
                fontWeight: "bold"
              }
            },
         labels: [
              "Pending Requests",
              "Approved Requests",
              "Rescheduled Requests"
            ],
            //colors can be styled using hex code only
         colors: ["#54D52A", "#2A54D5", "#D52A54"],
}

and if you want to change font size of Legends:

options: {
        height: 180,
        width: "100%",

        legend: {
          fontSize: "32px"
        },
        labels: [
          "Pending Requests",
          "Approved Requests",
          "Rescheduled Requests"
        ],
        //colors can be styled using hex code only
        colors: ["#54D52A", "#2A54D5", "#D52A54"] 
}

hope it helps you ;)

user_87639850
Related