score:0
Accepted answer
note: this is how i do it without ng2-charts,
i create the chart as explained on the charts.js documentation :
this.chart = new chart(
"canvas",
{...
}
and then, after that, i add the gradient
const ctx = this.chart.ctx;
const height = this.chart.height;
const gradient = ctx.createlineargradient(0, 0, 0, height);
gradient.addcolorstop(1, "rgba(128, 182, 244, 0.6)");
gradient.addcolorstop(0, "rgba(255, 255, 255, 0.6)");
this.chart.data.datasets[0].backgroundcolor = gradient;
Source: stackoverflow.com
Related Query
- Gradient effect with Chart.js and Angular
- Problem for display a chart with Chart.js and Angular
- ERROR TypeError: "this.canvas is undefined" | Problem with creating a chart with angular and chart.js
- ReferenceError: Chart is not defined with primeNg and angular 4
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js Mixed Bar and Line chart with different scales
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Create a rounded bar graph with Angular and chartJS
- Series Details Not Showing in Angular Chart with Charts.js
- Can we draw a Line Chart with both solid and dotted line in it?
- Increase padding between legend and chart with react-chartjs-2
- Chartjs doughnut chart with gradient color
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Angular chart how to show the legend data value by default along with legend name
- React chart : prevent chart's canvas scaling with height and width
- Why would a ChartJS chart end up with width 0 and height 0?
- Gradient line chart with ChartJS
- Using chart js options with react-chartjs-2 and typescript
- Trying to load a chart with chart.js, through ajax and php
- Issue while plotting bar chart with custom x-axis with month and year in chart.js
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Remove additional white space on left and right side of Angular Chart
- Angular Charts.js: Can't refresh chart with data
- Vue Chart.js Doughnut Chart with rounded and spaced arcs (vue3-chart-v2)
- Dynamic line chart with chart.js and PHP
- Angular 2: How to pass my API data to graph and Display the Graph with data
- Using Chart.js with angular and systemjs: "Chart is not defined"
- Doughnut Chart not displaying data with Chart Js and Backbone js
- how to display multiple sum with chart js and laravel?
- live update ecg chart with python and flask
More Query from same tag
- ChartJS - Graphic with multiple values on the same date
- Flask Socketio | Update and plot a chart using background tasks created by Flask Executor or ThreadPoolExecutor
- Contrast chart.js datalabels colors with the background
- Customise size of data points , height and width in Chart.js?
- Chart.js changing the color of the max value bar
- Chart.js - Increase spacing between bottom legend and chart
- gradient background on radar chartjs
- React - render Chart.js chart based on user selection, after Ajax returns JSON
- Change tool-tip direction in react-chartjs2
- How to disable Chart JS tooltip when there is no value?
- Charts flickering
- onZoom not triggered when zooming
- How to hide/show bars differentiate by a colors and by click on labels, using chartjs bar charts?
- Chart.js with factory and webservices (Ionic)
- How to embed php code in min.js file
- Chartjs doughnut chart rounded corners for half doghnut
- Show nested objects in Chart.js
- Formatting Chart.js Chart
- Rendering a chart.js component twice in a page
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Why prettier put a comma ',' at the last element of the object
- PrimeNg chart label rotation with Angular2
- how can conditionally show/hide gridlines on the yAxis using Chart.js?
- Create space between legend and chart in charts.js
- How to load page containing Chart.js using jQuery
- Possible to hide Chart.js grid lines that extend beyond chart?
- Cannot get Chart.js working
- this.map.tick is not a function
- Chart.js padding not working for ScaleLabel
- Options: plugins not functioning