score:0
after some search i found a solution changing the event of plugin to beforedraw and calling the update() method of chart.
this.chartinst = new chart(this._ctx, {
type: "line",
data: this._data ,
options: this._chartoptions,
plugins: [{
beforedraw: function (c, a, o) {
var yscale = c.scales['y'];
var max = c.data.datasets[0].data.reduce(function (prev, current) { return (prev.y > current.y) ? prev : current }).y;
var ypos = yscale.getpixelforvalue(max);
var gradientfill = c.ctx.createlineargradient(0, ypos, 0, c.height);
gradientfill.addcolorstop(0.4, 'rgba(83, 155, 243, 0.25)');
gradientfill.addcolorstop(0.9, 'rgba(223,140,255,0.25)');
c.data.datasets[0].backgroundcolor = gradientfill;
c.update();
}
}]
})
Source: stackoverflow.com
Related Query
- Customize fill colors for ChartJS 3.x using beforRender plugin event
- Chartjs random colors for each part of pie chart with data dynamically from database
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
- Gradient color for each bar in a bar graph using ChartJS
- How to get onClick Event for a Label in ChartJS and React?
- Missing Tooltip for some data points using chartjs
- how can i send a list of numbers from views.py to a chartjs file im using for the front?
- How to generate colors for unknown number of datasets in Chartjs
- Chartjs Different Fill Color For Overlap Area
- How to hide/show bars differentiate by a colors and by click on labels, using chartjs bar charts?
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- Grabbing the title in plugin for ChartJS
- How to install plugin for chartjs in javascript
- Set different color for each bars using ChartJS in Angular 4
- Chartjs annotation plugin colored box colors get summed after switching back and forth
- subcategories for each bar in multibar chart using chartjs
- How to run Chart.js samples using source code
- Angular 4: Different color for bar in bar chart dynamically using ChartJS
- using dynamic array in chartJs for label and data
- Code for Chartjs Typescript definition file
- Different color for each bar in a bar chart; ChartJS
- How to disable a tooltip for a specific dataset in ChartJS
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- How to add an on click event to my Line chart using Chart.js
- ChartJS canvas not displaying rgba colors in IE, Safari and Firefox
- Display line chart with connected dots using chartJS
- Dynamically update the options of a chart in chartjs using Javascript
- show label in tooltip but not in x axis for chartjs line chart
- Click event on stacked bar chart - ChartJs
More Query from same tag
- ChartJS hover/tooltips: selecting the correct points in the datasets based on x-value
- Chart JS show multiple data points for the same label
- how to insert dynamic data from sql into chartjs stacked bar chart javascript
- How to mapping variable data for pie chart (react.js)
- Using Chart.js on Laravel 5.3
- How to chart detected activities on the hour using Chart.js
- Chart js PHP and JSON wont diplsay
- Retrieving daily & monthly totals from MySQL for use in a chart
- Chart.js unable to create chart
- Chartjs Exporting ImageExports Empty Dark Image
- this.map.tick is not a function
- Background colour of line charts in chart.js
- Chart.js Line chart fixed tooltip
- react-chartjs integration error. Cannot read property 'xLabels' of undefined
- Angular-chartjs Data labels over bar chart
- Chart.js xAxis linear scale : strange behavior
- Modifying the X-Axis Labels of a Bar chart in Chart.js 2
- How to Draw a line on chart without a plot point using chart.js
- How to can I get text inside a chats.js circular chart
- Chart.js compress vertical axis on barchart
- Chartjs: I only want left and right padding in pie chart
- Display labels on Chart.js in Ionic 2 app
- How to add arrays to the barChart with chart.js?
- Draw stacked horizontal bar chart with Average line using ChartJS
- ChartJS does not render correctly
- Chart.js v2 charts do not display inside angular 2 (but Chart.js v1 works perfectly)
- Age pyramid chart using chart.js
- chart.js tooltip keeps remembering old data after update
- Formatting axis labels using ChartsJS
- Chartjs (Non Vue) Not Rendering Graph Chart inside V-if/V-show