### Installing QuickChart Python Library

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/python-chart-example.md

This command uses pip, the Python package installer, to download and install the official quickchart.io client library for Python. This library is required to interact with the QuickChart API from a Python application.

```bash
pip install quickchart.io
```

--------------------------------

### Install Dependencies with Yarn (Bash)

Source: https://github.com/typpo/quickchart-docs/blob/master/README.md

Installs the project dependencies using the Yarn package manager, required before running or building the site.

```bash
$ yarn
```

--------------------------------

### Start Local Development Server with Yarn (Bash)

Source: https://github.com/typpo/quickchart-docs/blob/master/README.md

Starts a local development server for the website, typically accessible via a browser, with live reloading for changes.

```bash
$ yarn start
```

--------------------------------

### Example Google Image Charts URL

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/integrations/google-image-charts/migrating-from-google-image-charts.md

An example URL used to generate a chart image via the deprecated Google Image Charts service. This format is the starting point before migration.

```URL
https://chart.googleapis.com/chart?cht=bvg&chs=300x200&chd=t:5,5,5|10,10,10|15,15,15&chco=4d89f9,c6d9fd,00B88A&chds=0,20&chbh=a&chxs=0,000000,0,0,_&chxt=y&chm=N,000000,0,,10|N,000000,1,,10|N,000000,2,,10
```

--------------------------------

### Basic Barcode Request Example

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/barcode-api.mdx

A basic example demonstrating how to make an HTTP GET request to the Barcode API with the minimum required parameters: `type` and `text`.

```url
https://quickchart.io/barcode?type=datamatrix&text=foo
```

--------------------------------

### Example Generated Short URL

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/short-urls-and-templates.md

An example of the short URL generated by the /chart/create endpoint.

```text
https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232
```

--------------------------------

### QuickChart GET Request URL Example

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/intro.mdx

This URL demonstrates how to generate a chart image using the QuickChart GET endpoint. The Chart.js configuration is URL-encoded and passed as the `c` query parameter. Accessing this URL directly or via an HTTP GET request will return the chart image.

```url
**https://quickchart.io/chart?c=**{type:'bar',data:{labels:[2012,2013,2014,2015, 2016],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}
```

--------------------------------

### Example GraphViz Chart URL

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/integrations/google-image-charts/examples.md

Provides a complete URL example for generating a GraphViz chart using the default `dot` engine. The `chl` parameter contains the graph definition written in the DOT language.

```URL Parameters
https://quickchart.io/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]}
```

--------------------------------

### Install Google Charts Node

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/google-charts-image-server.md

Installs the google-charts-node package using npm, making it available for use in a Node.js project.

```bash
npm install google-charts-node
```

--------------------------------

### Authenticating QuickChart Chart GET Request (URL)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/authentication.md

Example URL demonstrating how to include the API key as a GET parameter for a chart rendering request. This bypasses rate limits and enables paid features.

```URL
https://quickchart.io/chart?**key=YOUR_API_KEY**&c=%7Btype%3A%27bar%27%2Cdata%3A%7Blabels%3A%5B%27January%27%2C%27February%27%2C%27March%27%2C%27April%27%2C%20%27May%27%5D%2C%20datasets%3A%5B%7Blabel%3A%27Dogs%27%2Cdata%3A%5B50%2C60%2C70%2C180%2C190%5D%7D%2C%7Blabel%3A%27Cats%27%2Cdata%3A%5B100%2C200%2C300%2C400%2C500%5D%7D%5D%7D%7D
```

--------------------------------

### Example Iframe URL

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/short-urls-and-templates.md

An example of the URL used to display an interactive chart in an iframe, derived from a short URL.

```text
https://quickchart.io/chart-maker/view/9a560ba4-ab71-4d1e-89ea-ce4741e9d232
```

--------------------------------

### Example QR Code URL

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/integrations/google-image-charts/examples.md

Demonstrates how to generate a QR code using the QuickChart API by specifying the `/qr` endpoint and providing the text content to encode via the `text` parameter.

```URL Parameters
https://quickchart.io/qr?text=Here's my text
```

--------------------------------

### Base QuickChart Render URL (Real Example)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/chart-maker.md

Provides a real example of a base QuickChart render URL generated from the chart maker, which can be used for customization.

```URL
https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232
```

--------------------------------

### Authenticating QuickChart QR GET Request (URL)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/authentication.md

Example URL demonstrating how to include the API key as a GET parameter for a QR code rendering request. This bypasses rate limits and enables paid features.

```URL
https://quickchart.io/qr?**key=YOUR_API_KEY**&text=Hello%20world
```

--------------------------------

### Example QuickChart API URL Call

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/parameters.md

An example URL demonstrating how to pass basic parameters like width, height, and the chart configuration object to the QuickChart `/chart` endpoint using query string parameters. Note that the 'chart' parameter content needs proper encoding.

```URL
https://quickchart.io/chart?**width**=500&**height**=300&**chart**={...}
```

--------------------------------

### Initialize NPM Project and Install Dependencies (Shell)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/integrations/mjml.md

Initializes a new Node.js project with default settings and installs the necessary MJML and mjml-chartjs packages.

```sh
npm init -y
npm install mjml mjml-chart mjml-chartjs
```

