angular 8 p-chart chartjs-plugin-zoom not working

UI Components for Angular
Post Reply
BoschPT
Posts: 3
Joined: 02 Dec 2016, 14:22

11 Jul 2019, 13:45

I upgraded recently to angular 8 and the zoom plugin for the charts has stopped working.
I have tested it with newest version and also older versions of chart.js and its zoom plugin, but without success, then I tried from prime demo project and it's the same, not working at all.

this is the config that I'm using.
but nothing appear in console, no warning or error.

Code: Select all

this.optionChart = {
            title: {
                text: 'Chart.js Time Scale'
            },
            plugins: {
                zoom: {
                    // Container for pan options
                    pan: {
                        // Boolean to enable panning
                        enabled: true,

                        // Panning directions. Remove the appropriate direction to disable
                        // Eg. 'y' would only allow panning in the y direction
                        mode: 'xy',

                        rangeMin: {
                            // Format of min pan range depends on scale type
                            x: null,
                            y: null
                        },
                        rangeMax: {
                            // Format of max pan range depends on scale type
                            x: null,
                            y: null
                        },

                        // Function called while the user is panning
                        onPan: function({ chart }) {
                            console.log(`I'm panning!!!`);
                        },
                        // Function called once panning is completed
                        onPanComplete: function({ chart }) {
                            console.log(`I was panned!!!`);
                        }
                    },

                    // Container for zoom options
                    zoom: {
                        // Boolean to enable zooming
                        enabled: true,

                        // Enable drag-to-zoom behavior

                        // Drag-to-zoom rectangle style can be customized
                        drag: {
                            borderColor: 'rgba(225,225,225,0.3)',
                            borderWidth: 5,
                            backgroundColor: 'rgb(225,225,225)'
                        },

                        // Zooming directions. Remove the appropriate direction to disable
                        // Eg. 'y' would only allow zooming in the y direction
                        mode: 'xy',

                        rangeMin: {
                            // Format of min zoom range depends on scale type
                            x: null,
                            y: null
                        },
                        rangeMax: {
                            // Format of max zoom range depends on scale type
                            x: null,
                            y: null
                        },

                        // Speed of zoom via mouse wheel
                        // (percentage of zoom on a wheel event)
                        speed: 0.1,

                        // Function called while the user is zooming
                        onZoom: function({ chart }) {
                            console.log(`I'm zooming!!!`);
                        },
                        // Function called once zooming is completed
                        onZoomComplete: function({ chart }) {
                            console.log(`I was zoomed!!!`);
                        }
                    }
                }
            }
        };
        

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests