score:5
adding
ngondestroy() {
chart.pluginservice.unregister(this.horizonallineplugin);
}
in your productdetailcomponent
shoud do the trick.
https://stackblitz.com/edit/angular-uxfwqb?file=src/app/product-detail/product-detail.component.ts
the problem here is that if you have multiple chart components visible at the same time, the plugin will be visible in all the other charts.
the better fix:
register the plugin only once, outside of nginit... directly in the module file or somewhere globally. this will impact all the charts in the entire application but will make it unnecessary to unregister it so it is clear that it's something global that impacts all charts.
create your own wrapper component/directive over chart.js (or a pull request for angular2-chartjs) that can accept a
plugins
input and pass it to thechart
constructor http://www.chartjs.org/docs/latest/developers/plugins.html:var chart1 = new chart(ctx, { plugins: [plugin] });
this will allow you to have a chart with the plugin and a chart without it, so no need to register/unregister global plugins.
Source: stackoverflow.com
Related Query
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- How to unregister a chart plugin?
- How to create a variable for chart js datalabel plugin formatter
- How to print a chart rendered by code
- How do I destroy/update Chart Data in this chart.js code example?
- How do you get the width of a datalabel from the Chartjs plugin after the chart animates?
- How to enable zoom plugin using Chart JS?
- how can i use inline plugin inner title for chart js?
- How to run Chart.js samples using source code
- how to not repeat code while creating multiple charts in chart js
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How can I make two of my lines in Chart JS thicker
- How to prevent first/last bars from being cut off in a chart with time scale
- How set color family to pie chart in chart.js
- Chart.js Bar Chart - how to chart bars from 0
- How to add an on click event to my Line chart using Chart.js
- Chart.js how to show cursor pointer for labels & legends in line chart
- How do you hide the title of a chart tooltip?
- How to put rounded corners on a Chart.js Bar chart
- chartjs : how to set custom scale in bar chart
- How can I make a stepline or stepped chart in chart.js or D3?
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How to Draw Gantt chart using chart js or other libraries
- How to fix chart Legends width-height with overflow scroll in ChartJS
- How to display Line Chart dataset point labels with Chart.js?
More Query from same tag
- Edit legend labels [vue-chart.js]
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Change Chart JS Bar Chart Border to Dotted Line
- Google Pie Chart Is Not Responsive
- Pie chart.js - show all 3 segment borders
- How to access Controller properties in Chart.js
- chart.js 2 - Is it possible to format tick labels with HTML?
- Iterate over query for use in Charts.js using Coldfusion
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- Add DataSet Bar Chart - Chart.JS
- Dynamically changing chartjs tick colours
- chartJSRadar downloadhandler creating empty png
- Angular 2 ng2-charts donut add text
- Getting nice chart.js animation when adding data with unshift()?
- Why is my Line Chart not displaying (Chart.JS)?
- How can I put queried data (via post) on my jquery chart?
- Add text before time in tooltip
- Horizontal BarChart with labels and additional text
- How do I group legend entries using Chartjs?
- Show wrong information in chart js 2
- Chart.js Bar graph with percentage values
- Papaparse with chart.js not displaying csv value on the x axis
- Display character after y-axis data value in onhover pop up Chart.js
- what is `dart.js` in chartjs.dart example
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- Charts.Js with Asp.Net Webforms Does Not Work
- Chart.js Line graph legend yields error: Uncaught TypeError: Cannot read property '0' of undefined
- ChartJS: Percentage labels
- Shorten number labels in Charts.js