How can I customize a GChart in Vue.js?

Question

Good evening. I am working on learning Vue.js and I want to make a basic charting website to practice and build skills. I am trying to customize my GChart. Current chart: 1. The first thing I am aiming to do is to customize the background color. The next thing I am looking to do is get rid of the label on the side, and lastly, although the chart says "you" above it that is not the chart's name. This is my code:

import { GChart } from "vue-google-charts";
export default {
  name: 'HelloWorld',
  components: {
    GChart
  },
  computed: {
    myStyles () {
      return {
        position: 'relative',
      }
    }
  },
  data () {
    return {
      chartData: [
        ['You', 'Percent'],
        ['Cute',     100],
      ],
      chartOptions: {
        chart: {
          title: 'Company Performance',
          subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        }
      }
    }
  }
}

#chart{
  padding:5px;
  width:60%;
  margin:auto;
  background-color:rgb(241, 241, 129);
}
#actualChart{
  margin:auto;
  height:300px;
  width:230px;
  background-color:rgb(241, 241, 129);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="chart">
    <h1>You</h1>
    <div id="actualChart">
    <GChart
    type="PieChart"
    :data="chartData"
    :options="chartOptions"
    :styles="myStyles"
  /> 
  </div>
  </div>

I have tried looking online and at the documentation but they either don't show it in Vue.js or they just show how to create a chart but not customize it. If there is a better way to chart in Vue, I am open to trying it. I eventually plan on allowing the user to submit data to create the chart and potentially pull data from an API. Thank you for taking the time to read this, and maybe answering it!

score 0 · Answer 1 · answered Jun 03 '22 at 13:11

The possible options for a PieChart can be found here.

For your use case it would be:

{
  "chartOptions": {
    "title": "Your Title",
    "backgroundColor": "#00cc00",
    "legend": "none"
  }
}

Also check the following resource, available in the README.md file of the npm package.

How can I customize a GChart in Vue.js?

1 Answers1