1

Hello I have the following design That I have to implement. I am using apexcharts as a chart library in my application .

required design

I could not find any gauge/indicator related information of apexchart while googling and now quite not sure weather it is possible to implement the chart as required design.

2 important elements on my design

  1. custom indicator
  2. rounded edges of the arc

Do you have any idea that could help me here ?

Thank You.

var options = {
  series: [44, 55, 41, 17, 15],
  chart: {
    type: "donut"
  },
  plotOptions: {
    pie: {
      startAngle: -90,
      endAngle: 90,
      offsetY: 10
    }
  },
  grid: {
    padding: {
      bottom: -80
    }
  },
  responsive: [
    {
      breakpoint: 480,
      options: {
        chart: {
          width: 200
        },
        legend: {
          position: "bottom"
        }
      }
    }
  ]
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
Sandesh Sapkota
  • 747
  • 1
  • 6
  • 18

1 Answers1

0

there is one in Echarts i use it before

https://echarts.apache.org/examples/en/editor.html?c=gauge-progress

Red bad coder
  • 53
  • 6
  • Instead of just linking a resource, add a summary of its important points in case the resource stops being hosted there in the future. – starball Oct 03 '22 at 05:45