--------------------------------

### Base QuickChart Render URL for Iframe Example

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/chart-maker.md

Provides the base QuickChart render URL used as the starting point for generating the corresponding interactive iframe view URL.

```URL
https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232
```

--------------------------------

### Creating a QuickChart instance and setting config in Ruby

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/client-libraries.mdx

This snippet demonstrates how to use the quickchart gem in Ruby. It shows how to install the gem, require it, create a QuickChart object by passing configuration and options to the constructor, and retrieve the chart URL. Requires the `quickchart` gem.

```ruby
require 'quickchart'

qc = QuickChart.new(
  {
    type: "bar",
    data: {
      labels: ["Hello world", "Test"],
      datasets: [{
        label: "Foo",
        data: [1, 2]
      }]
    }
  },
  width: 600,
  height: 300,
  device_pixel_ratio: 2.0,
)

# Print the chart URL
puts qc.get_url
```

--------------------------------

### Generate Basic Datamatrix Barcode

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/barcode-api.mdx

Example URL to generate a basic datamatrix barcode encoding the text 'Hello, World!' using the QuickChart Barcode API.

```url
https://quickchart.io/barcode?type=datamatrix&text=Hello, World!
```

--------------------------------

### Example QuickChart Signed URL (URL)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/authentication.md

Example URL demonstrating the structure of a signed QuickChart request, including the sig (HMAC signature) and accountId parameters. This method is used for authenticating requests from untrusted clients.

```URL
https://quickchart.io/chart?c={...}&sig=88cd2108b5347d973cf39cdf9053d7dd42704876d8c9a9bd8e2d168259d3ddf7&accountId=12345
```

--------------------------------

### Generic HTML Iframe Embedding Example

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/chart-maker.md

Provides a standard HTML iframe tag example, illustrating how to embed external content (like the QuickChart view URL) within a webpage, including setting attributes like `src`, `frameborder`, `height`, `width`, and `title`. Note that the `src` attribute in this example is a placeholder.

```HTML
<iframe
  src="demo_iframe.htm"
  frameborder="0"
  height="500"
  width="300"
  title="Iframe Example"
></iframe>
```

--------------------------------

### GraphViz Chart Type Parameter Syntax

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/integrations/google-image-charts/examples.md

Describes the syntax for specifying the GraphViz chart type (`cht=gv`) and optionally selecting a layout engine by appending a colon and the engine name.

```Parameter Syntax
cht=gv[:<opt_engine>]
```

--------------------------------

### Create Short URL using Curl

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/short-urls-and-templates.md

Example command using curl to send a POST request with a chart configuration to the quickchart.io short URL creation endpoint.

```bash
curl -X POST \
     -H 'Content-Type: application/json' \
     -d '{"chart": {"type": "bar", "data": {"labels": ["Hello", "World"], "datasets": [{"label": "Foo", "data": [1, 2]}]}}}' \
     https://quickchart.io/chart/create
```

--------------------------------

### Example Google Play Store QR Code URL

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/qr-codes/app-store-qr-codes.md

Provides a concrete example of a QuickChart QR code URL pointing to the Instagram app on the Google Play Store using its package name.

```HTTP/URL
https://quickchart.io/qr?**text=**https://play.google.com/store/apps/details?id=com.instagram.android
```

--------------------------------

### Basic Subgraph Example (DOT)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/graphviz-api.md

Demonstrates the basic structure of a GraphViz digraph containing two simple subgraphs ('cluster_0' and 'cluster_1') to cluster nodes and show relationships within and between clusters.

```DOT
digraph {
  subgraph cluster_0 {
    label="Subgraph A";
    a -> b;
    b -> c;
    c -> d;
  }

  subgraph cluster_1 {
    label="Subgraph B";
    a -> f;
    f -> c;
  }
}
```

--------------------------------

### Natural Language URL Example - Doughnut Chart (URL)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/text-to-chart.md

A URL demonstrating a natural language description for generating a doughnut chart with specific data points and labels.

```URL
https://quickchart.io/natural/doughnut chart showing 10 luck, 20 skill, 15 power of will, 5 pleasure, 50 pain
```

--------------------------------

### Example Chart.js Configuration with Background Image (JavaScript)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/reference/colors-and-backgrounds.mdx

Provides a complete Chart.js configuration object demonstrating the use of the `backgroundImageUrl` plugin to set a background image for a bar chart. Includes basic data and labels.

```JavaScript
{
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
      label: 'Users',
      data: [50, 60, 70, 180]
    }]
  },
  options: {
    plugins: {
      backgroundImageUrl: 'https://pyxis.nymag.com/v1/imgs/dc5/011/2ea57ca9a7a5d9518b2f3cd94ccdde218f-25-emoji-subpoena.rsocial.w1200.jpg',
    }
  }
}
```

--------------------------------

### Example Apple App Store QR Code URL

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/qr-codes/app-store-qr-codes.md

Provides a concrete example of a QuickChart QR code URL pointing to the Instagram app on the US Apple App Store using the shorter format.

```HTTP/URL
https://quickchart.io/qr?**text=**https://apps.apple.com/us/app/instagram/id389801252
```

--------------------------------

### Embed Interactive Chart using Iframe

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/short-urls-and-templates.md

HTML example showing how to use an iframe tag to embed an interactive chart view using the derived iframe URL.

```html
<iframe src="demo_iframe.htm" frameborder="0" height="500" width="300" title="Iframe Example"></iframe>
```

--------------------------------

### Example Google Sheets Document URL

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/integrations/google-sheets.md

Illustrates the structure of a Google Sheets URL and highlights the document ID portion required for the QuickChart googleSheets plugin.

```Text
https://docs.google.com/spreadsheets/d/**1qBJlbi200GozsP8W4gBGZOxuwKSYmBiiTH8olwx26E8**/edit#gid=0
```

--------------------------------

### Example SMS QR Code URL

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/qr-codes/sms-qr-codes.md

This is a complete example URL using the QuickChart API to generate an SMS QR code. It includes the `smsto` format with a specific phone number and URL-encoded message.

```URL Format
https://quickchart.io/qr?**text=**smsto:+15555555555:Hello%20there!
```

--------------------------------

### Customize Template URL with Title and Labels Parameters

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/short-urls-and-templates.md

Example demonstrating how to modify a chart template by appending 'title' and 'labels' URL query parameters.

```bash
https://quickchart.io/chart/render/zf-abc-123?title=New title&labels=Q1,Q2,Q3,Q4
```

--------------------------------

### Signing QuickChart Chart URL - Python

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/authentication.md

Using the previously defined signing function, this Python example demonstrates how to sign a chart configuration string and generate a signed URL for a QuickChart chart request.

```python
chart_config = '{...}'
sig = sign(API_KEY, chart_config)

url = f"https://quickchart.io/chart?c={quote(chart_config)}&sig={sig}&accountId={ACCOUNT_ID}"

print("Link to chart:", url)
```

--------------------------------

### Initializing ChartJsNodeCanvas Service in Node.js

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/chart-js/image-export.md

Shows the basic setup for using the `chartjs-node-canvas` library in a Node.js environment. It demonstrates requiring the service, initializing it with dimensions, and asynchronously rendering outputs like buffer, data URL, and stream from a Chart.js configuration.

```js
const { CanvasRenderService } = require('chartjs-node-canvas');

const width = 300; //px
const height = 150; //px
const canvasRenderService = new CanvasRenderService(width, height);

(async () => {
  const configuration = {
    // Add your Chart.js config here (see above for example config)
  };

  // Create outputs
  const image = await canvasRenderService.renderToBuffer(configuration);
  const dataUrl = await canvasRenderService.renderToDataURL(configuration);
  const stream = canvasRenderService.renderToStream(configuration);
})();
```

--------------------------------

### Example Apex Charts Configuration

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/apex-charts-image-rendering.md

A sample configuration object for an Apex Chart, defining its type, series data, and x-axis categories. This object is used as the `config` parameter for the QuickChart API.

```js
{
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [31,40,35,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}
```

--------------------------------

### Example JSON Payload for Natural Language POST Request (JSON)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/text-to-chart.md

An example JSON object structure used when sending a POST request to the QuickChart natural language endpoint. It includes properties for the chart description, dimensions, and background color.

```JSON
{
  "description": "Red line graph, solar output over 1 year by month",
  "width": 500,
  "height": 300,
  "backgroundColor": "#fff"
}
```

--------------------------------

### Customized SMS QR Code URL Example

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/qr-codes/sms-qr-codes.md

This example shows how to generate an SMS QR code URL with additional QuickChart parameters for customization, such as changing the dark color, adding a caption, and setting the caption font size.

```URL Format
https://quickchart.io/qr?**text=**smsto:+15555555555:Hello&**dark=**4285f4&**caption=**Scan to Text Us&**captionFontSize=**15
```

--------------------------------

### Signing QuickChart Chart URL - Javascript

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/authentication.md

Building upon the signing function, this example demonstrates how to sign a chart configuration object (after stringifying it) and generate a signed URL for a QuickChart chart request in Javascript.

```js
// Generate a URL for chart
const chartObj = JSON.stringify({...});
const chartSignedParam = sign(API_KEY, chartObj);

const chartPublicUrl = `https://quickchart.io/chart?c=${encodeURIComponent(chartObj)}&sig=${chartSignedParam}&accountId=${ACCOUNT_ID}`;

console.log('Link to chart:', chartPublicUrl);
```

--------------------------------

### Customize Template URL with Data Parameters

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/short-urls-and-templates.md

Example demonstrating how to modify a chart template by appending 'data1' and 'data2' URL query parameters to override datasets.

```bash
https://quickchart.io/chart/render/zf-abc-123?data1=40,60,80,100&data2=5,6,7,8
```

--------------------------------

### Signing QuickChart Chart URL - PHP

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/authentication.md

Using the previously defined signing function, this PHP example demonstrates how to sign a chart configuration string and generate a signed URL for a QuickChart chart request.

```php
$chartConfig = '{...}';

$sig = sign(API_KEY, $chartConfig);
$url = 'https://quickchart.io/chart?c=' . urlencode($chartConfig) . '&sig=' . $sig . '&accountId=' . ACCOUNT_ID;

echo 'Link to chart: ' . $url;
```

--------------------------------

### Styled Subgraph Example (DOT)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/graphviz-api.md

Shows a more complex GraphViz digraph using styled subgraphs (filled background, node styles), different node shapes (Mdiamond, Msquare), and connections between nodes in different subgraphs to illustrate processes.

```DOT
digraph G {
  subgraph cluster_0 {
    style=filled;
    color=lightgrey;
    node [style=filled,color=white];
    a0 -> a1 -> a2 -> a3;
    label = "process #1";
  }

  subgraph cluster_1 {
    node [style=filled];
    b0 -> b1 -> b2 -> b3;
    label = "process #2";
    color=blue
  }
  start -> a0;
  start -> b0;
  a1 -> b3;
  b2 -> a3;
  a3 -> a0;
  a3 -> end;
  b3 -> end;

  start [shape=Mdiamond];
  end [shape=Msquare];
}
```

--------------------------------

### Natural Language URL Example - Bar/Line Chart (URL)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/text-to-chart.md

A URL demonstrating a complex natural language description for generating a combined bar and line chart showing population and trend line for UN security council countries.

```URL
https://quickchart.io/natural/Bar chart with data labels showing population of UN security council countries, with line graph for trend line. Shorten Y axis labels using 'M' for million. Title 'UN Security Council', hide legend
```

--------------------------------

### Creating QuickChart Short URL via cURL (Bash)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/authentication.md

Example cURL command demonstrating how to send a POST request to the /chart/create endpoint to generate a short URL for a chart, including the API key in the request body.

```Bash
curl -X POST \
 -H 'Content-Type: application/json' \
 -d '{"key": "YOUR_API_KEY", "chart": {"type": "bar", "data": {"labels": ["Hello", "World"], "datasets": [{"label": "Foo", "data": [1, 2]}]}}}' \
 https://quickchart.io/chart/create
```

--------------------------------

### Record Node Example (DOT)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/graphviz-api.md

Illustrates how to create record-based nodes with multiple fields and ports for connections in GraphViz, using 'record' and 'Mrecord' shapes. It shows how to define fields with labels and connect to specific fields.

```DOT
digraph structs {
  node[shape=record]
  struct1 [label="<f0> left|<f1> middle|<f2> right"];
  struct2 [label="{<f0> one|<f1> two}" shape=Mrecord];
  struct3 [label="hello\nworld |{ b |{c|<here> d|e}| f}| g | h"];
  struct1:f1 -> struct2:f0;
  struct1:f0 -> struct3:f1;
}
```

--------------------------------

### Example Chart.js Configuration with Gradient Fill (JavaScript)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/reference/colors-and-backgrounds.mdx

Illustrates how to apply a vertical gradient fill to a dataset's background color in a Chart.js bar chart using the `getGradientFillHelper` function with specified colors.

```JavaScript
{
  type: 'bar',
  data: {
    labels: [2012, 2013, 2014, 2015, 2016],
    datasets: [{
      label: 'Gradient example',
      data: [12, 6, 5, 18, 12],
      backgroundColor: getGradientFillHelper('vertical', ["#36a2eb", "#a336eb", "#eb3639"]),
    }]
  }
}
```

--------------------------------

### QuickChart Short URL Creation Response (JSON)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/authentication.md

Example JSON response received after successfully creating a short URL using the /chart/create endpoint. It contains a success status and the generated short URL.

```JSON
{
  "success": true,
  "url": "https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232"
}
```

--------------------------------

### Migrate Google Image Chart QR to QuickChart (URL)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/qr-codes/qr-codes.mdx

Provides an example of migrating a Google Image Chart QR code URL to QuickChart by simply replacing the base domain, demonstrating compatibility with Google's parameters.

```URL
https://quickchart.io/chart?cht=qr&chs=150x150&chl=Testing123
```

--------------------------------

### Natural Language URL Example - Radar Chart (URL)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/text-to-chart.md

A URL demonstrating a natural language description for generating a radar chart showing aptitudes with a specified range and no legend.

```URL
https://quickchart.io/natural/Radar chart showing job applicant aptitudes ranging from 0-100, no legend
```

--------------------------------

### Creating a QuickChart instance and setting config in Python

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/client-libraries.mdx

This snippet demonstrates how to use the quickchart.io library in Python. It shows how to install the dependency, create a QuickChart object, set dimensions, device pixel ratio, configure chart type and data, and retrieve the chart URL. Requires the `quickchart.io` pip package.

```python
from quickchart import QuickChart

qc = QuickChart()
qc.width = 500
qc.height = 300
qc.device_pixel_ratio = 2.0
qc.config = {
    "type": "bar",
    "data": {
        "labels": ["Hello world", "Test"],
        "datasets": [{
            "label": "Foo",
            "data": [1, 2]
        }]
    }
}

