How to use highchart 3d with angular 5?












1















I am just adding to app.module.ts



import { ChartModule } from 'angular-highcharts';


and to import



ChartModule


Now i want to use highchart-3d
how can i do that?
Can i customize the chart to make it something like morris.js donut chart?










share|improve this question



























    1















    I am just adding to app.module.ts



    import { ChartModule } from 'angular-highcharts';


    and to import



    ChartModule


    Now i want to use highchart-3d
    how can i do that?
    Can i customize the chart to make it something like morris.js donut chart?










    share|improve this question

























      1












      1








      1








      I am just adding to app.module.ts



      import { ChartModule } from 'angular-highcharts';


      and to import



      ChartModule


      Now i want to use highchart-3d
      how can i do that?
      Can i customize the chart to make it something like morris.js donut chart?










      share|improve this question














      I am just adding to app.module.ts



      import { ChartModule } from 'angular-highcharts';


      and to import



      ChartModule


      Now i want to use highchart-3d
      how can i do that?
      Can i customize the chart to make it something like morris.js donut chart?







      angular charts highcharts






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 13 '17 at 13:34









      Md. SamsuzzohaMd. Samsuzzoha

      227




      227
























          2 Answers
          2






          active

          oldest

          votes


















          1














          You can check add-highcharts-modules from npm packages.




          Any other modules like highcharts-3d, highcharts-exporintg and etc. can be also added in @NgModule after main chart module




          ...
          @NgModule({
          ...
          imports: [
          BrowserModule,
          ChartModule.forRoot(
          require('highcharts'),
          + require('highcharts/highchart-3d'),
          + require('highcharts/modules/exporting')
          ],
          })


          Check http://plnkr.co/edit/sz6OfccvAetQcBX8KFXy?p=preview .



          If you are facing problem then add live example






          share|improve this answer
























          • wow great. thanks man.

            – Md. Samsuzzoha
            Nov 13 '17 at 15:05











          • Hi, when I did this to build for production, this error came out: ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'ChartModule' was called.

            – Afeez Aziz
            May 21 '18 at 2:13



















          1














          This approach also works :



          import * as highcharts3d from 'highcharts/highcharts-3d';
          export function highchartsFactory() {
          const hc = require('highcharts/highstock');
          highcharts3d(hc);
          return hc;
          }

          @NgModule({
          imports: [
          ChartModule
          ],
          providers: [
          {
          provide: HighchartsStatic,
          useFactory: highchartsFactory //this will take care of inlcuding highcharts 3d module
          }
          ]
          });


          For more details : https://github.com/gevgeny/angular2-highcharts/issues/193






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47265585%2fhow-to-use-highchart-3d-with-angular-5%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            You can check add-highcharts-modules from npm packages.




            Any other modules like highcharts-3d, highcharts-exporintg and etc. can be also added in @NgModule after main chart module




            ...
            @NgModule({
            ...
            imports: [
            BrowserModule,
            ChartModule.forRoot(
            require('highcharts'),
            + require('highcharts/highchart-3d'),
            + require('highcharts/modules/exporting')
            ],
            })


            Check http://plnkr.co/edit/sz6OfccvAetQcBX8KFXy?p=preview .



            If you are facing problem then add live example






            share|improve this answer
























            • wow great. thanks man.

              – Md. Samsuzzoha
              Nov 13 '17 at 15:05











            • Hi, when I did this to build for production, this error came out: ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'ChartModule' was called.

              – Afeez Aziz
              May 21 '18 at 2:13
















            1














            You can check add-highcharts-modules from npm packages.




            Any other modules like highcharts-3d, highcharts-exporintg and etc. can be also added in @NgModule after main chart module




            ...
            @NgModule({
            ...
            imports: [
            BrowserModule,
            ChartModule.forRoot(
            require('highcharts'),
            + require('highcharts/highchart-3d'),
            + require('highcharts/modules/exporting')
            ],
            })


            Check http://plnkr.co/edit/sz6OfccvAetQcBX8KFXy?p=preview .



            If you are facing problem then add live example






            share|improve this answer
























            • wow great. thanks man.

              – Md. Samsuzzoha
              Nov 13 '17 at 15:05











            • Hi, when I did this to build for production, this error came out: ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'ChartModule' was called.

              – Afeez Aziz
              May 21 '18 at 2:13














            1












            1








            1







            You can check add-highcharts-modules from npm packages.




            Any other modules like highcharts-3d, highcharts-exporintg and etc. can be also added in @NgModule after main chart module




            ...
            @NgModule({
            ...
            imports: [
            BrowserModule,
            ChartModule.forRoot(
            require('highcharts'),
            + require('highcharts/highchart-3d'),
            + require('highcharts/modules/exporting')
            ],
            })


            Check http://plnkr.co/edit/sz6OfccvAetQcBX8KFXy?p=preview .



            If you are facing problem then add live example






            share|improve this answer













            You can check add-highcharts-modules from npm packages.




            Any other modules like highcharts-3d, highcharts-exporintg and etc. can be also added in @NgModule after main chart module




            ...
            @NgModule({
            ...
            imports: [
            BrowserModule,
            ChartModule.forRoot(
            require('highcharts'),
            + require('highcharts/highchart-3d'),
            + require('highcharts/modules/exporting')
            ],
            })


            Check http://plnkr.co/edit/sz6OfccvAetQcBX8KFXy?p=preview .



            If you are facing problem then add live example







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 13 '17 at 14:15









            Deep 3015Deep 3015

            7,50931638




            7,50931638













            • wow great. thanks man.

              – Md. Samsuzzoha
              Nov 13 '17 at 15:05











            • Hi, when I did this to build for production, this error came out: ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'ChartModule' was called.

              – Afeez Aziz
              May 21 '18 at 2:13



















            • wow great. thanks man.

              – Md. Samsuzzoha
              Nov 13 '17 at 15:05











            • Hi, when I did this to build for production, this error came out: ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'ChartModule' was called.

              – Afeez Aziz
              May 21 '18 at 2:13

















            wow great. thanks man.

            – Md. Samsuzzoha
            Nov 13 '17 at 15:05





            wow great. thanks man.

            – Md. Samsuzzoha
            Nov 13 '17 at 15:05













            Hi, when I did this to build for production, this error came out: ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'ChartModule' was called.

            – Afeez Aziz
            May 21 '18 at 2:13





            Hi, when I did this to build for production, this error came out: ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'ChartModule' was called.

            – Afeez Aziz
            May 21 '18 at 2:13













            1














            This approach also works :



            import * as highcharts3d from 'highcharts/highcharts-3d';
            export function highchartsFactory() {
            const hc = require('highcharts/highstock');
            highcharts3d(hc);
            return hc;
            }

            @NgModule({
            imports: [
            ChartModule
            ],
            providers: [
            {
            provide: HighchartsStatic,
            useFactory: highchartsFactory //this will take care of inlcuding highcharts 3d module
            }
            ]
            });


            For more details : https://github.com/gevgeny/angular2-highcharts/issues/193






            share|improve this answer




























              1














              This approach also works :



              import * as highcharts3d from 'highcharts/highcharts-3d';
              export function highchartsFactory() {
              const hc = require('highcharts/highstock');
              highcharts3d(hc);
              return hc;
              }

              @NgModule({
              imports: [
              ChartModule
              ],
              providers: [
              {
              provide: HighchartsStatic,
              useFactory: highchartsFactory //this will take care of inlcuding highcharts 3d module
              }
              ]
              });


              For more details : https://github.com/gevgeny/angular2-highcharts/issues/193






              share|improve this answer


























                1












                1








                1







                This approach also works :



                import * as highcharts3d from 'highcharts/highcharts-3d';
                export function highchartsFactory() {
                const hc = require('highcharts/highstock');
                highcharts3d(hc);
                return hc;
                }

                @NgModule({
                imports: [
                ChartModule
                ],
                providers: [
                {
                provide: HighchartsStatic,
                useFactory: highchartsFactory //this will take care of inlcuding highcharts 3d module
                }
                ]
                });


                For more details : https://github.com/gevgeny/angular2-highcharts/issues/193






                share|improve this answer













                This approach also works :



                import * as highcharts3d from 'highcharts/highcharts-3d';
                export function highchartsFactory() {
                const hc = require('highcharts/highstock');
                highcharts3d(hc);
                return hc;
                }

                @NgModule({
                imports: [
                ChartModule
                ],
                providers: [
                {
                provide: HighchartsStatic,
                useFactory: highchartsFactory //this will take care of inlcuding highcharts 3d module
                }
                ]
                });


                For more details : https://github.com/gevgeny/angular2-highcharts/issues/193







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 22 '18 at 11:16









                rtvallurirtvalluri

                1522216




                1522216






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47265585%2fhow-to-use-highchart-3d-with-angular-5%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    "Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

                    Alcedinidae

                    RAC Tourist Trophy