How to use graphics.js with Angular 6? #8

Activity

1. loki20beta commented on Aug 3, 2018

   

   loki20beta

   on Aug 3, 2018

   Contributor

   More actions

   @abudarevsky we will look into it and get back to you
2. Shestac92

   self-assigned this

   on Aug 7, 2018
3. Shestac92 commented on Aug 7, 2018

   

   Shestac92

   on Aug 7, 2018

   More actions

   @abudarevsky
   Unfortunately, the current version of AnyChart doesn't provide typedefs for pure GraphicsJS which functions and methods are available via acgraph.***(). Now you can use graphicsJS only as a part of AnyChart library. You should include anychart-base.min.js and access to graphics methods and functions via anychart.graphics.***().
   Meanwhile, our team prepares additional index.d.ts for pure GraphicsJS.
   We will notify you when the update becomes available.
4. Shestac92 commented on Sep 27, 2018

   

   Shestac92

   on Sep 27, 2018

   More actions

   @abudarevsky
   We are glad to notify that we have prepared typedefs for graphicsJS!
   You can download the current version of graphicsJS.d.ts by this link.

   Here are few lines how to use the graphicsJS in the Angular app:

   stage: acgraph.vector.Stage = null;
   ngOnInit() {
     this.stage = acgraph.create(this.container.nativeElement);
     this.stage.circle(50, 50, 45);
   }
   
5. arunmmanoharan commented on Oct 22, 2018

   

   arunmmanoharan

   on Oct 22, 2018

   More actions

   @Shestac92 Does the link for the ts file work?
6. Shestac92 commented on Oct 23, 2018

   

   Shestac92

   on Oct 23, 2018

   Last edited by Shestac92

   More actions

   @a2441918 Please, use this link to get the latest graphics.d.ts
7. jchatkinson commented on Dec 29, 2018

   

   jchatkinson

   on Dec 29, 2018

   More actions

   @Shestac92 the link seems to be broken
8. Shestac92 commented on Dec 29, 2018

   

   Shestac92

   on Dec 29, 2018

   More actions

   @jchatkinson
   Thank you for pointing me at this fact!
   Very soon I will provide the correct link.
10. Shestac92 commented on Sep 16, 2019

    

    Shestac92

    on Sep 16, 2019

    More actions

    @pouya-daneshvar-freelands-it
    Use the link to download the index.d.ts file for GraphicsJS.
11. vincent1981 commented on Jun 22, 2020

    

    vincent1981

    on Jun 22, 2020

    More actions

    Any news on this? both of links are broken!
12. decfrr commented on Nov 5, 2023

    

    decfrr

    on Nov 5, 2023

    More actions

    The last link mentioned is http://api.anychart.stg/si/8.3.0/graphics.d.ts, but I was able to download the d.ts file by replacing .stg with .com.
13. mithunbabbira commented on Oct 10, 2026

    

    mithunbabbira

    on Oct 10, 2026

    More actions

    @abudarevsky Update: The TypeScript definition file (graphics.d.ts) is now available at the stable URL:

    https://cdn.anychart.com/releases/v8/graphics.d.ts

    For Angular 6+ integration, the recommended approach:

    1. Download the .d.ts file from the URL above
    2. Import it in your polyfills.ts or a dedicated globals.d.ts:

       /// <reference types="./graphics.d.ts" />

    3. In your Angular component:

       import * as acgraph from "acgraph.vector";  // or use anychart
       
       // The safer approach is to use anychart.graphics:
       import * as anychart from "anychart";
       
       stage: anychart.graphics.Graph = null;
       
       ngOnInit() {
         this.stage = anychart.graphics.create(this.container.nativeElement);
         this.stage.circle(50, 50, 45);
       }

    Note: Pure GraphicsJS standalone usage has limited Angular support. The AnyChart library (which wraps GraphicsJS) provides better TypeScript definitions and Angular integration. Consider using anychart-angular package for Angular projects.