Using the QuickChart Sparkline API
QuickChart provides an API that lets you generate sparklines as PNG images. The API is simple and can generate sparklines with a single unauthenticated request.
Generated sparkline images can be embedded in almost any format. They will work on webpages, in platforms like Salesforce and Excel, in emails, PDFs, and more.
Getting started
The sparkline API endpoint is available at https://quickchart.io/chart. It works by accepting a Chart.js-style configuration object in Javascript or JSON format.
Here's an example configuration:
{
type: 'sparkline',
data: {
datasets: [{
data: [140, 60, 274, 370, 199]
}]
}
}
Let's pack this sparkline configuration into a URL:
https://quickchart.io/chart?c={type:'sparkline',data:{datasets:[{data:[140,60,274,370,199]}]}}This URL can be embedded as an image anywhere, for example by using an image tag:
<img src="https://quickchart.io/chart?c={type:'sparkline',data:{datasets:[{data:[140,60,274,370,199]}]}}" />Producing the following image of a sparkline:
API parameters
Here are the parameters that you can pass to the /chart endpoint:
chart: Javascript/JSON definition of the chart. Use a Chart.js configuration object. Abbreviated as "c"width=500: Width of the image. Abbreviated as "w"height=300: Height of the image. Abbreviated as "h"devicePixelRatio=2.0: Device pixel ratio of the output (defaults to retina=2.0). Width and height are multiplied by this value.backgroundColor=transparent: Background of the chart canvas. Accepts rgb (rgb(255,255,120)), colors (red), and url-encoded hex values (%23ff00ff). Abbreviated as "bkg"
Note that if your chart configuration contains special characters, you must URL encode it. This capability is built into almost every programming language. If not encoded, you may run into problems with special characters (such as # or %) or syntax errors in your program.
Custom colors
To customize colors, use backgroundColor and borderColor. Set these attributes to any valid color, hex, or rgb/rgba string:
{
type: 'sparkline',
data: {
datasets: [{
backgroundColor: 'rgba(255, 0, 0, 0.2)',
borderColor: 'red',
data: [140, 60, 274, 370, 199]
}]
}
}
Pack it into the URL:
https://quickchart.io/chart?bkg=white&c={type:'sparkline',data:{datasets:[{backgroundColor:'rgba(255,0,0,0.2)',borderColor:'red',data:[140,60,274,370,199]}]}}
The URL displays this image:
Custom border/fill
To remove the fill and only have a line, set fill: false in your dataset:
{
type: 'sparkline',
data: {
datasets: [{
fill: false,
data: [140, 60, 274, 370, 199]
}]
}
}
In URL form:
https://quickchart.io/chart?bkg=white&c={type:'sparkline',data:{datasets:[{fill:false,data:[140,60,274,370,199]}]}}
Which produces this image:
Or, if you want to have only fill and no border, set borderColor to transparent or the same as backgroundColor.
Multiple lines
You can display multiple lines by adding to the list of datasets. For example:
{
type: 'sparkline',
data: {
datasets: [{
data: [140, 60, 274, 370, 199],
fill: false
}, {
data: [40, 165, 74, 70, 99],
fill: false
}]
}
}
Other customizations
All of the Chart.js line chart customizations are available for you to use. The Chart.js format offers a great deal of customization.
This example displays the data points and uses a thicker dotted line with smoothed curves:
{
type: 'sparkline',
data: {
datasets: [{
pointRadius: 3,
borderWidth: 3,
borderDash: [10, 2],
lineTension: 0.3,
fill: false,
data: [140, 60, 274, 370, 199]
}]
}
}
You can also use various plugins and features of QuickChart. For example, to add a gradient fill:
{
type: 'sparkline',
data: {
datasets: [{
pointRadius: 3,
borderWidth: 3,
lineTension: 0.3,
backgroundColor: getGradientFillHelper('vertical', ['#6287a2', '#e9ecf4']),
data: [140, 60, 274, 370, 199]
}]
}
}
Full customization
For more flexibility, change the chart type to "line" to access the full set of Chart.js line chart options. For the sparkline look, you can hide axes manually by adding an options object to your chart configuration:
{
type: 'line',
data: { ... },
options: {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
}
}
}
From there, have a look at the various line chart customizations available in the gallery or documentation.
SDKs & Client libraries
QuickChart does not require a client library, but if you don't want to build the URL yourself, you can use our open-source Javascript, Python, Ruby, PHP, C#, and Java libraries. See all libraries here.
Need help?
Chart.js can be tricky when you're getting the hang of it. Use the Sandbox Editor to test your charts. If you're interested in charts other than sparklines, check out our gallery and main documentation.
Feeling stuck? Feel free to reach out - my contact information is below.
