score:1
Accepted answer
it looks like you are setting the wrong start and end coordinates when you create the linear gradient.
this documentation may help you understand better what the coordinates should be set to: https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/createlineargradient
change both x
coordinates to 0, to get straight horizontal lines. then, decrease the start y
and increase the end y
to make the start and end colors more visible.
code:
grd = ctx.createlineargradient(0.000, 350.000, 0.000, 100.000);
jsfiddle:
https://jsfiddle.net/xg2k82rp/3/
Source: stackoverflow.com
Related Query
- Gradient is too blurred in Chart.js Line Chart
- How to create a gradient fill line chart in latest Chart JS version (3.3.2)?
- How to add gradient background to Line Chart [vue-chart.js]
- Gradient line chart with ChartJS
- Chart.js - Add gradient to line chart background
- Limit labels number on Chart.js line chart
- Chart.js - How to set a line chart dataset as disabled on load
- Chart Js Change Label orientation on x-Axis for Line Charts
- Draw horizontal line on chart in chart.js on v2
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Remove the vertical line in the chart js line chart
- Moving vertical line when hovering over the chart using chart.js
- create a multi line chart using Chart.js
- How to add an on click event to my Line chart using Chart.js
- line chart with {x, y} point data displays only 2 values
- Chart.js how to show cursor pointer for labels & legends in line chart
- Line chart disable interpolation
- Chart.js line chart set background color
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js line chart is cut off at the top?
- Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"
- How to display Line Chart dataset point labels with Chart.js?
- show label in tooltip but not in x axis for chartjs line chart
- chartjs show dot point on hover over line chart
- ChartJs line chart repaint glitch while hovering over
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js Mixed Bar and Line chart with different scales
- chart.js Line chart with different background colors for each section
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
More Query from same tag
- Chart.js plugin annotation line shadow
- Chartjs: How can I group datasets closer if I have maxBarThickness set?
- Chart js show/hide legend during runtime via buttonClick
- ChartJs - Labelling minimum and maximum value of the Y Axis
- Chartjs - How to update the data from values in my database?
- How to customize chart using chartJs?
- How to embed php code in min.js file
- Chart.js in flex element overflows instead of shrinking
- chart.js npm module not working
- Keeping scales in sync across multiple graphs or dynamically changing scales
- How to resize Chart.JS element in React.js?
- ChartJS custom legend doughnut separate legend from chart area
- Rotate left legend chartjs
- ChartJS animate only one dataset
- Why is Chart js first bar too small or not showing at all?
- Animation chart js (line), animate chart drawing line by line
- Chart.js: How can I manually set Y-axis range?
- Jinja throughs "SyntaxError: expected property name, got '%' " error
- protoype js 1.0.6 is conflicting with chart js
- y axis Formatting with Metric prefix 1000=> 1k Chart.js
- I want to show the value of label inside the pie graph. (vue-chartjs / pieceLabel)
- Adding different point style to each column from parsed csv in chart.js
- Is it possible to add image behind doughnut chart with transparency color in ng2chart?
- Can't load multiple charts onto a page when looping through dummy array
- Set Chart Background Image - Chart.js
- How to retrieve ChartJS instance after initialization
- how to highlight a specific area on chartjs line chart
- Is it possible to have a canvas next to another canvas without space on the bottom?
- Multiple bubble chart datasets for chartjs
- chart.js: hide specific ticks in y-axis and hide all x-axis grid line