An error occurred while loading the file. Please try again.
-
Rushikesh Padsala authored27ca663e
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Donut Chart with pattern</title> <link href="../../assets/styles.css" rel="stylesheet" /> <style> #chart { max-width: 380px; margin: 35px auto; } </style></head><body> <div id="chart"> <apexchart type=donut width=380 :options="chartOptions" :series="series" /> </div> <!-- Below element is just for displaying source code. it is not required. DO NOT USE --> <div id="html"> <div id="chart"> <apexchart type=donut height=380 :options="chartOptions" :series="series" /> </div> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script> <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script> <script> new Vue({ el: '#chart', components: { apexchart: VueApexCharts, }, data: { series: [44, 55, 41, 17, 15], chartOptions: { chart: { dropShadow: { enabled: true, color: '#111', top: -1, left: 3, blur: 3, opacity: 0.2 } }, stroke: { width: 0, }, labels: ["Comedy", "Action", "SciFi", "Drama", "Horror"], dataLabels: { dropShadow: { blur: 3, opacity: 0.8 } }, fill: { type: 'pattern', opacity: 1,
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
pattern: {
enabled: true,
style: ['verticalLines', 'squares', 'horizontalLines', 'circles', 'slantedLines'],
},
},
states: {
hover: {
enabled: false
}
},
theme: {
palette: 'palette2'
},
title: {
text: "Favourite Movie Type"
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
}
},
})
</script>
</body>
</html>