Light
Dark
System
Ask  Question

Apexchart vue type Donut

Hi, im try to use other types of apexcharts, im looking apexcharts vue home page,
but not work!

I cant see donut type.
can please tell me how i can add other type of apexchart





Thanks lot
Have a great day!!

metronic8 vue
G
Guest 1 year ago
Vue
9 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)

user
Lauris Stepanovs Author1 year ago
Hi,

All types of the apexcharts must work, could you please please attach the code which you are using?
G
Guest 1 year ago
HI Lauris

I use this code





Can you see my code?, when publish i cant see code i paste
user
Lauris Stepanovs Author1 year ago
No, I can't see it.

Please check Text formatting options to format your code correctly.
G
Guest 1 year ago
<div >
 <apexchart type="donut" :options="chartOptions" :series="series"></apexchart>
 </div>

user
Lauris Stepanovs Author1 year ago
Do you have any errors in your browser console?
G
Guest 1 year ago
Im using this sample

https://apexcharts.com/vue-chart-demos/pie-charts/simple-donut/
user
Lauris Stepanovs Author1 year ago
Just tried this example in the latest Metronic version and it works fine.

<apexchart
 type="donut"
 :options="chartOptions"
 :series="series"
 ></apexchart>



data: function () {
 return {
 series: [44, 55, 41, 17, 15],
 chartOptions: {
 chart: {
 type: "donut",
 },
 responsive: [
 {
 breakpoint: 480,
 options: {
 chart: {
 width: 200,
 },
 legend: {
 position: "bottom",
 },
 },
 },
 ],
 },
 };
 },

G
Guest 1 year ago
I will try!! thanks

Have a great day!!

sorry my bad english!!
user
Lauris Stepanovs Author1 year ago
Great happy I will close this case for now if you will have any questions leave a comment below and the case status will be changed to unresolved automatically.

Thank you!
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle