Untitled
  1. new Vue({
  2. el: "#app",
  3. data() {
  4. return {
  5. series: [{
  6. name: 'Likes',
  7. data: [0.1, 3, 10, 9, 29, 19, 22, 9, 12, 7000],
  8. color: "#FFF" // serie color
  9. }],
  10. chartOptions: {
  11. chart: {
  12. height: 600,
  13. type: 'bar',
  14. foreColor: '#FFFFFF88',
  15. fontFamily: 'Montserrat, sans-serif',
  16. toolbar: {
  17. show: false
  18. },
  19. },
  20. tooltip: {
  21. intersect: false, // Tooltip only shows when mouse "intersects" the point
  22. shared: true // Usually set to false when intersect is true
  23. },
  24. plotOptions: {
  25. bar: {
  26. horizontal: true,
  27. /* rangeBarOverlap: true, */
  28. borderRadius: 2,
  29. barHeight: '20',
  30. },
  31. },
  32. stroke: {
  33. width: 0,
  34. curve: 'smooth'
  35. },
  36.  
  37. fill: {
  38. type: 'gradient',
  39. colors:['#FFF'],
  40. gradient: {
  41. shade: 'dark',
  42. shadeIntensity: 1,
  43. type: 'vertical',
  44. gradientToColors: [ '#000'],
  45. opacityFrom: 1,
  46. opacityTo: 1,
  47. stops: [0, 100,100,100]
  48. },
  49. },
  50. yaxis: {
  51. min: 0,
  52. max: 100,
  53. lines: {
  54. show: false,
  55. },
  56. },
  57. xaxis: {
  58. min: 0,
  59. max: 500,
  60. color:'#FFF',
  61. lines: {
  62. show: false,
  63. },
  64. },
  65. },
  66. }
  67. },
  68.  
  69. components: {
  70. VueApexCharts
  71. }
  72. })
Pasted 2026-05-03 09:50:49

Short link: