init-from-attrs.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Init Chart from data attrs</title>
  8. <link href="../../assets/styles.css" rel="stylesheet" />
  9. <style>
  10. #chart {
  11. max-width: 650px;
  12. margin: 35px auto;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="chart" data-apexcharts data-options='{
  18. "chart": {
  19. "type": "line"
  20. },
  21. "series": [{
  22. "name": "Desktops",
  23. "data": [30, 41, 35, 51]
  24. }],
  25. "xaxis": {
  26. "categories": ["Jan", "Feb", "Mar", "Apr"]
  27. }
  28. }'>
  29. </div>
  30. <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  31. <script>
  32. window.Apex = {
  33. chart: {
  34. height: 350
  35. },
  36. stroke: {
  37. curve: "smooth"
  38. },
  39. dataLabels: {
  40. enabled: false
  41. }
  42. }
  43. ApexCharts.initOnLoad()
  44. </script>
  45. </body>
  46. </html>