CODEWITHSUNDEEP
javascriptvue.jsvuejs2apexcharts
user13766435
user13766435

Reputation:

Change font size of chart in apexchart

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.

Upvotes: 3

Views: 19826

Answers (1)

Ali Hosseini
Ali Hosseini

Reputation: 959

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 ;)

Upvotes: 16

Related Questions