Chart fillColor as gradient

Topic: Chart fillColor as gradient

ptrw pro asked 7 years ago

Can you explain how to input a gradient into chart as fillColor. Using this code, i have not been able to get a gradient: $(function () { var data = { labels: ["20", "26", "32", "38", "44", "50", "58"], datasets: [ { label: "First dataset", fillColor: "rgba(255,46,169,.9)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,.5)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [36, 37, 50, 52, 70, 85, 90] }, { label: "Second dataset", fillColor: "rgba(255,183,213,.3)", strokeColor: "rgba(255,183,213,.5)", pointColor: "rgba(151,187,205,.5)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [42, 50, 59, 60, 79, 76, 81] } ] }; Many thanks!

Add comment

Magdalena Obalska free answered 7 years ago

0 0 Best answer

Hi, try the code below. 1. Put this code between your script tags.

 var ctx = document.getElementById("your chart id here").getContext("2d");
  var gradient = ctx.createLinearGradient(0, 0, 0, 300);
  gradient.addColorStop(0, 'rgba(208, 102, 255, 1)');   
  gradient.addColorStop(1, 'rgba(208, 102, 255,0)');

2. Declare your color with fillColor: gradient.

Add comment

ptrw pro answered 7 years ago

0 0 Best answer

Yes the cart is working fine and i have declared everything as you have it. Sorry, my question was about gradients So in CSS, normally i would express a gradient fill like this: background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); My question is how do I do this in the script for fillColor? Thanks in advance.

Add comment

Edyta Dabrowska free answered 7 years ago

0 0 Best answer

Hello,

Have you remembered to define option variable and then to declare a new chart?
There were also some bugs with brackets in your code.

Try this solution:

<pre><code>$(function () {
	var option = {
    	responsive: true,
    };

And let me know how it works.

Regards,

Please insert min. 20 characters.

Hello, Have you remembered to define option variable and then to declare a new chart? There were also some bugs with brackets in your code. Try this solution:

$(function () {
	var option = {
    	responsive: true,
    };

    var data = {
		labels: ["20", "26", "32", "38", "44", "50", "58"],
		datasets: [
			{
				label: "First dataset",
				fillColor: "rgba(255,46,169,.9)",
				strokeColor: "rgba(220,220,220,1)",
				pointColor: "rgba(220,220,220,.5)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(220,220,220,1)",
				data: [36, 37, 50, 52, 70, 85, 90]
			},
			{
				label: "Second dataset",
				fillColor: "rgba(255,183,213,.3)",
				strokeColor: "rgba(255,183,213,.5)",
				pointColor: "rgba(151,187,205,.5)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(151,187,205,1)",
				data: [42, 50, 59, 60, 79, 76, 81]
			}	
		]
	}
	
    // Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext('2d');
    var myLineChart = new Chart(ctx).Line(data, option); //'Line' defines type of the chart.
});

And let me know how it works. Regards,

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

ptrw

Pro User 10Support score
2Questions 2Answers 0Snippets