score:2
html canvas' createlineargradient()
depends on the y
axis coordinates that you pass in as argument. you had passed in a static 200 every time (i.e. ctx.createlineargradient(0, 200, 0, 20);
).
that's why the gradient's steps remains the same everytime. for the gradient to update, you have to recalculate the height of the <canvas>
element on window resize and pass it in to createlineargradient()
again.
you can accomplish this by:
- separating the block where you create the gradient into a separate function.
eleheight
retrieves the height of the canvas element.
generategradient(){
let eleheight = this.mychart.nativeelement.offsetheight;
// console.log(eleheight)
let purple_orange_gradient: canvasgradient = this.mychart.nativeelement.getcontext('2d').createlineargradient(0, eleheight, 0, 20);
purple_orange_gradient.addcolorstop(0.1, "#000279");
purple_orange_gradient.addcolorstop(0.2, "#0000f2");
purple_orange_gradient.addcolorstop(0.3, "#0362fd");
purple_orange_gradient.addcolorstop(0.4, "#04d3fd");
purple_orange_gradient.addcolorstop(0.5, "#45ffb7");
purple_orange_gradient.addcolorstop(0.6, "#b7ff46");
purple_orange_gradient.addcolorstop(0.7, "#ffd401");
purple_orange_gradient.addcolorstop(0.8, "#fe6500");
purple_orange_gradient.addcolorstop(0.9, "#f30004");
purple_orange_gradient.addcolorstop(1, "#7e0100");
return purple_orange_gradient;
}
- add a onresize event handler to your containing
<div>
and generate the gradient again. you also need to programatically update the chart every time you make a change to re-render it.
<div style="display: block; max-height: 100%" (window:resize)="onresize($event)" >
...
</div>
onresize(event?){
// console.log("onresize");
this.barchartdata.foreach((d, i) => {
d.backgroundcolor = this.generategradient();
})
this.chart.chart.update(); //update the chart to re-render it
}
- update the
barchartdata
's properties (that uses gradient) inngafterviewinit
. we need to do this here because we only want the height of the<canvas>
element with data populated. without data populated, the element is much smaller.
ngafterviewinit(){
this.barchartdata.foreach((d, i) => {
d.backgroundcolor = this.generategradient();
});
this.chart.chart.update(); //update the chart to re-render it
}
have a look at this stackblitz example⚡⚡ i have created.
score:1
you have to change the gradient whenever your canvas is resizing. took me a while to figure out a good structure to minimize lines of code and optimize performance. this is the best i could achieve.
there are exeptions when the chart.js
onresize()
fires though but i couldn't solve this issue completly bulletproof. but for simple resizes it should work.
complete code (same code in jsbin with live preview):
let sdata = {}
sdata.labels = []
sdata.data = []
const count = 50
for (let x = 0; x < count; x++) {
sdata.data.push(math.floor(math.random()*100))
sdata.labels.push(x)
}
const canvas = document.getelementbyid('chart')
const ctx = canvas.getcontext("2d")
let purple_orange_gradient
function updategradient() {
let bottom = bar_chart.chartarea.bottom
let top = bar_chart.chartarea.top
purple_orange_gradient = ctx.createlineargradient(0, bottom+top, 0, top)
purple_orange_gradient.addcolorstop(0.1, "#000279")
purple_orange_gradient.addcolorstop(0.2, "#0000f2")
purple_orange_gradient.addcolorstop(0.3, "#0362fd")
purple_orange_gradient.addcolorstop(0.4, "#04d3fd")
purple_orange_gradient.addcolorstop(0.5, "#45ffb7")
purple_orange_gradient.addcolorstop(0.6, "#b7ff46")
purple_orange_gradient.addcolorstop(0.7, "#ffd401")
purple_orange_gradient.addcolorstop(0.8, "#fe6500")
purple_orange_gradient.addcolorstop(0.9, "#f30004")
purple_orange_gradient.addcolorstop(1.0, "#7e0100")
return purple_orange_gradient
}
const bar_chart = new chart(ctx, {
type: "horizontalbar",
data: {
labels: sdata.labels,
datasets: [{
bordercolor: purple_orange_gradient,
pointbordercolor: purple_orange_gradient,
pointbackgroundcolor: purple_orange_gradient,
pointhoverbackgroundcolor: purple_orange_gradient,
pointhoverbordercolor: purple_orange_gradient,
pointborderwidth: 10,
pointhoverradius: 10,
pointhoverborderwidth: 1,
pointradius: 3,
fill: true,
backgroundcolor: purple_orange_gradient,
borderwidth: 4,
data: sdata.data
}]
},
options: {
legend: {
display: false,
position: "bottom"
},
scales: {
yaxes: [{
ticks: {
display: false,
fontcolor: "rgba(0,0,0,0.5)",
fontstyle: "bold",
beginatzero: true,
maxtickslimit: 1,
padding: 20,
},
gridlines: {
drawticks: false,
display: false
}
}],
xaxes: [{
gridlines: {
zerolinecolor: "transparent",
},
ticks: {
padding: 20,
beginatzero: true,
fontcolor: "rgba(0,0,0,0.5)",
fontstyle: "bold"
}
}]
},
onresize: function(chart, size) {
// onresize gradient change
changegradient()
}
}
});
// initial gradient change
changegradient()
function changegradient() {
let newgradient = updategradient()
bar_chart.data.datasets[0].bordercolor = newgradient
bar_chart.data.datasets[0].pointbordercolor = newgradient
bar_chart.data.datasets[0].pointbackgroundcolor = newgradient
bar_chart.data.datasets[0].pointhoverbackgroundcolor = newgradient
bar_chart.data.datasets[0].pointhoverbordercolor = newgradient
bar_chart.data.datasets[0].backgroundcolor = newgradient
bar_chart.update()
}
Source: stackoverflow.com
Related Query
- How to maintain chartjs / ng2-charts gradient on window resize?
- how to get React chartjs to resize back down with window
- How to modify bar width in Chartjs 2 bar charts
- ChartJS Doughnut Charts Gradient Fill
- ChartJS won't draw graph inside bootstrap tab until window resize
- How do I make line charts overlay over bar charts in chartjs
- How to add ChartJS code in Html2Pdf to view image
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- chartjs - how to set the order in which the different charts are displayed
- How can I load multiple Chartjs charts with different data on the same page?
- How to generate chartjs charts to pdf using laravel?
- When I added a funnel chart to chartjs all the charts are load compressed until resize page
- How to change position from absolute to relative in charts in ChartJS
- How to add left padding for my charts done in ChartJs and my Google Map so it is not glued to the limit of the page on the left
- how to change thickness of two doughnut charts in chartjs
- How to 1. pass two datasets and 2.have permanent label on charts in Chartjs
- How to resize chartjs in bootstrap columns for different browsers
- Chart.js how to change point radius of scatter charts on resize events?
- How to extend chartjs line charts in ReactJS to show solid and dashed line together?
- How to run Chart.js samples using source code
- how to not repeat code while creating multiple charts in chart js
- How do I make many ChartJS charts on the same page to have the same height and also even column width?
- ChartJS Line Charts - remove color underneath lines
- How to set ChartJS Y axis title?
- How to disable chartjs legendclick
- how to change size of point in ChartJS
- How to disable a tooltip for a specific dataset in ChartJS
- How to modify chartjs tooltip so i can add customized strings in tooltips
- ChartJs 2.0 How do I obtain point information being clicked upon?
- how to plot multiple time series in chartjs where each time series has different times
More Query from same tag
- Move y-Axis and hide in Chart.JS V3
- displaying the output on chart.js using Django and HTML
- Android: WebView with JavaScript for Chart.js not working properly
- Chartjs - legends take up too much space on mobile devices
- Gradient colour in backgroundColor JS
- Multi Line Chart.js with two Y-Axes
- Aurelia - Unhandled rejection - Chart.js and Moment.js
- Adjust length of y-axis using chart.js and bootstrap
- How to create a chart that uses strings for both the X and Y axes?
- Chartjs stacked bar single max value
- My data array has null values in chart.js. Is there a way to draw a line between the two segments to maintain visual progress?
- chart.js set one bar as different colour?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- How to catch an onClick event on bubble chart?
- How do I use this new extension for chart.js?
- everything i put in the options of the Line charts doesnt work
- Chart js footer
- How to load a chart in a diferent page
- Bootstrap > Extend ChartJS canvas horizontally to match overflowing columns
- Is there a way to represent date hole in chartjs time series?
- ChartJS xAxis label position
- Acceptable Range Highlighting of Background in Chart.js 2.0
- How to show bar chart labels clearly using ChartJS?
- angular chartjs not showing data properly
- How To Add Center-Text in Donut Chart Js
- Chart.JS - Tooltips - Issue: 3 data points, all three individual tooltips showing for each data point
- Cleart Chart data upon ajax call
- Resize the width and height of the ng2-charts
- Angular Chart.js does not show trendline
- How use data dynamically in LineChart.js