# Print the chart URL
print(qc.get_url())
```

--------------------------------

### Scan QR Code via GET Request (URL)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/qr-codes/qr-reader-api.md

Example of using the QR code reader API with a GET request. The image URL is provided as a URL-encoded query parameter named `url`.

```URL
https://quickchart.io/qr-read?url=https://upload.wikimedia.org/wikipedia/commons/0/0b/QR_code_Wikimedia_Commons_%28URL%29.png
```

--------------------------------

### Configuring a Line Chart with QuickChart

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/chart-types.mdx

This configuration demonstrates how to create a line chart. It sets the type to 'line', uses the same labels and datasets as the bar chart example, and adds styling options like `fill: false` and `borderColor` for the lines.

```json
{
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
      {
        label: 'Dogs',
        data: [50, 60, 70, 180, 190],
        fill: false,
        borderColor: 'blue',
      },
      {
        label: 'Cats',
        data: [100, 200, 300, 400, 500],
        fill: false,
        borderColor: 'green',
      },
    ],
  },
}
```

--------------------------------

### Natural Language URL Example - Horizontal Bar Chart (URL)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/text-to-chart.md

A URL demonstrating a natural language description for generating a horizontal bar chart with data labels and a top-down gradient.

```URL
https://quickchart.io/natural/horizontal bar chart with data labels, 10 bars.  gradient from green to red top down
```

--------------------------------

### Example Google Play Store QR Code URL with Parameters

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/qr-codes/app-store-qr-codes.md

Demonstrates adding referral and UTM parameters (`referrer`, `utm_source`, `utm_medium`, `utm_campaign`) to a Google Play Store link within a QuickChart QR code URL for tracking.

```HTTP/URL
https://quickchart.io/qr?**text=**https://play.google.com/store/apps/details?id=com.instagram.android&referrer=utm_source%3Dqrcode%26utm_medium%3Dmarketing%26utm_campaign%3Dspring_promo
```

--------------------------------

### Build Static Website with Yarn (Bash)

Source: https://github.com/typpo/quickchart-docs/blob/master/README.md

Generates the static content for the website into the 'build' directory, suitable for deployment to a static hosting service.

```bash
$ yarn build
```

--------------------------------

### Rendering and Saving Chart.js Image File in Node.js

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/chart-js/image-export.md

Provides a complete Node.js example using `chartjs-node-canvas` to render a Chart.js configuration to an image buffer and then write that buffer to a local file using the Node.js `fs` module.

```js
const fs = require('fs');
const { CanvasRenderService } = require('chartjs-node-canvas');

const width = 400; //px
const height = 400; //px
const canvasRenderService = new CanvasRenderService(width, height);

(async () => {
  const configuration = {
    type: 'bar',
    data: {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
      datasets: [
        {
          label: 'Users',
          data: [50, 60, 70, 180],
        },
      ],
    },
  };

  const imageBuffer = await canvasRenderService.renderToBuffer(configuration);

  // Write image to file
  fs.writeFileSync('/tmp/mychart.png', imageBuffer);
})();
```

--------------------------------

### Generating QuickChart URLs in Python

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/python-chart-example.md

This Python code demonstrates how to use the `quickchart` library to create a chart configuration. It imports the `QuickChart` class, instantiates it, sets chart dimensions and device pixel ratio, and assigns a Chart.js configuration object. Finally, it shows how to print both the standard and shortened chart URLs.

```python
from quickchart import QuickChart

qc = QuickChart()
qc.width = 500
qc.height = 300
qc.device_pixel_ratio = 2.0
qc.config = {
    "type": "bar",
    "data": {
        "labels": ["Hello world", "Test"],
        "datasets": [{
            "label": "Foo",
            "data": [1, 2]
        }]
    }
}

# Print a chart URL
print(qc.get_url())

# Print a short chart URL
print(qc.get_short_url())
```

--------------------------------

### Creating a QuickChart instance and setting config in C#

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/client-libraries.mdx

This snippet demonstrates how to use the QuickChart library in C#. It shows how to add the NuGet package, create a `Chart` object, set dimensions, set the chart configuration using a verbatim string literal, and retrieve the chart URL. Requires the `QuickChart` NuGet package.

```csharp
namespace QuickChartExample
{
    public class SimpleExample
    {
        static void Main(string[] args) {
            Chart qc = new Chart();

            qc.Width = 500;
            qc.Height = 300;
            qc.Config = @"{
              type: 'bar',
              data: {
                labels: ['Hello world', 'Test'],
                datasets: [{
                  label: 'Foo',
                  data: [1, 2]
                }]
              }
            }"

            Console.WriteLine(qc.GetUrl());
        }
    }
}
```

--------------------------------

### Signing QuickChart URLs - Java

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/authentication.md

This comprehensive Java example provides a helper class for HMAC-SHA256 signing and demonstrates its usage within a main method to generate signed URLs for both QuickChart QR code and chart requests, including URL encoding.

```java
import java.net.URLEncoder;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import java.security.SignatureException;
import java.util.Formatter;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;

class QuickchartAuth {
    private static final String HMAC_ALGORITHM = "HmacSHA256";

    private static String toHexString(byte[] bytes) {
        Formatter formatter = new Formatter();
        for (byte b: bytes) {
            formatter.format("%02x", b);
        }nYou can close the formatter here if needed, but for a simple loop, it's often fine.
        return formatter.toString();
    }

    public static String sign(String key, String val)
    throws SignatureException, NoSuchAlgorithmException, InvalidKeyException {
        SecretKeySpec signingKey = new SecretKeySpec(key.getBytes(), HMAC_ALGORITHM);
        Mac mac = Mac.getInstance(HMAC_ALGORITHM);
        mac.init(signingKey);
        return toHexString(mac.doFinal(val.getBytes()));
    }
}

public class Main {
    public static void main(String[] args) throws Exception {
        // Set up credentials
        String ACCOUNT_ID = "12345";
        String API_KEY = "abc123";

        // Generate a URL for QR code
        String qrText = "Hello world";
        String sig = QuickchartAuth.sign(API_KEY, qrText);

        String url = String.format("https://quickchart.io/qr?text=%s&sig=%s&accountId=%s", URLEncoder.encode(qrText, "UTF-8"), sig, ACCOUNT_ID);

        System.out.println(url);

        // Or generate a URL for chart
        String chartConfig = "{...}";
        String chartSig = QuickchartAuth.sign(API_KEY, chartConfig);

        String chartUrl = String.format("https://quickchart.io/chart?c=%s&sig=%s&accountId=%s", URLEncoder.encode(chartConfig, "UTF-8"), chartSig, ACCOUNT_ID);

        System.out.println(chartUrl);
    }
}
```

--------------------------------

### Example Apple App Store QR Code URL with Parameters

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/qr-codes/app-store-qr-codes.md

Demonstrates adding tracking parameters like affiliate tokens (`pt`) and campaign tokens (`ct`) to an Apple App Store link within a QuickChart QR code URL.

```HTTP/URL
https://quickchart.io/qr?**text=**https://apps.apple.com/us/app/id389801252?pt=123456&ct=qr_promotion
```

--------------------------------

### Creating a QuickChart instance and setting config in Javascript

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/client-libraries.mdx

This snippet demonstrates how to use the quickchart-js library in Javascript/Node. It shows how to install the dependency, create a QuickChart object, configure chart type, data, dimensions, background color, and retrieve the chart URL. Requires the `quickchart-js` npm package.

```javascript
const QuickChart = require('quickchart-js');

const myChart = new QuickChart();
myChart
  .setConfig({
    type: 'bar',
    data: {
      labels: ['Hello world', 'Foo bar'],
      datasets: [{ label: 'Foo', data: [1, 2] }],
    },
  })
  .setWidth(800)
  .setHeight(400)
  .setBackgroundColor('transparent');

// Print the chart URL
console.log(myChart.getUrl());
```

--------------------------------

### Configuring Doughnut Chart Size and Rotation (Chart.js)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/chart-js/width-rotation-circumference-doughnut-chart.md

This snippet shows a Chart.js configuration object for a doughnut chart. It demonstrates how to set the inner hole size using `options.cutoutPercentage`, the starting angle using `options.rotation` (in radians), and the total arc length using `options.circumference` (also in radians). The example sets a cutout of 80%, rotates the start to the top (`-Math.PI / 2`), and limits the chart to a half-circle (`Math.PI`).

```js
{
  type: 'doughnut',
  data: {
    datasets: [
      {
        data: [94, 25, 72, 70, 14],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(255, 159, 64)',
          'rgb(255, 205, 86)',
          'rgb(75, 192, 192)',
          'rgb(54, 162, 235)',
        ],
        label: 'Dataset 1',
      },
    ],
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
  },
  options: {
    cutoutPercentage: 80,
    rotation: -Math.PI / 2,
    circumference: Math.PI,
    legend: {
      display: false,
    },
  },
}
```

--------------------------------

### QuickChart URL with Basic Pie Chart Config

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/chart-js/custom-pie-doughnut-chart-labels.mdx

Example URL demonstrating how to render a basic Chart.js pie chart using the QuickChart service by embedding the chart configuration in the URL parameter 'c'.

```URL
**https://quickchart.io/chart?c=**{type:'pie',data:{labels:['January','February', 'March','April', 'May'], datasets:[{data:[50,60,70,180,190]}]}}
```

--------------------------------

### Generating QuickChart URL with Go Library

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/client-libraries.mdx

Shows how to use the third-party `quickchart-go` library to create a chart configuration, set chart properties like width, height, and version, and obtain the chart URL. Requires the `quickchart-go` dependency.

```Go
qc := quickchartgo.New()

qc.Config = chartConfig
qc.Config := `{
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
    label: 'Users',
    data: [50, 60, 70, 180]
    }]
  }
}`

qc.Width = 500;
qc.Height = 300;
qc.Version = "2.9.4";

fmt.Println(qc.GetUrl());
```

--------------------------------

### Example QuickChart POST Request Body JSON

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/post-endpoint.md

This JSON object illustrates the structure of the payload sent to the QuickChart /chart POST endpoint. It includes common parameters like dimensions, format, background, version, and the nested 'chart' configuration.

```json
{
  "version": "2",
  "backgroundColor": "transparent",
  "width": 500,
  "height": 300,
  "devicePixelRatio": 1.0,
  "format": "png",
  "chart": {...}
}
```

--------------------------------

### Creating a QuickChart instance and setting config in PHP

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/client-libraries.mdx

This snippet demonstrates how to use the ianw/quickchart library in PHP. It shows how to install the library via Composer, require the file, create a QuickChart object with dimensions, set the chart configuration as a JSON string, and retrieve the chart URL. Requires the `ianw/quickchart` Composer package.

```php
require 'quickchart'

$qc = new QuickChart(array(
  'width' => 600,
  'height' => 300,
));

$qc->setConfig('{
  type: "bar",
  data: {
    labels: ["Hello world", "Test"],
    datasets: [{
      label: "Foo",
      data: [1, 2]
    }]
  }
}');

// Print the chart URL
echo $qc->getUrl();
```

--------------------------------

### Generating Basic WiFi QR Code URL

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/qr-codes/wifi-qr-codes.md

Provides a concrete example of a QuickChart API URL used to generate a WiFi QR code for a WPA network with a specific SSID and password. It demonstrates how the WiFi format string is passed as the text parameter.

```URL
https://quickchart.io/qr?**text=**WIFI:T:WPA;S:MyHomeNetwork;P:MySecurePassword123;H:false;;
```

--------------------------------

### Example vCard with UTF-8 Encoding

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/qr-codes/vcard-qr-codes.md

Provides an example vCard structure demonstrating how to specify `CHARSET=UTF-8` for properties to ensure correct handling of special characters.

```vCard
BEGIN:VCARD
VERSION:3.0
N;CHARSET=UTF-8:Doe;John;;;
FN;CHARSET=UTF-8:John Doe
ORG;CHARSET=UTF-8:Example Company
EMAIL;CHARSET=UTF-8;type=INTERNET,WORK:john.doe@example.com
END:VCARD
```

--------------------------------

### Complete iCalendar VEVENT Example

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/qr-codes/calendar-event-qr-codes.md

A comprehensive example of an iCalendar VEVENT structure for a conference, including summary, dates, location, description, organizer, URL, and a reminder alarm.

```iCalendar
BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
SUMMARY:Tech Conference 2024
DTSTART:20240610T090000Z
DTEND:20240612T170000Z
LOCATION:San Francisco Convention Center
DESCRIPTION:Annual technology conference featuring workshops, keynotes, and networking opportunities. Don't forget to bring your laptop!
ORGANIZER;CN=Tech Conference Team:mailto:info@techconference.example
URL:https://techconference.example
BEGIN:VALARM
TRIGGER:-P1D
ACTION:DISPLAY
DESCRIPTION:Conference starts tomorrow!
END:VALARM
END:VEVENT
END:VCALENDAR
```

--------------------------------

### Generating QuickChart URL with Java Library

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/client-libraries.mdx

Demonstrates how to use the official QuickChart Java library to create a chart configuration, set dimensions, and retrieve the chart URL. Requires the QuickChart Java library dependency from Maven Central.

```Java
import io.quickchart.QuickChart;

public class PrintUrlExample {
    public static void main(String[] args) {
        QuickChart chart = new QuickChart();
        chart.setWidth(500);
        chart.setHeight(300);
        chart.setConfig("{"
                + "    type: 'bar',"
                + "    data: {"
                + "        labels: ['Q1', 'Q2', 'Q3', 'Q4'],"
                + "        datasets: [{"
                + "            label: 'Users',"
                + "            data: [50, 60, 70, 180]"
                + "        }]"
                + "    }"
                + "}"
        );

        System.out.println(chart.getUrl());
    }
}
```

--------------------------------

### Start Linear Axis Ticks at Zero (Chart.js v3+)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/reference/axes.mdx

Forces a linear axis (like the y-axis) to always start at zero in Chart.js v3+, ensuring that the scale begins at the origin point for better data comparison.

```JavaScript
{
  // ...
  options: {
    scales: {
      y: {
            // highlight-next-line
            beginAtZero: true,
          },
        }
      }
    }
```

--------------------------------

### Start Y-Axis Ticks at Zero (Chart.js v2)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/reference/axes.mdx

Forces the Y-axis scale to always start at zero in Chart.js v2, regardless of the data range. This is useful for ensuring charts accurately represent magnitudes from a baseline of zero.

```JavaScript
{
  // ...
  options: {
    scales: {
      yAxes: [
        {
          ticks: {
                // highlight-next-line
                beginAtZero: true,
              },
            },
          ];
        }
      }
    }
```

--------------------------------

### Create Short URL using Python

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/usage/short-urls-and-templates.md

Python script demonstrating how to use the requests library to send a POST request with a chart configuration to the quickchart.io short URL creation endpoint.

```python
import json
import requests

quickchart_url = 'https://quickchart.io/chart/create'
post_data = {'chart': {'type': 'bar', 'data': {'labels': ['Hello', 'World'],
             'datasets': [{'label': 'Foo', 'data': [1, 2]}]}}}

response = requests.post(
    quickchart_url,
    json=post_data,
)

if (response.status_code != 200):
    print('Error:', response.text)
else:
    chart_response = json.loads(response.text)
    print(chart_response)
```

--------------------------------

### Generating QuickChart URL via Encoding in Python

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/python-chart-example.md

Demonstrates how to construct a QuickChart URL by JSON-encoding the chart configuration and then URL-encoding all parameters. This method generates a long URL that directly renders the chart. Requires the `json` and `urllib.parse` (or `urllib` for Python 2) libraries.

```python
import json
from urllib.parse import urlencode  # python 3
# from urllib import urlencode      # python 2

