Home Forums Chart Support Need Gauges In Angular

Need Gauges In Angular

Viewing 6 posts - 1 through 6 (of 6 total)
  • #38829

    We Need Gauges in Angular



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

    Adithya Menon
    Team CanvasJS


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



    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


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



    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.

    <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 */
          'translate(-50%, 0%) rotate(' +
            parseInt(this.gauge.valueText.text) * (180 / this.gauge.maximum) +

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

    CanvasJS Angular Speedometer Chart

    Manoj Mohan
    Team CanvasJS

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.