Fixed #1840 - Provide chartjs object when Chart component is totally instantiated

api-generator/components/chart.js

@@ -17,6 +17,12 @@ const ChartProps = [
         default: "null",
         description: "Options to customize the chart."
     },
+    {
+        name: "plugins",
+        type: "any",
+        default: "null",
+        description: "Used to custom plugins of the chart."
+    },
     {
         name: "width",
         type: "number",
@@ -62,6 +68,17 @@ const ChartEvents = [
                 description: "Index of the data in dataset"
             }
         ]
+    },
+    {
+        name: "loaded",
+        description: "Callback to invoke when chart is loaded.",
+        arguments: [
+            {
+                name: "chart",
+                type: "object",
+                description: "Chart instance."
+            }
+        ]
     }
 ];
 

src/components/chart/Chart.d.ts

@@ -28,6 +28,10 @@ export interface ChartProps {
      * Options to customize the chart.
      */
     options?: object | undefined;
+    /**
+     * Used to custom plugins of the chart.
+     */
+    plugins?: any;
     /**
      * Width of the chart in non-responsive mode.
      * Default value is 300.
@@ -49,6 +53,11 @@ export declare type ChartEmits = {
      * @param {ChartSelectEvent} event - Custom select event.
      */
     'select': (event: ChartSelectEvent) => void;
+    /**
+     * Callback to invoke when chart is loaded.
+     * @param {*} chart - Chart instance.
+     */
+    'loaded': (chart: any) => void;
 }
 
 declare class Chart extends ClassComponent<ChartProps, ChartSlots, ChartEmits> {
@@ -70,6 +79,12 @@ declare class Chart extends ClassComponent<ChartProps, ChartSlots, ChartEmits> {
      * @memberof Chart
      */
     generateLegend: () => string | any;
+    /**
+     * Returns Chart instance.
+     *
+     * @memberof Chart
+     */
+    getChart: () => any;
 }
 
 declare module '@vue/runtime-core' {

src/components/chart/Chart.vue

@@ -7,11 +7,12 @@
 <script>
 export default {
     name: 'Chart',
-    emits: ['select'],
+    emits: ['select', 'loaded'],
     props: {
         type: String,
         data: null,
         options: null,
+        plugins: null,
         width: {
             type: Number,
             default: 300
@@ -61,14 +62,20 @@ export default {
                     this.chart = new module.default(this.$refs.canvas, {
                         type: this.type,
                         data: this.data,
-                        options: this.options
+                        options: this.options,
+                        plugins: this.plugins
                     });
                 }
+
+                this.$emit('loaded', this.chart);
             });
         },
         getCanvas() {
             return this.$canvas;
         },
+        getChart() {
+            return this.chart;
+        },
         getBase64Image() {
             return this.chart.toBase64Image();
         },

src/views/chart/ChartDoc.vue

@@ -124,6 +124,12 @@ options: {
                         <td>null</td>
                         <td>Options to customize the chart.</td>
                     </tr>
+                    <tr>
+                        <td>plugins</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Used to custom plugins of the chart.</td>
+                    </tr>
                     <tr>
                         <td>width</td>
                         <td>number</td>
@@ -214,4 +220,4 @@ options: {
             </table>
         </div>
 	</div>
-</template>
+</template>