Transparent background

[PrimozRome]

Can a chart have transparent background? How to achieve it? I tried this but nothing gave me the desired result:

options: {
   chart: {
      background: 'transparent'
    }
}

options: {
   chart: {
      background: 'none'
    }
}

[wasifHafeez]

It is already transparent, and if you change the color, it changes, see here

so please describe your problem specifically, what and where you want to achieve this, include with the code which you are using, maybe your parent "div" has some background color, Plus in your code you were trying to add "chart" inside "options"

[PrimozRome]

@wasifHafeez thank a lot, got it !

[wasifHafeez]

Could you please share the link of the chart? Which you are trying to use.

@wasifHafeez thank a lot, got it !

Is the issue resolved?

[PrimozRome]

@wasifHafeez not quite. Just tested it and my result is white background... Here is my options object:

      options: {
        chart: {
          height: 100
        }
      }

Result is white background:

Maybe thing to note. I use Vue.js integration.

[wasifHafeez]

please share a live example, codepen or any other live example with Vue.js

[PrimozRome]

OK I need time to prepare codepen project. Basically here is my full code and it renders what you see on above picture with white background:

<template>
  <div id="statistics">
       <vue-apex-charts
            slot="value" 
            type="donut"
            class="chart"
            :options="options"
            :series="series"
       />
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  name: 'ProductStatistics',

  components: {
    VueApexCharts
  },

  data() {
    return {
      series: [44, 55, 41, 17, 15, 22],
      options: {
        labels: ['Automotive', 'Aerospace', 'Power & Energy', 'Industrial', 'Military', 'Civil Engineering'],
        chart: {
          height: 100
        }
      }
    }
  }
}
</script>

If I change to this I get:

  data() {
    return {
      series: [44, 55, 41, 17, 15, 22],
      options: {
        labels: ['Automotive', 'Aerospace', 'Power & Energy', 'Industrial', 'Military', 'Civil Engineering'],
        chart: {
          background: 'red',
          height: 100
        }
      }
    }
  }

[PrimozRome]

@wasifHafeez you can close this. It was my stupid mistake. Sorry for the inconvenience.

[rishabbahal9]

Use background: '0' At-least this works for me

chart: {
          type: 'bar',
          height: 350,
          background: '0'
        },