Need Gauges In Angular

[appsoft]

We Need Gauges in Angular

[Adithya Menon]

@appsoft,

You can use a doughnut chart to create a gauge chart as shown in this StackBlitz example.

—
Adithya Menon
Team CanvasJS

[appsoft]

We are facing an error in that code and we need like an needle type

[Adithya Menon]

@appsoft,

The example shared seems to be working fine. Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with the sample data and a brief description of your exact requirement so that we can look into the code, run it locally to understand the scenario better and help you resolve?

—-
Adithya Menon
Team CanvasJS

[appsoft]

We need a gauges like an needle type and I have attached an sample image URL for your reference (https://imgur.com/a/bLvLgDm)

[Manoj Mohan]

@appsoft,

You can easily add needle to gauge chart as explained briefly in this thread. As briefed in the thread, adding a div and customizing it’s style to position it on top of chart should work in your case.

/*HTML*/
<div class="speedometer-needle" #needle></div>

/* CSS */
.speedometer-needle {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  top: 50%;
  left: 50%;
  transition: 0.3s ease-in-out;
  transform: translate(-50%, 0%) rotate(0deg);
  margin: 8px 0 0;
}

.speedometer-needle:before {
  content: '';
  position: absolute;
  border-radius: 5px;
  border: 6px solid transparent;
  border-right: 100px solid #000;
  left: -130px;
  top: 10px;
  width: 0;
  height: 0;
}

/* To position the needle above chart based on value */
this.renderer.setStyle(
      this.needle.nativeElement,
      'transform',
      'translate(-50%, 0%) rotate(' +
        parseInt(this.gauge.valueText.text) * (180 / this.gauge.maximum) +
        'deg)'
);

Please take a look at this Stackblitz project for complete working code.

—-
Manoj Mohan
Team CanvasJS