An error occurred while loading the file. Please try again.
circle-custom-angle.html 2.64 KiB
<!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>Circle Custom Angle</title>
  <link href="../../assets/styles.css" rel="stylesheet" />
  <style>
    #chart {
            max-width: 650px;
            margin: 35px auto;
        .apexcharts-legend text {
            font-weight: 900;
    </style>
</head>
<body>
  <div id="chart">
    <apexchart type=radialBar height=350 :options="chartOptions" :series="series" />
  </div>
  <!-- Below element is just for displaying source code. it is not required. DO NOT USE -->
  <div id="html">
    &lt;div id="chart">
      &lt;apexchart type=radialBar height=350 :options="chartOptions" :series="series" />
    &lt;/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: [76, 67, 61, 90],
        chartOptions: {
          plotOptions: {
            radialBar: {
              offsetY: -30,
              startAngle: 0,
              endAngle: 270,
              hollow: {
                margin: 5,
                size: '30%',
                background: 'transparent',
                image: undefined,
              dataLabels: {
                name: {
                  show: false,
                value: {
                  show: false,
}, colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'], labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'], legend: { show: true, floating: true, fontSize: '16px', position: 'left', offsetX: 170, offsetY: 10, labels: { useSeriesColors: true, }, markers: { size: 0 }, formatter: function(seriesName, opts) { return seriesName + ": " + opts.w.globals.series[opts.seriesIndex] }, itemMargin: { horizontal: 1, } }, responsive: [{ breakpoint: 480, options: { legend: { show: false } } }] } }, }) </script> </body> </html>