Untitled
- new Vue({
- el: "#app",
- data() {
- return {
- series: [{
- name: 'Likes',
- data: [0.1, 3, 10, 9, 29, 19, 22, 9, 12, 7000],
- color: "#FFF" // serie color
- }],
- chartOptions: {
- chart: {
- height: 600,
- type: 'bar',
- foreColor: '#FFFFFF88',
- fontFamily: 'Montserrat, sans-serif',
- toolbar: {
- show: false
- },
- },
- tooltip: {
- intersect: false, // Tooltip only shows when mouse "intersects" the point
- shared: true // Usually set to false when intersect is true
- },
- plotOptions: {
- bar: {
- horizontal: true,
- /* rangeBarOverlap: true, */
- borderRadius: 2,
- barHeight: '20',
- },
- },
- stroke: {
- width: 0,
- curve: 'smooth'
- },
- fill: {
- type: 'gradient',
- colors:['#FFF'],
- gradient: {
- shade: 'dark',
- shadeIntensity: 1,
- type: 'vertical',
- gradientToColors: [ '#000'],
- opacityFrom: 1,
- opacityTo: 1,
- stops: [0, 100,100,100]
- },
- },
- yaxis: {
- min: 0,
- max: 100,
- lines: {
- show: false,
- },
- },
- xaxis: {
- min: 0,
- max: 500,
- color:'#FFF',
- lines: {
- show: false,
- },
- },
- },
- }
- },
- components: {
- VueApexCharts
- }
- })
Pasted 2026-05-03 09:50:49
Short link:
Short link: