typpo/quickchart

Chart image and QR code web API

QuickChart

QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in non-dynamic environments such as email, SMS, chat rooms, and so on.

See it in action

The chart image generation service is available online at QuickChart.io. There is an interactive editor that allows you to adjust inputs and build images.

Here's an example chart that is defined completely by its URL:

The above image can be included anywhere you like. Here is its URL:

https://quickchart.io/chart?width=500&height=300&c={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]}]}}

As you can see, the Javascript or JSON object contained in the URL defines the chart:

{
  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 ]
    }]
  }
}

Go to the full QuickChart documentation to learn more. See gallery for examples.

Configuring your chart

The chart configuration object is based on the popular Chart.js API. Check out the Chart.js documentation for more information on how to customize your chart, or see QuickChart documentation for API options.

QuickChart includes many Chart.js plugins that allow you to add chart annotations, data labels, and more: chartjs-plugin-datalabels, chartjs-plugin-annotation, chartjs-plugin-piechart-outlabels, chartjs-chart-radial-gauge, chartjs-chart-box-and-violin-plot , chartjs-plugin-doughnutlabel, and chartjs-plugin-colorschemes.

Chart.js versions

Chart.js v3 and v4 are supported via the version parameter (documentation to read more about parameters). Custom chart plugins such as annotations and outlabels currently not available for >= 3.0.0.

Each QuickChart instance should use 1 specific version of the Chart.js library. Mixing and matching versions (e.g., rendering a v2 chart followed by a v3 chart) is not well supported.

QR Codes

The service also produces QR codes. For example, https://quickchart.io/qr?text=Hello+world produces:

The /qr endpoint has the following query parameters:

• text - QR code data (required)
• format - png or svg (png default)
• size - size in pixels of one side of the square image (defaults to 150)
• margin - size of the QR image margin in modules (defaults to 4)
• ecLevel - Error correction level (defaults to M)
• dark - Hex color code for dark portion of QR code (defaults to 000000)
• light - Hex color code for light portion of QR code (defauls to ffffff)

Client libraries

• quickchart-js - Javascript
• quickchart-python - Python
• quickchart-ruby - Ruby
• quickchart-php - PHP
• quickchart-csharp - C#
• quickchart-java - Java
• chartjs-to-image - Javascript package for Chart.js images

Dependencies and Installation

Chart generation requires several system dependencies: Cairo, Pango, libjpeg, and libgif. Run ./scripts/setup.sh for a fresh install on Linux machines (note that this also installs yarn, node, and monit).

To install system dependencies on Mac OSX, you probably just need to brew install cairo pango libffi. You may have to export PKG_CONFIG_PATH="/usr/local/opt/libffi/lib/pkgconfig" before installing node packages.

Once you have system dependencies installed, run yarn install or npm install to install the node dependencies.

Running the server

node index.js will start the server on port 3400. Set your PORT environmental variable to change this port.

Docker

A docker image is available on dockerhub at ianw/quickchart.

Building

Dockerfile sets up a server that provides chart and qr code web endpoints. It is not parameterized and provides exactly the same web service as https://quickchart.io/.

The Docker image for this project is built with the following command:

docker build -t ianw/quickchart .

Running

The server runs on port 3400 within the container. This command will expose the server on port 8080 on your host (hostport:containerport):

docker run -p 8080:3400 ianw/quickchart

The production service on QuickChart.io runs behind an NGINX reverse proxy via the config available in nginx/. You should modify this for your own purposes or use a docker image such as nginx-proxy. Of course, you can always serve traffic directly from Node, but it is generally best practice to put something in front of it.

Securing your self-hosted instance

If you are hosting QuickChart youself, take care not to expose the service to untrusted parties. Because Chart.js configs may contain arbitrary Javascript, it is necessary to properly sandbox your QuickChart instance.

Deploy

By following the Docker instructions above, you can deploy the service to any platform that supports running containers.

Clicking the following will execute the Docker build on a remote machine and deploy the service to Google Cloud Run an automatically scaled and pay-per-request environment:

Securing your self-hosted instance

This server assumes all Javascript sent in the config object is friendly. If you are hosting QuickChart youself, take care not to expose the service to untrusted parties. Because Chart.js configs may contain arbitrary Javascript, it is necessary to properly sandbox your QuickChart instance if you are exposing it to the outside world.

Health and Monitoring

QuickChart has two API endpoints to determine the health of the service.

/healthcheck is a basic endpoint that returns a 200 status code and a JSON object that looks like this: {"success":true,"version":"1.1.0"}.

A second endpoint, /healthcheck/chart returns a 302 status code and redirects to a chart with random attributes. Although it is a more expensive endpoint, it can be useful for cache busting or testing chart rendering.

The hosted QuickChart service uses monit to make sure the service is online and restart it if not. An example monit config is in test/monit.

Limitations

If you are self-hosting QuickChart, each QuickChart instance should use a single version of the Chart.js library. Mixing and matching versions (e.g., rendering a v2 chart followed by a v3 chart) is not well supported.

This self-hosted QuickChart implementation currently supports the /chart, /qr, and /graphviz endpoints. Other endpoints such as /wordcloud, watermark, /chart/create are not available in this version due to non-OSS 3rd-party dependencies.

License

QuickChart is open source, licensed under version 3 of the GNU AGPL. If you would like to modify this project for commercial purposes (and not release the source code), please contact me.

quickchart's Issues

Docker v1.4.0: Something went wrong installing the "sharp" module

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

Support for big numbers with delimiter

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.

Error with Xibo

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.

Height and width not being respected by POST

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 false
• maintainAspectRatio both true and false

None 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!

Support organisational charts

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:

• chartjs/Chart.js#671
• chartjs/Chart.js#5198

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]}

Base64 Data

It would be nice to support base64 for the data, hence avoiding multiple problems of having to deal with encoding JSON in the URL.

Chart Error: You are missing variable `c` or `chart`

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.

Expensive health-check

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).

Not encoding Japanese/Chinese correctly

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

Font Error

I have been using quick for a long time.
But Just three days ago I had a font error in the Myanmar language.
It was fine before.

Now it only shows like this.

Allow formatting/callback functions to be submitted as strings

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:

1. JSON Stringify an object that looks like this (Take note of the $FORMATFUNC$ delimiter):
   
2. Use a replace function to insert the function as it is not JSON compliant:
   

Thanks for your consideration.

lineTension option has no effect

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',
    }
  }   
}

passing js to ticks callback dont work

        "ticks": {
                "beginAtZero": true,
                "fontSize": 8,
                "fontColor": "#8192E8",
                "callback": "function(label){return label + 'h';}"
            }

Support for labels outside of the Pie Charts

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 :)

how can I get GeoChart in quickchart

Can't set `format=svg` for `qr` endpoint

Steps to Reproduce

Use this URL:

https://quickchart.io/qr?text=Bug&format=svg

Expected:

An QR code in SVG format

Actual

A broken QR Code

Feature Request: Default Colors in Chart API Parameters?

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.

Provide access to Chart.js global defaults

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

Getting error message when passing graph through api

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.

Returning undefined

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';}},}}],},},}

URL shorting self-hosted?

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.

horizontalBar type is greyed out

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] } ] } }

small bar chart without axes, specific colors

I am trying to migrate this chart, which is a 4-bucket distribution:

https://chart.apis.google.com/chart?cht=bvg&chs=150x22&chco=28BB64AA|ECA648|F38243|FF463C&chd=t:9491,484,203,6647&chf=bg,s,65432100&chds=-475.0,9970.0&chbh=a&chxt=x,y&chxs=0,,0,0,_|1,,0,0,_

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):

https://image-charts.com/chart?cht=bvg&chs=150x22&chco=28BB64AA|ECA648|F38243|FF463C&chd=t:9491,484,203,6647&chf=bg,s,65432100&chds=-475.0,9970.0

How can I do this with quickchart.io?

Trend lines are a missing feature

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?

docker image encoding chinese incorrectly

relates to
#8

Would you be interested in sharing image-charts.com as an alternative ?

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?

Adding shorten URL to QR code generation

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!

PHP and callback problem

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

Request for adding background colors

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 !

Line graph dashed line not working

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
         }
      }
   }
}

Gradients not working

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
                        }
                    ]
                }
            }
        })
    };

request: sparkline as a style

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).

How to add a LineDataset to BarData?

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?

Allow overriding helpers and elements

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!

Can't set `margin=0` query for `qr` endpoint

Steps to reproduce

Use this URL:

https://quickchart.io/qr?text=Bug&margin=0

Expected

An QR Code with no whitespace around it.

Actual

An QR Code with margin of "4".

Rendered charts return 502 error

When i generate chart via post request, when i try to access this chart it return 502 error

Doughnut Labels Disappear at Random Font Sizes

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.

Sparkline collapses for some datasets if plot height is 30 or lower

I am building a grid of sparklines and have found that for some datasets lines collapse to Y=0.

Plot height 30, collapsing:

https://quickchart.io/chart?w=70&h=30&c={type:%27sparkline%27,options:{elements:{point:{radius:2}},scales:{yAxes:[{display:false,ticks:{suggestedMin:0}}]}},data:{datasets:[{data:[494,796,867,1049,880,5]}]}}

Height 31, normal.

https://quickchart.io/chart?w=70&h=31&c={type:%27sparkline%27,options:{elements:{point:{radius:2}},scales:{yAxes:[{display:false,ticks:{suggestedMin:0}}]}},data:{datasets:[{data:[494,796,867,1049,880,5]}]}}

Other datasets don't care.

https://quickchart.io/chart?w=70&h=30&c={type:%27sparkline%27,options:{elements:{point:{radius:2}},scales:{yAxes:[{display:false,ticks:{suggestedMin:0}}]}},data:{datasets:[{data:[1080,1512,2596,3068,2860,17]}]}}

PolarArea charts are displaying tooltips, how to disable?

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?

docker run error Command failed with signal "SIGSEGV"

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.

Url shortener throws cloud fare errors.

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”:}

Is Gantt chart supported in quickchart? If not is it possible to do so?

Callbacks are not supported

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

How to embed Emoji as labels ?

I was trying to embed Emojis, but the result is a decoded text like this.

Any steps I missed?

image size is doubled what is specified

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.

Reccomended memory allocation for docker container?

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.

font color

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

Title in sparkline style takes too much space

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:

https://quickchart.io/chart?w=300.0&h=50.0&c={options:{title:{display:true,fontSize:8,padding:0,lineHeight:0.9,text:%20%27Custom%20Chart%20Title%27}},type:%27sparkline%27,data:{datasets:[{fill:false,borderColor:%27%232600B3%27,data:[879.11,825.94,379.39,126.72,544.82,733.4,718.33,660.73,709.85,721.42,617.17,861.83,772.04,707.63,721.03,834.32,1160.28,1158.58,1375.07,1317.01,1205.02,1283.56,1314.6,1310.92,1284.54,1387.67,1341.67,1372,1936.74,2004.12,2192.87,2104.62,2372.13,2785.5,2962.51,1875.21,1396.24,1339.36,1328.07,1482.32,1782.14,1802.6,1721.93,1549.49,1591.41,1741.08,1860.23,1945.79,1777.81,2293.56,1014.22,527.88,461.3,2899.83,3537.15,2898.9,2786.21,1754.3,1549.68,1528.1,1632.58]}]}}

Line Chart without shading

Hi,

I am new to this but have managed to create a line chart with the code below, however, when it creates the chart there is shading from the lien to the x-axes. I don't want any shading at all just the lines. How do I achieve this?

Tooltip not working in email

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?