Chart image and QR code web API

Overview

QuickChart

Build Status

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

Configuring your chart

See full QuickChart documentation for more information and examples.

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

QR Codes

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

https://quickchart.io/qr?text=Hello+world

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

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.

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:

Run on Google Cloud

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.

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.

Comments
  • Getting error message when passing graph through api

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

    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.

    question 
    opened by eoinparkinson 16
  • Callbacks are not supported

    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

    opened by Christoph-Wagner 12
  • Support organisational charts

    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:

    • https://github.com/chartjs/Chart.js/issues/671
    • https://github.com/chartjs/Chart.js/issues/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]}
    

    opened by Happypig375 10
  • Returning undefined

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

    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';}},}}],},},}
    
    opened by ghost 10
  • Gradients not working

    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
                            }
                        ]
                    }
                }
            })
        };
    
    opened by Blazsoul 7
  • Cannot get POST working with docker

    Cannot get POST working with docker

    I have just installed docker image on Mac. Looks like it is working, as /healthcheck returns {"success":true,"version":"1.7.1"} and /healthcheck/chart redirects to a chart image. I have also run Python example for GET requests and got a working URL.

    However, I cannot get POST to work. When I POST against /chart/create, I am getting 404 error with HTML response "Cannot POST /chart/create" (as /chart/create is meant for POST, shouldn't response be in JSON format rather than HTML 404, as that response is not really meant to be human readable?). I have also tried to POST against just /chart, and I get 200 response, but some binary data (maybe a png image, I didn't check it, but it would be great if that is the case). In this case, I also cannot turn that response into JSON, as JSON parser throws exception (Expecting value: line 1 column 1 (char 0)) - well, binary data.

    When I run that POST example against quickchart.io server, all is fine, so the problem is rather not with my Python code, but with the docker image.

    opened by Jacek-ghub 5
  • Doughnut Labels Disappear at Random Font Sizes

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

    image

    image

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

    image

    image

    I can't seem to find a reason for this behaviour.

    bug 
    opened by danieljoeblack 5
  • Url shortener throws cloud fare errors.

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

    opened by ghost 5
  • Expensive health-check

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

    opened by mcobzarenco 5
  • Build & run docker failing locally

    Build & run docker failing locally

    Hi there,

    I'm trying to run a version locally using the Dockerfile in the repo, and am getting the following error. Any assistance with the issue would be greatly appreciated.

    Build

    [09:46:23 quickchart (master u=)]$  docker build -t ianw/quickchart .
    [+] Building 77.6s (25/25) FINISHED
     => [internal] load build definition from Dockerfile                                                                                                                                                                                                                                                                                                              0.0s
     => => transferring dockerfile: 1.20kB                                                                                                                                                                                                                                                                                                                            0.0s
     => [internal] load .dockerignore                                                                                                                                                                                                                                                                                                                                 0.0s
     => => transferring context: 53B                                                                                                                                                                                                                                                                                                                                  0.0s
     => [internal] load metadata for docker.io/library/node:12-alpine3.12                                                                                                                                                                                                                                                                                             1.0s
     => [internal] load build context                                                                                                                                                                                                                                                                                                                                 0.7s
     => => transferring context: 331.55kB                                                                                                                                                                                                                                                                                                                             0.6s
     => [ 1/20] FROM docker.io/library/node:[email protected]:8883e589c6a5da49a6fea80afec58dec2213eb2aa26c6b65e2065d2b36df8492                                                                                                                                                                                                                                     2.7s
     => => resolve docker.io/library/node:[email protected]:8883e589c6a5da49a6fea80afec58dec2213eb2aa26c6b65e2065d2b36df8492                                                                                                                                                                                                                                       0.0s
     => => sha256:8572bc8fb8a32061648dd183b2c0451c82be1bd053a4ea8fae991436b92faebb 2.81MB / 2.81MB                                                                                                                                                                                                                                                                    0.3s
     => => sha256:cb5d9ca13a73e33fb8208d39ad36967e16a5e59043482dfe2adad3017e96156b 24.74MB / 24.74MB                                                                                                                                                                                                                                                                  0.8s
     => => sha256:488666e3ed33ad7297cf6031141b9a9ff6d8e44550ff068aae3730bdca632351 2.37MB / 2.37MB                                                                                                                                                                                                                                                                    0.2s
     => => sha256:8883e589c6a5da49a6fea80afec58dec2213eb2aa26c6b65e2065d2b36df8492 1.43kB / 1.43kB                                                                                                                                                                                                                                                                    0.0s
     => => sha256:1761242d2722473300d30eeafe1028e5cc1af878efdeb8db128d05c833f5becd 1.16kB / 1.16kB                                                                                                                                                                                                                                                                    0.0s
     => => sha256:2ac3ae179d11f9e31f5fd4862e1064a0e656a5ce8157d3eda89a4982c2e031fb 6.53kB / 6.53kB                                                                                                                                                                                                                                                                    0.0s
     => => sha256:af9b3b406668c183eae02d6cf9b9b97377e6df5519e51dab3a07c6c4fd9f61b0 451B / 451B                                                                                                                                                                                                                                                                        0.3s
     => => extracting sha256:8572bc8fb8a32061648dd183b2c0451c82be1bd053a4ea8fae991436b92faebb                                                                                                                                                                                                                                                                         0.2s
     => => extracting sha256:cb5d9ca13a73e33fb8208d39ad36967e16a5e59043482dfe2adad3017e96156b                                                                                                                                                                                                                                                                         1.5s
     => => extracting sha256:488666e3ed33ad7297cf6031141b9a9ff6d8e44550ff068aae3730bdca632351                                                                                                                                                                                                                                                                         0.1s
     => => extracting sha256:af9b3b406668c183eae02d6cf9b9b97377e6df5519e51dab3a07c6c4fd9f61b0                                                                                                                                                                                                                                                                         0.0s
     => [ 2/20] WORKDIR /quickchart                                                                                                                                                                                                                                                                                                                                   0.1s
     => [ 3/20] RUN echo "http://dl-cdn.alpinelinux.org/alpine/edge/community" >> /etc/apk/repositories                                                                                                                                                                                                                                                               0.2s
     => [ 4/20] RUN apk add --upgrade apk-tools                                                                                                                                                                                                                                                                                                                       1.0s
     => [ 5/20] RUN apk add --no-cache --virtual .build-deps yarn git build-base g++ python3                                                                                                                                                                                                                                                                          3.8s
     => [ 6/20] RUN apk add --no-cache --virtual .npm-deps cairo-dev pango-dev libjpeg-turbo-dev                                                                                                                                                                                                                                                                      3.6s
     => [ 7/20] RUN apk add --no-cache --virtual .fonts libmount ttf-dejavu ttf-droid ttf-freefont ttf-liberation ttf-ubuntu-font-family font-noto font-noto-emoji fontconfig                                                                                                                                                                                         3.8s
     => [ 8/20] RUN apk add wqy-zenhei --no-cache --repository http://nl.alpinelinux.org/alpine/edge/testing --allow-untrusted                                                                                                                                                                                                                                        4.2s
     => [ 9/20] RUN apk add libimagequant-dev --no-cache --repository=http://dl-cdn.alpinelinux.org/alpine/edge/main                                                                                                                                                                                                                                                  0.8s
     => [10/20] RUN apk add vips-dev --no-cache --repository=http://dl-cdn.alpinelinux.org/alpine/edge/community                                                                                                                                                                                                                                                      2.6s
     => [11/20] RUN apk add --no-cache --virtual .runtime-deps graphviz                                                                                                                                                                                                                                                                                               1.0s
     => [12/20] COPY package*.json .                                                                                                                                                                                                                                                                                                                                  0.0s
     => [13/20] COPY yarn.lock .                                                                                                                                                                                                                                                                                                                                      0.0s
     => [14/20] RUN yarn install --production                                                                                                                                                                                                                                                                                                                        45.8s
     => [15/20] RUN apk update                                                                                                                                                                                                                                                                                                                                        0.8s
     => [16/20] RUN rm -rf /var/cache/apk/* &&     rm -rf /tmp/*                                                                                                                                                                                                                                                                                                      0.3s
     => [17/20] RUN apk del .build-deps                                                                                                                                                                                                                                                                                                                               0.5s
     => [18/20] COPY *.js ./                                                                                                                                                                                                                                                                                                                                          0.0s
     => [19/20] COPY lib/*.js lib/                                                                                                                                                                                                                                                                                                                                    0.0s
     => [20/20] COPY LICENSE .                                                                                                                                                                                                                                                                                                                                        0.0s
     => exporting to image                                                                                                                                                                                                                                                                                                                                            4.9s
     => => exporting layers                                                                                                                                                                                                                                                                                                                                           4.9s
     => => writing image sha256:0930281991478abad7ab46732f631c747a6fdbf5929de08d3c843e58daa4a76a                                                                                                                                                                                                                                                                      0.0s
     => => naming to docker.io/ianw/quickchart                                                                                                                                                                                                                                                                                                                        0.0s
    
    Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
    

    Run

    [09:47:53 quickchart (master u=)]$ docker run -p 8080:3400 ianw/quickchart
    internal/modules/cjs/loader.js:1057
      return process.dlopen(module, path.toNamespacedPath(filename));
                     ^
    
    Error: Error relocating /usr/lib/librsvg-2.so.2: pango_attr_overline_color_new: symbol not found
        at Object.Module._extensions..node (internal/modules/cjs/loader.js:1057:18)
        at Module.load (internal/modules/cjs/loader.js:863:32)
        at Function.Module._load (internal/modules/cjs/loader.js:708:14)
        at Module.require (internal/modules/cjs/loader.js:887:19)
        at require (internal/modules/cjs/helpers.js:74:18)
        at Object.<anonymous> (/quickchart/node_modules/text2png/node_modules/canvas/lib/bindings.js:3:18)
        at Module._compile (internal/modules/cjs/loader.js:999:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
        at Module.load (internal/modules/cjs/loader.js:863:32)
        at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    
    opened by kochis 4
  • Tooltip not working in email

    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?

    opened by imanagemyschool 4
  • The Docker image is not built.

    The Docker image is not built.

    After executing the command docker build -t ianw/quickchart . I have this error:

    ERROR: unable to select packages: so:libtiff.so.6 (no such package): required by: vips-8.13.3-r2[so:libtiff.so.6]

    I use 1.8 version for built this docker image. Any ideas how to fix this error?

    opened by kartblanch 3
  • Docker image no longer builds on RPi Buster armhf

    Docker image no longer builds on RPi Buster armhf

    I'm using 2021-05-07-raspios-buster-armhf-lite on R-Pi 3 B+ to host a legacy project running in Python2 (don't ask). The latest github clone (as of 20221220) no longer builds. It last worked (AFAIK) around March 2022. I have exported the built image from that timeframe and can use that for the time being.

    Current system - uname -a Linux raspberrypi1 5.10.103-v7+ #1529 SMP Tue Mar 8 12:21:37 GMT 2022 armv7l GNU/Linux

    Build output -

    [email protected]:/home/pi/quickchart# docker image build -t ianw/quickchart:006 . Sending build context to Docker daemon 839.1MB Step 1/23 : FROM node:12-alpine3.15 ---> 37b988e559b7 Step 2/23 : ENV NODE_ENV production ---> Running in 7ba31ad8efdf Removing intermediate container 7ba31ad8efdf ---> 5d10cd92a7d2 Step 3/23 : WORKDIR /quickchart ---> Running in a9dfa661c065 Removing intermediate container a9dfa661c065 ---> 804f08333098 Step 4/23 : RUN echo "http://dl-cdn.alpinelinux.org/alpine/edge/community" >> /etc/apk/repositories ---> Running in f6e06405be07 Removing intermediate container f6e06405be07 ---> 112488b1640c Step 5/23 : RUN apk add --upgrade apk-tools ---> Running in f5e9df0f5138 fetch https://dl-cdn.alpinelinux.org/alpine/v3.15/main/armv7/APKINDEX.tar.gz 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:1416F086:SSL routines:tls_process_server_certificate:certificate verify failed:ssl/statem/statem_clnt.c:1914: ERROR: https://dl-cdn.alpinelinux.org/alpine/v3.15/main: Permission denied WARNING: Ignoring https://dl-cdn.alpinelinux.org/alpine/v3.15/main: No such file or directory fetch https://dl-cdn.alpinelinux.org/alpine/v3.15/community/armv7/APKINDEX.tar.gz 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:1416F086:SSL routines:tls_process_server_certificate:certificate verify failed:ssl/statem/statem_clnt.c:1914: fetch http://dl-cdn.alpinelinux.org/alpine/edge/community/armv7/APKINDEX.tar.gz ERROR: https://dl-cdn.alpinelinux.org/alpine/v3.15/community: Permission denied WARNING: Ignoring https://dl-cdn.alpinelinux.org/alpine/v3.15/community: No such file or directory (1/2) Upgrading libcrypto1.1 (1.1.1n-r0 -> 1.1.1s-r0) (2/2) Upgrading libssl1.1 (1.1.1n-r0 -> 1.1.1s-r0) OK: 5 MiB in 16 packages Removing intermediate container f5e9df0f5138 ---> ac35a3ccf8be Step 6/23 : RUN apk add --no-cache --virtual .build-deps yarn git build-base g++ python3 ---> Running in 2fdaa552948a fetch https://dl-cdn.alpinelinux.org/alpine/v3.15/main/armv7/APKINDEX.tar.gz 1996190608:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996190608:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996190608:error:1416F086:SSL routines:tls_process_server_certificate:certificate verify failed:ssl/statem/statem_clnt.c:1919: WARNING: Ignoring https://dl-cdn.alpinelinux.org/alpine/v3.15/main: Permission denied fetch https://dl-cdn.alpinelinux.org/alpine/v3.15/community/armv7/APKINDEX.tar.gz 1996190608:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996190608:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996190608:error:1416F086:SSL routines:tls_process_server_certificate:certificate verify failed:ssl/statem/statem_clnt.c:1919: fetch http://dl-cdn.alpinelinux.org/alpine/edge/community/armv7/APKINDEX.tar.gz WARNING: Ignoring https://dl-cdn.alpinelinux.org/alpine/v3.15/community: Permission denied ERROR: unable to select packages: ca-certificates (no such package): required by: nodejs-current-19.3.0-r0[ca-certificates] so:libbrotlidec.so.1 (no such package): required by: nodejs-current-19.3.0-r0[so:libbrotlidec.so.1] so:libbrotlienc.so.1 (no such package): required by: nodejs-current-19.3.0-r0[so:libbrotlienc.so.1] so:libcares.so.2 (no such package): required by: nodejs-current-19.3.0-r0[so:libcares.so.2] so:libcrypto.so.3 (no such package): required by: nodejs-current-19.3.0-r0[so:libcrypto.so.3] so:libicui18n.so.72 (no such package): required by: nodejs-current-19.3.0-r0[so:libicui18n.so.72] so:libicuuc.so.72 (no such package): required by: nodejs-current-19.3.0-r0[so:libicuuc.so.72] so:libnghttp2.so.14 (no such package): required by: nodejs-current-19.3.0-r0[so:libnghttp2.so.14] so:libssl.so.3 (no such package): required by: nodejs-current-19.3.0-r0[so:libssl.so.3] so:libuv.so.1 (no such package): required by: nodejs-current-19.3.0-r0[so:libuv.so.1] git (no such package): required by: .build-deps-19700101.000000[git] build-base (no such package): required by: .build-deps-19700101.000000[build-base] g++ (no such package): required by: .build-deps-19700101.000000[g++] python3 (no such package): required by: .build-deps-19700101.000000[python3] The command '/bin/sh -c apk add --no-cache --virtual .build-deps yarn git build-base g++ python3' returned a non-zero code: 17 [email protected]:/home/pi/quickchart#

    It all goes wrong here:

    Step 5/23 : RUN apk add --upgrade apk-tools ---> Running in f5e9df0f5138 fetch https://dl-cdn.alpinelinux.org/alpine/v3.15/main/armv7/APKINDEX.tar.gz 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:0D0D90AD:asn1 encoding routines:ASN1_TIME_adj:error getting time:crypto/asn1/a_time.c:330: 1996014480:error:1416F086:SSL routines:tls_process_server_certificate:certificate verify failed:ssl/statem/statem_clnt.c:1914:

    I have tried the various 'solutions' thrown up by google - none have worked.

    TIA - MarkB

    opened by markblinkhorn 1
  • Using backgroundImageUrl on self hosted instance

    Using backgroundImageUrl on self hosted instance

    Greetings and thanks a lot for this amazing software!

    I've installed a self hosted instance and it's working fine. However, I cannot get the backgroundImageUrl plugin to work... My JSON description works on https://quickchart.io, but on mine I get the graph without the background. I opened a shell inside the container and a wget of the url correctly fetches the png file.

    Do I have to install/configure something for that?

    Thanks in advance

    Regards

    enhancement 
    opened by gregfr 0
  • backgroundColor as Array not working

    backgroundColor as Array not working

    I have identified an issue with backgroundColor in datasets not working correctly the value is in an array.

    If below example is posted to quickchart.io, it renders correctly with colors on all bars, likewise if run in a local browser against charts.js (3.9.1) it renders correctly, however running it against local docker image of latest build, the bars for first person are colored correctly, but bars for all other users are grey.

    If backgroundColor is changed to a string value, it works ok, but as an array works across other platforms I feel the same behaviour should be expected.

    { "backgroundColor": "white", "width": 1000, "height": 500, "format": "png", "chart": { "type": "horizontalBar", "data": { "labels": ["Howard", "James", "Fred", "Kylie", "Mark", "Craig"], "datasets": [{ "data": [1, 3, 0, 8, 7, 0], "backgroundColor": ["#388BF7"], "borderWidth": 1, "maxBarThickness": 100, "label": "Votes For" }, { "data": [2, 2, 0, 6, 7, 0], "backgroundColor": ["#2AC0D2"], "borderWidth": 1, "maxBarThickness": 100, "label": "Votes Against" }] }, "options": { "indexAxis": "y", "elements": { "bar": { "borderWidth": 2 } }, "responsive": true, "maintainAspectRatio": false, "legend": { "position": "bottom", "labels": { "color": "#919191" }, "display": true }, "title": { "display": false }, "scales": { "y": { "axis": "y", "ticks": { "color": "#919191", "autoSkip": false, "minRotation": 0, "maxRotation": 50, "mirror": false, "textStrokeWidth": 0, "textStrokeColor": "", "padding": 3, "display": true, "autoSkipPadding": 3, "labelOffset": 0, "minor": {}, "major": {}, "align": "center", "crossAlign": "near", "showLabelBackdrop": false, "backdropColor": "rgba(255, 255, 255, 0.75)", "backdropPadding": 2 }, "grid": { "color": "rgba(145,145,145,0.2)", "offset": true, "display": true, "lineWidth": 1, "drawBorder": true, "drawOnChartArea": true, "drawTicks": true, "tickLength": 8, "borderDash": [], "borderDashOffset": 0, "borderWidth": 1, "borderColor": "rgba(0,0,0,0.1)" }, "type": "category", "offset": true, "display": true, "reverse": false, "beginAtZero": false, "bounds": "ticks", "grace": 0, "title": { "display": false, "text": "", "padding": { "top": 4, "bottom": 4 }, "color": "#666" }, "id": "y", "position": "left" }, "x": { "axis": "x", "ticks": { "color": "#919191", "autoSkip": false, "minRotation": 0, "maxRotation": 50, "mirror": false, "textStrokeWidth": 0, "textStrokeColor": "", "padding": 3, "display": true, "autoSkipPadding": 3, "labelOffset": 0, "minor": {}, "major": {}, "align": "center", "crossAlign": "near", "showLabelBackdrop": false, "backdropColor": "rgba(255, 255, 255, 0.75)", "backdropPadding": 2 }, "grid": { "color": "rgba(145,145,145,0.2)", "borderColor": "rgba(145,145,145,0.2)", "display": true, "lineWidth": 1, "drawBorder": true, "drawOnChartArea": true, "drawTicks": true, "tickLength": 8, "offset": false, "borderDash": [], "borderDashOffset": 0, "borderWidth": 1 }, "type": "linear", "beginAtZero": true, "display": true, "offset": false, "reverse": false, "bounds": "ticks", "grace": 0, "title": { "display": false, "text": "", "padding": { "top": 4, "bottom": 4 }, "color": "#666" }, "id": "x", "position": "bottom" } } } } }

    opened by mrjemson 2
Releases(v1.8.0)
  • v1.8.0(Dec 28, 2022)

  • v1.4.3(Nov 12, 2020)

  • v1.4.2(Nov 3, 2020)

    Features

    • Add support for predefined color schemes: chartjs-plugin-colorschemes
    • Add support for Google Image Charts QR code format
    • Add support for emoji fonts

    Bugfixes

    • Fix a crash when graph doesn't have datasets
    • Fix a bug where outlabeledDoughnuts would not support charts with doughnutlabels plugin
    • Set Google Image Charts pixel ratio to 1.0 (true size)
    • Handle and log failed Google Image Charts

    Misc

    • Add X-quickchart-error header which is populated on error
    • Add built-in chart padding plugin
    • Add width and height maximums
    Source code(tar.gz)
    Source code(zip)
  • v1.4.1(Jun 6, 2020)

  • v1.4.0(May 27, 2020)

    Many features and bugfixes, including

    • Support for Google Image Charts-style URLs
    • Support for doughtnut labels, violin, box plot, and graphviz visualizations
    • Built-in functions for helping with gradient fills and patterns
    • Allow custom chart plugins
    • much more
    Source code(tar.gz)
    Source code(zip)
  • v1.3.0(Dec 3, 2019)

    • Upgrade Chart.js to 2.9.3 (from 2.7.3)
    • Fix a bug where some chart POST options would not be parsed correctly
    • Improve Javascript sandboxing
    • Improvements to logging
    • Add timeouts and error handling to telemetry
    • Add test suite
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Oct 3, 2019)

  • v1.1.0(Sep 9, 2019)

    First tagged release!

    Features/Additions

    • PDF rendering
    • base64 encoding support of chart configs
    • Health check endpoints
    • Ability to store charts as short URLs (via Cloudflare KV)
    • Configurable rate limiting
    • API keys to bypass rate limiting
    • Monit config example
    • Load testing example

    Bugfixes

    • Add a global request timeout to prevent server from locking up under heavy load
    • Fix an issue where sparklines could have pixels cut off using automatic scaling
    • Fix an issue causing certain chart configs to be misinterpreted due to vm2 bug (#19)
    Source code(tar.gz)
    Source code(zip)
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

null 2 Aug 18, 2022
TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

null 4 Mar 3, 2021
Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions.

chartjs-plugin-regression Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions using

Wilfredo Pomier 14 Dec 18, 2022
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.4k Jan 2, 2023
J2CL and GWT Charts library based on CHART.JS

Charba - J2CL and GWT Charts library based on CHART.JS What's Charba GWT Web toolkit doesn't have charting library available out of the box. There are

Pepstock.org 56 Dec 17, 2022
Zoom and pan plugin for Chart.js

chartjs-plugin-zoom A zoom and pan plugin for Chart.js >= 3.0.0 For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin. Panning can be

Chart.js 510 Jan 2, 2023
Chart.js Venn and Euler Diagrams

Chart.js Venn and Euler Diagram Chart Chart.js module for charting venn diagrams with up to five sets. Adding new chart type: venn and euler. Related

UpSet.js 23 Dec 6, 2022
Chart.js Choropleth and Bubble Maps

Chart.js Geo Chart.js module for charting maps with legends. Adding new chart types: choropleth and bubbleMap. works great with https://github.com/cha

Samuel Gratzl 224 Dec 28, 2022
Chart.js Box Plots and Violin Plot Charts

Chart.js Box and Violin Plot Chart.js module for charting box and violin plots. This is a maintained fork of @datavisyn/chartjs-chart-box-and-violin-p

Samuel Gratzl 61 Dec 14, 2022
:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

C3.js 9.2k Jan 2, 2023
GPL version of Javascript Gantt Chart

dhtmlxGantt Getting started | Features | Follow us | License | Useful links dhtmlxGantt is an open source JavaScript Gantt chart that helps you illust

null 952 Dec 29, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

NAVER 5.4k Jan 1, 2023
:bar_chart: A library of modular chart components built on D3

Plottable Plottable is a library of chart components for creating flexible, custom charts for websites. It is built on top of D3.js and provides highe

Palantir Technologies 2.9k Dec 31, 2022
📈 A small, fast chart for time series, lines, areas, ohlc & bars

?? μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Leon Sorokin 7.5k Jan 7, 2023