score:0
for anyone using angular and ng2-charts, here is my solution. chart setup was left out for brevity.
import { component, oninit, viewchild, changedetectorref, afterviewinit } from '@angular/core';
import { basechartdirective } from 'ng2-charts';
import { genericlinechart } from './generic-line-chart';
@component({
selector: 'app-stats-chart',
templateurl: './stats-chart.component.html',
styleurls: ['./stats-chart.component.scss']
})
export class statschartcomponent implements oninit, afterviewinit {
@viewchild(basechartdirective, { static: true }) chartdirective: basechartdirective;
constructor(private changedetectorref: changedetectorref) { }
ngoninit() {
// ...setup chart
}
ngafterviewinit() {
// set gradient
const gradient = this.chartdirective.chart.ctx.createlineargradient(0, 0, 0, 400);
gradient.addcolorstop(0, 'rgba(30, 214, 254, .3)');
gradient.addcolorstop(1, 'rgba(0,0,0,0)');
this.chart.linechartdata[0].backgroundcolor = gradient;
this.changedetectorref.detectchanges();
}
}
score:0
you could use this npm package.
https://www.npmjs.com/package/chartjs-plugin-gradient
this makes it very easy to create a gradient backgroundcolor or bordercolor.
example:
const chart = new chart(ctx, {
data: {
datasets: [{
// data
gradient: {
backgroundcolor: {
axis: 'y',
colors: {
0: 'red',
50: 'yellow',
100: 'green'
}
},
bordercolor: {
axis: 'x',
colors: {
0: 'black',
1: 'white',
2: 'black',
3: 'white'
}
}
}
}]
}
});
score:13
for using in react i did the following way you need to pass an id to your component and then fetch the element using that id
import react, { component } from 'react'
import { line } from 'react-chartjs-2'
export default class graphcomponent extends component{
constructor(props){
super(props)
this.state = {
chartdata: {}
}
}
componentdidmount(){
//your code
var ctx = document.getelementbyid('canvas').getcontext("2d")
var gradient = ctx.createlineargradient(0, 0, 0, 400)
gradient.addcolorstop(0, 'rgba(229, 239, 255, 1)')
gradient.addcolorstop(1, '#ffffff')
const newdata = {
labels: [1, 1],
datasets: [
{
label: 'usd',
data: [1,1],
backgroundcolor: gradient,
bordercolor: this.props.border_color,
pointradius: 0
}
]
}
this.setstate({chartdata: newdata})
}
//more of your code
render(){
return(
<line
id='canvas'//you need to give any id you want
data={this.state.chartdata}
width={100}
height={30}
options={{
legend: {
display: false
}
}}
/>
)
}
}
this is only my second answer so please forgive me if i have made any mistakes in writing
score:30
note: for those people who is using newer version (v2.7.0) of chart.js, find out that is not working while you're copy-paste @bviale's answer back to your code base; some property names has changed:
fillcolor -> backgroundcolor
strokecolor -> bordercolor
pointcolor -> pointbackgroundcolor
pointstrokecolor -> pointbordercolor
you will need to update those property names to make it work.
reference: https://github.com/chartjs/chart.js/blob/master/docs/charts/line.md#dataset-properties
score:61
the link you provided was pretty clear, you have to put in the field fillcolor
in datasets a lineargradient object instead of a plain color. you can do complex gradients, but here is the code of a simple one (changing the opacity of the same orange) :
var gradient = ctx.createlineargradient(0, 0, 0, 400);
gradient.addcolorstop(0, 'rgba(250,174,50,1)');
gradient.addcolorstop(1, 'rgba(250,174,50,0)');
and your complete datasets :
datasets: [
{
fillcolor : gradient, // put the gradient here as a fill color
strokecolor : "#ff6c23",
pointcolor : "#fff",
pointstrokecolor : "#ff6c23",
pointhighlightfill: "#fff",
pointhighlightstroke: "#ff6c23",
data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
}
]
see it in action in this jsfiddle
Source: stackoverflow.com
Related Query
- Chart.js - add gradient instead of solid color - implementing solution
- Chart.js - Add gradient to bar chart
- Chartjs doughnut chart with gradient color
- How to add gradient background to Line Chart [vue-chart.js]
- How to add area with break on line chart with fill color
- Tooltips in Chart js are always black instead of the color of the corresponding dataset
- How to make the background color of the chart as gradient using Chart.js
- chart js bar chart add animation to change color
- How can I add background color of length bars in chart (chartJS)?
- Chart.js - Add gradient to line chart background
- Chartjs Bar Chart add background color to value labels
- Is it possible to add image behind doughnut chart with transparency color in ng2chart?
- How to add overlay color to chart.js pie chart segment?
- How to add text inside the doughnut chart using Chart.js?
- Chart area background color chartjs
- How set color family to pie chart in chart.js
- How to add an on click event to my Line chart using Chart.js
- Chart.js line chart set background color
- chartjs datalabels change font and color of text displaying inside pie chart
- Add DataSet Bar Chart - Chart.JS
- How to add an offset to a dataset in Chart js
- ChartJS add tooltip to a grouped bar chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to add text in centre of the doughnut chart using Chart.js?
- Chart.js v2.6: Add arrows to pie chart output values
- Chart.js bar chart : Grid color and hide label
- Unable to parse color in line chart (angular-chart.js)
- Is it possible to add a custom font to chart js?
- set background color to save canvas chart
- How to add datas to chart js from javascript array itself?
More Query from same tag
- Trying To Change only each Label's title in angular Chartjs
- Why chart renders after second click - react-chartjs-2
- How can I build some chart with Chart.js and ng2-charts using an array of revenus & budgets per month date as Data source?
- Can't generate multi-axis combo chart (bar/line) using chart.js 2.7
- Vue Chart.js -- can I give a line chart a default value for missing data?
- How do I increase the space between the Legend and the Chart when using angular-chart.js?
- Remove gridlines in AngularCharts
- How to make bars dashed in chart js?
- ChartJS - Line chart issue with only 1 point
- Updating chart.js not working after recieved new data from database with ajax
- Chart.js Multiple dataset
- How to set a minimum width on the values in a doughnut chart?
- Small value in doughnut chart is not visible - Chartjs
- Can we show long numbers as 1k, 1M, 1B on axis in charts?
- Chart js doesn't show chart
- Why does x axis not increment 'monthly' chart.js. Also, XAxis not taking title
- Chart to update from a drop down selection
- How to hide / not draw bars with 0 / null / undefined values?
- How do I persist the gridlines for ticks that are not displayed? [Chart.js]
- ChartJS not showing from MySQL
- GWT Chart.js implementation throws 'unable to get property 'insertBefore' of undefined or null reference
- How can I draw lines inside the bars in charts.js?
- ChartJS different background gradient depending on data (line graph)
- Chart.js Mixed Bar and Line chart with different scales
- ChartJS - remove axis?
- Add mouseout event handler to legends in Chart.js
- Passing Data from Controller to ChartJS
- Chart js - Line chart - How to hide the data label on the line?
- Cant pass variable for some reason? PHP
- Adding object data to data structure of chart.js chart does not show any data