Comments (7)
Thanks for the report. It looks like there is a gap in capability because the CanvasGradient
type cannot be serialized by javascript-stringify
or in any other way.
I think the solution is for QuickChart to provide a predefined function getGradientFill
that is available in your chart definition. I've added this experimentally to the master branch. This functionality is live, experimentally, on quickchart.io. Can you let me know how it works for you?
{
type: 'bar',
data: {
labels: [2012, 2013, 2014, 2015, 2016],
datasets: [{
label: 'Raisins',
data: [12, 6, 5, 18, 12],
backgroundColor: getGradientFill("blue", "pink"),
}, {
label: 'Bananas',
data: [4, 8, 16, 5, 5],
backgroundColor: getGradientFill("#ff0000", "#ffff00"),
}]
}
}
from quickchart.
Thanks for the really fast response and deploy, it worked!
I think its a bit hard to implement, but the possibility to do it is really important.
I had to manually insert the gradientFill function to the string after javascript-stringify using replace
backgroundColor: values.map(value => value < 0 ? "__gradientRed__" : "__gradientGreen__")
data.chart.replace(/'__gradientRed__'/g,
getGradientFill( "#a0191e", "#c32d38"))
data.chart.replace(/'__gradientGreen__'/g,
getGradientFill( "#6ba141", "#84d66a"))
Because my function was just for testing purposes, its really not generic.
So meanwhile i have built a more generic one with color offset and linear direction control, i think that it could be some solution for the meantime. but i will think about something more easy to implement.
The new function(the default values are just for readability like typescript):
const getGradientFill = (colorsOptions = [{offset:0, color: "white"}], linearGradient = [500, 0 , 100, 0]) => { const gradientFill = ctx.createLinearGradient(...linearGradient); colorsOptions.forEach((options) => gradientFill.addColorStop(options.offset, options.color)); return gradientFill; };
Example:
const gradientRed = getGradientFill([{ offset: 0, color : "#a0191e"},{ offset: 0.5, color :"#c32d38"},{ offset: 1, color : "#a0191e"}], [100, 0 , 30, 0]);
from quickchart.
Thanks, I'll add the generalized function later today and update this thread. I agree the use of the function is very clumsy when using javascript-stringify.. I'll see if I can think of a better way.
from quickchart.
Hi @Blazsoul, I've updated the API with a generalized getGradientFill
(the old example will no longer work):
{
type: 'bar',
data: {
labels: [2012, 2013, 2014, 2015, 2016],
datasets: [{
label: 'Gradient example',
data: [12, 6, 5, 18, 12],
backgroundColor: getGradientFill([{ offset: 0, color : "red"},{ offset: 0.5, color :"#b19cd9"},{ offset: 1, color : "#dafdd3"}], [100, 0 , 300, 0]),
}]
}
}
I've also added a helper function getGradientFillHelper
that takes a direction and a list of colors and creates an evenly spaced gradient, according to the dimensions of the chart:
{
type: 'bar',
data: {
labels: [2012, 2013, 2014, 2015, 2016],
datasets: [{
label: 'Gradient example',
data: [12, 6, 5, 18, 12],
backgroundColor: getGradientFillHelper('horizontal', ["red", "#b19cd9", "#dafdd3"]),
}]
}
}
You can try it out, and if this all looks good to you I'll add it to the documentation.
from quickchart.
Works great!
Another suggestion i have is the ability to override height and width, send them to the third parameter of getGradientFillHelper, cuz is some cases the bar gradient get stretched to full width or height, but the bar is smaller than full form(if u add padding as well)
Example(look at week and quarter, its the same gradient):
getGradientFillHelper('vertical', ["red", "blue", "yellow"])
My suggestion:
getGradientFillHelper('vertical', ["red", "blue", "yellow"], {height: 270})
from quickchart.
Hey @Blazsoul, sorry for the delay. I've added an optional dimensions parameter that lets the user specify width and height:
{
type: 'bar',
data: {
labels: [2012, 2013, 2014, 2015, 2016],
datasets: [{
label: 'Gradient example',
data: [12, 6, 5, 18, 12],
backgroundColor: getGradientFillHelper('horizontal', ["red", "#b19cd9", "#dafdd3"], {width:200}),
}]
}
}
from quickchart.
Works great, thanks!
from quickchart.
Related Issues (20)
- CI feature: integrate pull request preview environments
- Cannot POST /graphviz
- How to install quickchart locally HOT 1
- Failed to run on GCP HOT 1
- Unable to install this on Ubuntu 23.04 nodeJS 18 LTS
- Unable to change scale using min/max in options HOT 1
- FEATURE Request: Export To PDF
- linear regression
- Support for datalabels in v3+ charts? HOT 4
- Transparant table background HOT 1
- tickFormat not working in self-hosted instance
- JSON Integration? HOT 1
- de-facto quickchart docker image ianw/quickchart appears abandoned HOT 1
- Unique tags for inline SVG HOT 2
- Adding Elestio as deployment option
- Docker image randomly stopped working
- Feature Request for QR Codes. Add the text option HOT 2
- Horizontal Grid Lines Not Working on Line Charts HOT 1
- gauge charts working in main domain, but not self-hosted instance
- Still maintained ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from quickchart.