config = {
    "type": "bar",
    "data": {
        "labels": ["Hello world", "Test"],
        "datasets": [{
            "label": "Foo",
            "data": [1, 2]
        }]
    }
}

params = {
    'chart': json.dumps(config),
    'width': 500,
    'height': 300,
    'backgroundColor': 'white'
}
print('https://quickchart.io/chart?%s' % urlencode(params))
```

--------------------------------

### Create Project Directory (Shell)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/integrations/mjml.md

Creates a new directory for the tutorial project and navigates into it using standard shell commands.

```sh
mkdir mjml-chartjs-tutorial
cd mjml-chartjs-tutorial
```

--------------------------------

### POST Request Body JSON Example

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/watermark-api.md

Example JSON payload structure for the QuickChart watermark API POST endpoint. It specifies the main image URL, the watermark image URL, and the ratio of the watermark size to the main image size.

```json
{
  "mainImageUrl": "https://upload.wikimedia.org/wikipedia/commons/6/6e/Golde33443.jpg",
  "markImageUrl": "https://1000logos.net/wp-content/uploads/2016/10/Batman-logo.png",
  "markRatio": 0.25
}
```

--------------------------------

### Constructing QuickChart Google Charts GET Request URL

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/google-charts-image-server.md

Shows how to embed Google Charts JavaScript code and other parameters like `packages` into a URL for a GET request to the QuickChart API. The JavaScript code must be URL-encoded.

```URL
https://quickchart.io/google-charts/render?packages=timeline&code=var container = document.getElementById('timeline');var chart = new google.visualization.Timeline(container);var dataTable = new google.visualization.DataTable();dataTable.addColumn({ type: 'string', id: 'President' });dataTable.addColumn({ type: 'date', id: 'Start' });dataTable.addColumn({ type: 'date', id: 'End' });dataTable.addRows([[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);chart.draw(dataTable);
```

--------------------------------

### Generate and Save Chart Image using chartjs-to-image (Node.js)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/chart-js/image-export.md

Demonstrates the basic usage of the `chartjs-to-image` Node.js library. It initializes a chart, sets its configuration, and saves the generated image to a file. Requires the `chartjs-to-image` npm package.

```javascript
const ChartJsImage = require('chartjs-to-image');

// Generate the chart
const chart = new ChartJsImage();
chart.setConfig({
  type: 'bar',
  data: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data: [1, 2] }] },
});

// Save it
chart.toFile('/tmp/mychart.png');
```

--------------------------------

### Generate Chart URL and Save File using quickchart.io (Python)

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/chart-js/image-export.md

Provides a basic example of using the `quickchart.io` Python library. It creates a chart, sets its dimensions and configuration, retrieves the image URL, and saves the image to a file. Requires the `quickchart.io` pip package.

```python
from quickchart import QuickChart

chart = QuickChart()
chart.width = 300
chart.height = 150
chart.config = {
    "type": "bar",
    "data": {
        "labels": ["Hello world", "Test"],
        "datasets": [{
            "label": "Foo",
            "data": [1, 2]
        }]
    }
}

# Get the url...
image_url = chart.get_url()

# Or write to disk...
chart.to_file('/tmp/mychart.png')
```

--------------------------------

### Generating QuickChart Short URL via POST in Python

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/guides/python-chart-example.md

Shows how to generate a short QuickChart URL by sending an HTTP POST request to the `/chart/create` endpoint. This is useful for creating more manageable URLs. Requires the `requests` and `json` libraries. The response contains a JSON object with the generated short URL.

```python
import requests
import json

# Assuming 'config' is defined as in the previous snippet
config = {
    "type": "bar",
    "data": {
        "labels": ["Hello world", "Test"],
        "datasets": [{
            "label": "Foo",
            "data": [1, 2]
        }]
    }
}

postdata = {
  'chart': json.dumps(config),
  'width': 500,
  'height': 300,
  'backgroundColor': 'transparent'
}

resp = requests.post('https://quickchart.io/chart/create', json=postdata)
parsed = json.loads(resp.text)
print(parsed['url'])
```

--------------------------------

### Generate Table Image with Custom Options via GET Request

Source: https://github.com/typpo/quickchart-docs/blob/master/documentation/apis/table-image-api.md

Demonstrates how to generate a table image using a QuickChart API GET request, including custom options for padding, background color, and font family. The data and options parameters are included directly in the URL query string.

```URL
https://api.quickchart.io/v1/table?data={"title":"Marketing Summary","columns":[{"width":200,"title":"Campaign","dataIndex":"campaign"},{"width":100,"title":"Install","dataIndex":"install","align":"right"},{"width":100,"title":"Cost","dataIndex":"cost","align":"right"}],"dataSource":["-",{"campaign":"Google CPC","install":"12","cost":"$ 400"},{"campaign":"Facebook CPC","install":"3","cost":"$ 60"},{"campaign":"Youtube Video","install":"131","cost":"$ 1,230"},"-",{"campaign":"Total","install":"146","cost":"$ 1,690"}]}&options={"paddingVertical":20,"paddingHorizontal":20,"backgroundColor":"%23eee","fontFamily":"mono"}
```