Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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
<div id="chart">
<apexchart type="donut" :options="chartOptions" :series="series"></apexchart>
</div>


Thanks lot
Have a great day!!

metronic8 vue


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)


HI Lauris

I use this code

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

Can you see my code?, when publish i cant see code i paste



No, I can't see it.

Please check Text formatting options to format your code correctly.




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



Do you have any errors in your browser console?



Im using this sample

https://apexcharts.com/vue-chart-demos/pie-charts/simple-donut/



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",
},
},
},
],
},
};
},



I will try!! thanks

Have a great day!!

sorry my bad english!!



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!



Hi,

All types of the apexcharts must work, could you please please attach the code which you are using?


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  :(