typpo / quickchart Goto Github PK
View Code? Open in Web Editor NEWChart image and QR code web API
Home Page: https://quickchart.io/
License: GNU Affero General Public License v3.0
Chart image and QR code web API
Home Page: https://quickchart.io/
License: GNU Affero General Public License v3.0
I am trying to get the tooltip by using this API => https://quickchart.io/chart?width=700&height=300&c=
The data which i am passing is below:
{"type":"bar","data":{"labels":["Feb 2020","Mar 2020","Apr 2020"],"datasets":[{"label":"DesignTracker","data":[1002.48,1076.93,439.53]},{"label":"cam","data":[2747.02,2532.73,472.41]},]},"options":{"legend":{"position":"top"},"scales":{"yAxes":[{"ticks":{"callback":function(value){return'$'+value;}}}]}}}
But the tooltip is not working.
Can you please let me know what is the issue?
We tried to create chart but the chart always draws straight line. Bezier curve does not come in chart.
{
type: 'line',
data: {
labels: ['1:00', '2:00', '3:00', '4:00', '5:00', '1:00', '2:00', '3:00', '4:00', '5:00', '1:00', '2:00', '3:00', '4:00', '5:00'],
datasets: [{
lineTension: 0.4,
label: 'Dogs',
backgroundColor: 'purple',
borderColor: 'purple',
data: [ 50, 60, 70, 180, 190 ,50, 60, 70, 180, 190,50, 60, 70, 180, 190],
fill: false,
}]
},
options: {
title: {
display: true,
text: 'Total Revenue (billions)',
fontColor: 'black',
fontSize: 20,
},
legend: {
position: 'bottom',
}
}
}
I am trying to pass this through the HTML request. I am only getting errors back. This does work in the editor as seen here.
This returns "unexpected string" but I am not sure where I am going wrong. When use the editor on the the main quickchart page, and click on the provided link, this works just fine. What am i doing incorrectly here?
{
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{
label: 'Corrects',
data: [ 10, 60, 70, 180, 190 ],
fill: false,
borderColor:'green'},
{
label: 'Incorrects',
data: [ .10, 20, 30, 40, 50 ],
fill: false,
borderColor: 'purple'
}]
},
options: {
title: {
display: true,
text: 'SAFMEDS',
fontColor: 'blue',
fontSize: 32,
},
legend: {
position: 'bottom',
},
scales: {
yAxes: [{ type: 'logarithmic',
ticks: {
autoSkip: false,
min:.001, max: 1000,callback: function (value, index, values) {if( value==.001 || value==.01 || value==.1 || value==1 || value==10 || value==100 || value==1000){return value + ' per minute';}},}}],},},}
Any chance we could get the default color wheel that's set in /lib/charts.js
to be configurable? For example, the Chart API Parameters for quickchart.io takes chart
, height
, width
, etc. Would be great if there was a defaultColors
setting!
That charts.js
has some very useful code in it to figure out how to intelligently apply the DEFAULT_COLORS
colors based on different chart types. We'd love to take advantage of that code by passing into the Chart API Parameters a custom palette that's an alternative to DEFAULT_COLORS
. Looks like renderChart()
would have another parameter that comes from the (proposed) Chart API Parameter defaultColors
setting.
Currently, without this option, if we have 20 different charts we render through quickchart.io and have a single color palette we want all those charts to use, it means setting those colors manually in each of the 20 different ChartJS chart
configs. Not the end of the world, but adds risk.
I can render charts with no problems on my self hosted Docker instance, but I cannot get the short link service to work.
As soon as I change the curl endpoint to the cloud hosted service (https://quickchart.io/chart/create
) everything is running fine.
Is this a limitation to the OSS Version, the Docker Image, or am I missing something?
edit: Returned message is a HTML-Page with stating Cannot POST /chart/create
.
I want to add a simple title to a sparkline style chart. It works, but it looks like it is adding an extra blank line under the title that I would like to be able to shrink. I cannot find the option that will shrink it. I tried legend options, thinking that the legend was maybe just invisible but still taking up space, but they seemed to do nothing:
I'm using a doughnut type graph with the chartjs-plugin-doughnutlabel plugin and have noticed an intermittent issue with label disappearing entirely from the graph. Here is an example of the issue using the sandbox.
The label appears when first hitting the link, but if the doughnutlabels
> labels
> font
> size
value is update to say 24
the label disappears. incrementing the value up the label doesn't reappear until a size of 27
is reached.
It also seems that changing the value for doughnutlabels
> labels
> text
from a string type to a numerical type also has an effect. Setting the size to 17 does not show the label UNTIL the text is changed to a numerical type (removed the quotes).
I can't seem to find a reason for this behaviour.
Allow users to set attributes on the Chart.defaults.global
object.
For example, this can be used to configure fonts globally instead of on individual parts of the chart: https://www.chartjs.org/docs/latest/general/fonts.html
Greetings!
I've recently been trying the quickchart.io service in order to evaluate whether our company would like to use a paid tier. What we're trying to do is make POST requests for chart images and get back HTTP responses of the PNG images (vs. getting back a link to a short URL or making HTTP GET requests with the chart settings/configuration in the URL).
For example, we're sending the following request to the endpoint https://quickchart.io/chart
in a POST:
{
"chart": {
"type": "horizontalBar",
"data": {
"labels": [
"1+ yr",
"1 - 12 months",
"1 - 4 weeks",
"< 1 week"
],
"datasets": [
{
"label": "Participants",
"data": [
12,
2,
8,
24
]
}
]
}
},
"height": 200,
"width": 300,
"format": "png"
}
What we get back is an image that is 400 pixels in height and 600 pixels in width.
I've tried adding numerous options to the chart
object and still no luck. What I've tried, for example, is setting these properties on chart.options
:
aspectRatio: 1
responsive
both true and falsemaintainAspectRatio
both true and falseNone of these options seem to affect the output image—it still always ends up being 2x the size that I send for height
and width
.
A workaround I tried is to simply send a height
and width
value that is half of what I actually want. When I do that, the PNG that comes back is the correct size, but the labels seem disproportionately large.
We've had to resort to not using the aforementioned workaround and post-processing the image ourselves—we read it into a library and perform a scaling/resizing operation on it to reduce dimensions by half.
Am I missing or misunderstanding something? How can I request and image that is X pixels in width and Y pixels in height and get back an image that is exactly those dimensions?
Thanks so much!
Hi, thank you for this service.
I'd like to be able to submit functions for formatting as strings because currently this is what I have to do when generating my urls in Javascript:
Thanks for your consideration.
This is more of a question than an issue but since recent updates in your code all of a sudden there are tooltip labels on my chart. Ofcourse this is not what I want but I can't seem to disable them. Any suggestions on how to achieve this?
"ticks": {
"beginAtZero": true,
"fontSize": 8,
"fontColor": "#8192E8",
"callback": "function(label){return label + 'h';}"
}
I am building a grid of sparklines and have found that for some datasets lines collapse to Y=0.
Plot height 30, collapsing:
Height 31, normal.
Other datasets don't care.
I'm not sure if this will be fixed in #49 as it seems to focus on background color,
I have this chart:
/chart?encoding=base64&c=eyJkYXRhIjp7ImRhdGFzZXRzIjpbeyJkYXRhIjpbMjIwMDAsMjM1N10sImxhYmVsIjoiaW5wdXQifV0sImxhYmVscyI6WyJ1bml0ZWQtc3RhdGVzIiwiZ2VybWFueSJdfSwidHlwZSI6InBpZSJ9
I'd like to change the font color of the whole chart to a more readable one if possible.
I can't seem to find out how to do this in the documentation
When i generate chart via post request, when i try to access this chart it return 502 error
I am trying to migrate this chart, which is a 4-bucket distribution:
to quickcharts.io.
Again, I am having trouble getting the settings right in the chart.js options. The parameters
chbh=a&chxt=x,y&chxs=0,,0,0,|1,,0,0,
at the end are just to make the axes disappear. This wasn't required with chart-images.com (but the watermark makes it unusable):
How can I do this with quickchart.io?
Attempting to make a line graph with a simple dashed line and its not quite working, oddly it works just fine when using chart.js directly.
{
"type":"line",
"data":{
"labels":[
"July 19",
"August 19",
"Sept 19"
],
"datasets":[
{
"data":[
1.2,
1.4
],
"label":"Progress",
"borderColor":"#1c60ab",
"borderDash":[
5,
5
],
"pointBackgroundColor":"#1c60ab"
},
{
"data":[
1.2,
1.5,
1.8
],
"label":"Target",
"borderColor":"#d7d8da",
"borderDash":[
5,
5
],
"pointBackgroundColor":"#d7d8da",
"pointRadius":0
}
]
},
"options":{
"plugins":{
"datalabels":{
"display":false
}
},
"scales":{
"yAxes":[
{
"ticks":{
"beginAtZero":false
}
}
]
},
"elements":{
"line":{
"fill":false
}
}
}
}
Hello Ian,
your new version of quickchart (v.1.4.0) seems to have a bug. Right after starting the docker container, it stops with the following output:
Stackdriver logging is disabled
{"name":"quickchart","hostname":"397b27e8b639","pid":1,"level":30,"msg":"Loaded 6 keys from API keyfile","time":"2020-06-03T05:14:01.910Z","v":0}
{"name":"quickchart","hostname":"397b27e8b639","pid":1,"level":30,"msg":"Telemetry is enabled","time":"2020-06-03T05:14:02.026Z","v":0}
/quickchart/node_modules/sharp/lib/constructor.js:34
throw new Error(error);
^
Error:
Something went wrong installing the "sharp" module
Error relocating /quickchart/node_modules/sharp/build/Release/../../vendor/lib/libvips.so.42: g_date_time_format_iso8601: symbol not found
- Remove the "node_modules/sharp" directory then run
"npm install --ignore-scripts=false --verbose" and look for errors
- Consult the installation documentation at https://sharp.pixelplumbing.com/install
- Search for this error at https://github.com/lovell/sharp/issues
at Object.<anonymous> (/quickchart/node_modules/sharp/lib/constructor.js:34:9)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/quickchart/node_modules/sharp/lib/index.js:3:15)
at Module._compile (internal/modules/cjs/loader.js:778:30)
This issue occurs while running on Ubuntu 18.04 LTS and also when started on AWS fargate.
Do you have any idea how to fix this?
Thanks!
Christian
It would be nice to support base64 for the data, hence avoiding multiple problems of having to deal with encoding JSON in the URL.
Hello everyone,
thanks for your great job and service you are providing to the community.
I am currently struggling with PHP and the callback within the JSON object.
My chart code in PHP looks like:
'chart' => array(
'type' => 'horizontalBar',
'data' => array(
'labels' => ['comm', 'team', 'dialog'],
'datasets' => [
array(
'data' => [40, 60, 80],
'categoryPercentage' => 1,
'backgroundColor' => [
'rgba(12, 194, 178, 1)',
'rgba(12, 194, 178, 1)',
'rgba(12, 194, 178, 1)'
]
)
]
),
'options' => array(
'layout' => array(
'padding' => array(
'left' => 100
)
),
'legend' => array(
'display' => false
),
'scales' => array(
'xAxes' => [
array(
'ticks' => array(
'min' => 0,
'max' => 100,
'fontsize' => 16,
'fontColor' => 'black',
'fontFamily' => 'Arial',
'callback' => "function(value) { return value + '%'; }" // -> here you can see the problem
)
)
],
'yAxes' => [
array(
'ticks' => array(
'fontsize' => 16,
'fontColor' => 'black',
'fontFamily' => 'Arial'
)
)
]
)
)
)
Everytime the api complains about callback is not a function.
I already looked at many posts and I know that the whole object should be a string, after json_encode the object looks:
{
"chart": {
"type": "horizontalBar",
"data": {
"labels": [
"comm",
"team",
"dialog"
],
"datasets": [
{
"data": [
40,
60,
80
],
"categoryPercentage": 1,
"backgroundColor": [
"rgba(12, 194, 178, 1)",
"rgba(12, 194, 178, 1)",
"rgba(12, 194, 178, 1)"
]
}
]
},
"options": {
"layout": {
"padding": {
"left": 100
}
},
"legend": {
"display": false
},
"scales": {
"xAxes": [
{
"ticks": {
"min": 0,
"max": 100,
"fontsize": 16,
"fontColor": "black",
"fontFamily": "Arial",
"callback": "function(value) { return value + '%'; }" // -> you see the problem? The function is still a string and this ends up in an error.
}
}
],
"yAxes": [
{
"ticks": {
"fontsize": 16,
"fontColor": "black",
"fontFamily": "Arial"
}
}
]
}
}
}
}
So as you can see, the json is a valid object but the function is still a string.
Also changing the line with other ticks 'callback' => 'function(value) { return value + "%"; }'
return after json_encode in: "callback":"function(value) { return value + \"%\"; }"
So i am a little bit stuck in this, I just want to have my xAxes with '%'. (10%, 20%....)
Changing callback to formatter works, but without '%'
I also tried the approach by replacing a placeholder with the function code, but this resulted in a 500 error.
So to summon up: The chart is rendered without the callback, but with it, won't work!
May I ask for your help?
Thanks in advance!
Meywether
Trying to get a clean sparkline out of this is a real chore. Consider a new chart style of 'sparkline' that can take a dataset and by default show just the line (no axes, no filll, etc).
run docker run -p 8080:3400 ianw/quickchart
and met this problem:
yarn run v1.19.1
$ node index.js
error Command failed with signal "SIGSEGV".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
My server info:
[root@localhost data]# cat /etc/redhat-release
CentOS Linux release 7.5.1804 (Core)
[root@localhost data]# docker --version
Docker version 19.03.9, build 9d988398e7
[root@localhost data]# sed -n '/MemTotal|MemFree/p' /proc/meminfo
MemTotal: 65415580 kB
MemFree: 15610612 kB
[root@localhost data]# grep 'model name' /proc/cpuinfo|awk -F: '{print $2}'|sed 's# ##g'|uniq -c
32 Intel(R)Xeon(R)[email protected]
The docker image is the latest version. How to resolve it?
FYI: I tried v1.2.0, and it's fine.
Hi,
I built myself a simple Python api to convert the Quickchart graph to base64. The api does as should, and the graph I pass through works fine in web browser, but when it's passed through the api it spits out this error every time:
I am lost on where to go from here. This graph works fine in web browsers, but the api breaks it. When testing other image examples online, the api does not break them.
Is it an issue of the graph not being built in time and my api is spitting out the response too quick?
Thanks,
Eoin.
Hi
I tried to find a way to send helpers and elements callbacks like in this 2 examples(in order to achieve rounded corners):
https://jsfiddle.net/uffo/5oty49r3/6/
https://codepen.io/jordanwillis/pen/jBoppb
Maybe there is a way but i didn't find any mention in the code.
That would be great feature
Anyway thanks for the support!
Hello,
I was wondering if it was possible to add the possibility to move the labels of a pie chart outside of the slides. I've checked the documentation on Chart.JS but it looks like you need a plugin like :
This one.
Thanks :)
What is the reccomended allocation memory and compute wise if I were to go the self-hosting route? We might not be able to use the quickchart.io service directly due to compliance requirements.
Trend lines are vital for visual analysis of many types of line and scatter plot graphs. To my knowledge, adding this capacity is possible. What do you guys think? Will it work with the system?
Hi,
When updating to the latest Xibo I get errors with quickchart.
"yarn run v1.19.1
$ node index.js
error Command failed with signal “SIGSEGV”.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command."
and
"xibo_cms-quickchart exited with code 1"
There has been a thread created on the Xibo forums pointing us to here to report this. (https://community.xibo.org.uk/t/issue-with-ianw-quickchart/21491/2)
I have tried using an older version but this doesn't let Xibo start.
Any help would be great.
After reading through the Google Image Charts shutdown announcement, I discovered this great project.
Since quickcharts.io is a drop-in replacement for chart.googleapis.com, it would make sense to implement all chart types available there.
Here is an example of organizational charts I am interested in:
https://chart.googleapis.com/chart?cht=gv&chl=digraph{C_0[shape=box];C_0->H_0[type=s];C_0->H_1[type=s];C_0->H_2[type=s];C_0->C_1[type=s];C_1->H_3[type=s];C_1->H_4[type=s];C_1->H_5[color=blue]}
The language used in this type of chart is called DOT.
I hoped that quickcharts.io can support such a chart, but unfortunately the charting library used (chart.js) is extremely change-averse:
Therefore, an external plugin will have to be used.
I am forced to use image-charts.com for now, but I will definitely use an open-source alternative instead if available.
https://image-charts.com/chart?cht=gv&chl=digraph{C_0[shape=box];C_0->H_0[type=s];C_0->H_1[type=s];C_0->H_2[type=s];C_0->C_1[type=s];C_1->H_3[type=s];C_1->H_4[type=s];C_1->H_5[color=blue]}
Hey, I'm developing a Discord bot in Python, and for a command I generate a chart. I'm currently using plotly but it takes 30 secondes to generate it.
I find quickchart so useful, but the only problem is that I can't find how to set a background color, like a dark background.
So I was wondering if it was possible to add it in quickchart ?
Thanks in advance !
I am making this POST request
fetch("https://quickchart.io/chart/create", {
method: "POST",
headers: {
Accept: "application/json",
"Content-type": "application/json"
},
body: JSON.stringify(chartObject)
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => err);
and getting this result
{ success: true,
url: 'https://quickchart.io/chart/render/b7e58f0d-a140-4ea6-9f1a-05aa0ca05c23' }
However, visiting the link results in the error.
Great work! I am using your chart images for a project, where users generate huge numbers between 100k and 100Mio. Those numbers just look awful inside any chart or on the y-axis. Do you have a non js-solution for this issue? Because the images are provided within an email so there is no js-support given.
Hi typpo,
Once again, thank you for such a useful open source. This project really helps me a lot.
I find that it does not decode Japanese/Chinese character correctly.
Here is a simple example:
{
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'こんにちは',
data: [ 50, 60, 70, 180, 190 ]
}, {
label: 'Cats',
data: [ 100, 200, 300, 400, 500 ]
}]
}
}
Best regards,
Chris
I have query string parameters in the link I use to create a QR code, but these parameters are truncated when an Android user uses the camera app to read the code. I can circumvent this by turning the link into a shortened URL. Is there another parameter I could pass or something to the QR code generator that would first shorten the link I submit via the text variable, then turn it into the QR image? I realize this would require either a database to house the shortcut, or could it use tinyurl.com or tiny.cc ? This would be a super cool addition and make the images less busy, more readable as well! Just an idea for a great feature!
I was curious if there's a reason the newly added /healthcheck
route generates random data and actually creates a chart? It seems a bit too expensive for a healthcheck -- though it does test whether the chart generation works; To run this in k8s I just need a simple healthcheck route that is super cheap to evaluate (such as returning 200 OK
without any work).
Hi, first of all many thanks for this amazing library
I have noticed that i cant pass gradient color in any way. Currently i am using POST method and stringify the chart parameter so it will be transformed to code on the server side.
And for some reason the gradient color transcoded to undefined after i use stringify
I am wondering if it is even possible to pass gradients
This is my code:
const { stringify } = require('javascript-stringify');
const {createCanvas, loadImage} = require('canvas')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')
const getGradientFill = (...colors) => {
const gradientFill = ctx.createLinearGradient(500, 0, 100, 0);
colors.forEach((color,i) => gradientFill.addColorStop(i, color));
return gradientFill;
};
const gradientGreen = getGradientFill("#6ba141", "#84d66a");
const gradientRed = getGradientFill("#a0191e", "#c32d38");
const values = [42.5, -75.3, 100, -25.1];
const barChart = {
backgroundColor: "white",
width: 1080,
height: 1080,
format: "png",
chart: stringify({
type: 'bar',
data: {
labels: ["Week", "Month", "Quarter", "YTD"],
"yLabels": [
100,
-100
],
datasets: [
{
data: values,
// stack: "stack0",
backgroundColor: values.map(value => value < 0 ? gradientRed : "#84d66a"),
datalabels: {
// display labels for this specific dataset
display: true,
anchor: (context) => {
const index = context.dataIndex;
const value = context.dataset.data[index];
return value > 0 ? "start" : "end"
// return "end"
},
align: "start",
formatter: (value) => value + "%",
color: "white",
font: {
size: 34,
weight: "bold"
}
},
borderColor: "black",
borderWidth: 2,
},
]
},
options: {
barRoundness: 10,
legend: {display: false},
title: {
display: true,
},
layout: {
padding: {
left: 143,
right: 143,
top: 446,
bottom: 83
}
},
scales: {
yAxes: [
{
display: false,
gridLines: false,
suggestedMin: -100,
suggestedMax: 100,
stacked: true
}
],
xAxes: [
{
// display: false,
stacked: true,
gridLines: false
}
]
}
}
})
};
This makes it impossible to customize the autogenerated ticks. In my case I wanted to add digit grouping.
Here is a small example
{
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{
label: 'Dogs',
backgroundColor: 'chartreuse',
data: [50, 60, 70, 180, 190]
},
{
label: 'Cats',
backgroundColor: 'gold',
data: [100, 200, 300, 400, 500]
}
]
},
options: {
scales: {
yAxes: [
{
stacked: true,
ticks: {
callback: function(value) {
return value;
}
}
}
]
}
}
}
Removing the callback part:
ticks: {
callback: function(value) {
return value;
}
}
fixes it.
I understand not wanting to run user JS on your server, but afaik this is the only way to customize ticks in chart.js
relates to
#8
I am using this code i got from an admin at quickchart as an example of what to include in the api body for a chart url to be shortened.
{“chart”: {“type”: “bar”, “data”: {“labels”: [“Hello”, “World”], “datasets”: [{“label”: “Foo”, “data”: [1, 2]}]}}}
The above works just fine but for some reason the code below does not. Do I have improper syntax?
{“chart”:{“type”: “line”, “data”: {“labels”: [“jan 1”,“jan 2”, “jan 3”], “datasets”: [{“label”: “cow”,“data”: [4,5,6], “fill”: “false”, “borderColor”:“red”}]},“options”: {“title”: {“display”: “true”, “text”: “Daily Behavioral Occurrence vs Non-Occurrence”}, “scales”: {“yAxes”: [{“scaleLabel”: {“display”: “true”, “labelString”:“Non-Occurrence / Occurrence”}, “ticks”:{“reverse”: “false”, “stepSize”:1}}]},},}}
the code from above does produce a chart in the live editor on the quickchart website but when i send the API POST demand i get the weird cloudfare message again. (To produce the chart on the website remove {“chart”:}
Hi,
I am trying to create a horizontalBar chart, but I always get a grayscale image. It does not matter if the request is made by GET or POST method.
Am I missing something or this chart type is not fully supported?
Generated chart
Chart code (copied from another issue):
{ "type": "horizontalBar", "data": { "labels": ["1+ yr","1 - 12 months","1 - 4 weeks","< 1 week"], "datasets": [ { "label": "Participants", "data": [12,2,8,24] } ] } }
When I specify an image size using the w and h URL parameters, the resulting image always seems to be double.
For example,
https://quickchart.io/chart?w=200&h=100&c={type:%27line%27,data:{datasets:[{data:[50,60,70,180,190]}]}}
Results in an image that is 400x200.
Hello !
2 years ago we've built an alternative to Google Image-Charts that use the same API.
It's fully hosted and distributed world-wide to offer the same generation speed and availability as Google Image Charts (<250ms), see our website.
And it has a free tier to give back to the community, would it be possible to add a link to it from your repository?
Chart.js supports add a different type of dataset to a bar chart. example:
{
"type":'bar',
"data": {
labels: [
'January','February','March','April', 'May'
],
datasets: [
{
label: 'Dogs',
data: [
50,
60,
70,
180,
190
]
},
{
label:'Cats',
data: [
100,
200,
300,
400,
500
],
},
{
type:'line',
fill: false,
label:'Potatoes',
data: [
100,
400,
200,
400,
700
]
}
]
},
options: {
legend: {
position: 'bottom',
},
plugins: {
datalabels: {
display: true
}
}
}
}
Now I can't add a LineDataset to BarData through addDataset() function.
![image](https://user-images.githubusercontent.com/6793111/57594437-a8c95880-7572-11e9-97de-750adae2e0cc.png)
Is there any way to achieve it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.