score:1
Accepted answer
backgroundcolor
with createlineargradient should help here. backgroundcolor propertly takes in different types of colors. you need to create a gradient and specify the same.
have created a sample snippet for you reusing your code. follow lines 4-7 and line 34.
const ctx = document.getelementbyid("mychart");
// create gradient here
const ctxforgradient = document.getelementbyid('mychart').getcontext('2d');
const gradientfill = ctxforgradient.createlineargradient(0, 500, 0, 50);
gradientfill.addcolorstop(0, "rgba(255, 0, 0, 0.9)");
gradientfill.addcolorstop(1, "rgba(0, 0, 255, 0.9)");
var speeddata = {
labels: [
"jan",
"feb",
"mar",
"apr",
"may",
"jun",
"jul",
"aug",
"sep",
"oct",
"nov",
"dec"
],
datasets: [{
label: "car speed",
data: [7, 9, 5, 8, 9, 7, 6, 10, 4, 5, 7, 8, 9],
linetension: 0,
pointbackgroundcolor: "#131921",
pointbordercolor: "white",
pointborderwidth: 3,
pointradius: 6,
bordercolor: "white",
backgroundcolor: gradientfill // fill gradient here
}]
};
var chartoptions = {
legend: {
display: false
}
};
new chart(ctx, {
type: "line",
data: speeddata,
options: chartoptions
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="mychart"></canvas>
hope it helps. revert for any doubts/clarification.
Source: stackoverflow.com
Related Query
- How to add gradient background to Line Chart [vue-chart.js]
- Chart.js - Add gradient to line chart background
- How to add an on click event to my Line chart using Chart.js
- Chart.js line chart set background color
- How to add second Y-axis for Bar and Line chart in Chart.js?
- chart.js Line chart with different background colors for each section
- Chart.js - Add gradient to bar chart
- How to create a gradient fill line chart in latest Chart JS version (3.3.2)?
- (Vue, ChartJS) Create gradient background for chart from child component canvas context
- Chart.js - Color specific parts of the background in a line chart
- Add a text as tooltip for each point on a line chart
- How to add multiple background color in line charts
- How to add background image in bar chart column in Chart.js?
- Gradient line chart with ChartJS
- How to add area with break on line chart with fill color
- Add data to line chart using chart.js
- chart.js add second line in a Line chart that starts from end of first line
- add info for points in line chart (js)
- How to sort XY line chart tooltip items based on value and add thousands separators?
- Remove background color in chartjs line chart
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- How to change background color of labels in line chart from chart.js?
- Chart JS Line Graph multitooltipkey background color issue
- How to add new dataset in line chart of chart.js by iterating over dictionary in JavaScript?
- How to make the background color of the chart as gradient using Chart.js
- How to add unused data background to bar in chart js
- How can I add background color of length bars in chart (chartJS)?
- Add new line in es6 inside a doughnut chart
- How to add data dynamically to primevue Line chart from vuejs3?
- Add different labels in a line chart - Chart.js
More Query from same tag
- Custom label from using separate array in Chart JS
- update charjs dataset using react library
- How to remove a vertical line from the canvas of react-chartjs-2?
- Chartjs: old data being displayed
- Multiple labels for multiple data-sets in chart.js
- how to use javascript library in dart
- How to get any y value for specified x in chart.js?
- ng2-charts : Newly added rows not getting displayed on phone devices
- bootstrap ui+angular chart: is it possible to disable graph's auto refreshing?
- Chart JS: Set Spacing Between Ticks on Y-Axis
- Add Time Scaling to linechart (Chart.js)
- How do you plot scatter graph with chart.js
- How to add background image in bar chart column in Chart.js?
- How to change line chart data label to icon or image in chart.js
- How to edit the ID of each button in a class if a condition is true in JavaScript?
- how to use chart.js with angular-chart using requirejs
- Chartjs! Date order value high to low
- Implementing Data Decimation in vue chartjs
- JS import updated JSON file for use with ChartJS
- How to change points/line based on value?
- how can we use function of one component into another js file
- Chart.JS Display 5 largest values in the legend
- Display all labels in Chart.js
- How can I process json file and display some data in form of charts in django
- How to add label square to Bar Chart using Chart.js
- How do I add an image in the middle of Donut Chart?(Chart.js)
- chart.js horzontalBar Stacked and Grouped - data not showing - a bug?
- How to draw vertical axis in google charts
- Cannot access a variable declared outside a For loop (Javascript)
- Chart.js automatic scaling