ankane / chartkick.js

Create beautiful charts with one line of JavaScript

Chartkick.js

Create beautiful charts with one line of JavaScript

See it in action

Supports Chart.js, Google Charts, and Highcharts

Also available for React, Vue.js, Ruby, Python, Elixir, and Clojure

For maps, check out Mapkick.js

Quick Start

Run

npm install chartkick chart.js

And add

import Chartkick from "chartkick"
import "chartkick/chart.js"

This sets up Chartkick with Chart.js. For other charting libraries, see detailed instructions.

Charts

Create a div for the chart

<div id="chart" style="height: 300px;"></div>

Line chart

new Chartkick.LineChart("chart", {"2021-01-01": 11, "2021-01-02": 6})

Pie chart

new Chartkick.PieChart("chart", [["Blueberry", 44], ["Strawberry", 23]])

Column chart

new Chartkick.ColumnChart("chart", [["Sun", 32], ["Mon", 46], ["Tue", 28]])

Bar chart

new Chartkick.BarChart("chart", [["Work", 32], ["Play", 1492]])

Area chart

new Chartkick.AreaChart("chart", {"2021-01-01": 11, "2021-01-02": 6})

Scatter chart

new Chartkick.ScatterChart("chart", [[174.0, 80.0], [176.5, 82.3], [180.3, 73.6]])

Geo chart - Google Charts

new Chartkick.GeoChart("chart", [["United States", 44], ["Germany", 23], ["Brazil", 22]])

Timeline - Google Charts

new Chartkick.Timeline("chart", [["Washington", "1789-04-29", "1797-03-03"], ["Adams", "1797-03-03", "1801-03-03"]])

Multiple series

data = [
  {name: "Workout", data: {"2021-01-01": 3, "2021-01-02": 4}},
  {name: "Call parents", data: {"2021-01-01": 5, "2021-01-02": 3}}
]
new Chartkick.LineChart("chart", data)

Multiple series stacked and grouped - Chart.js or Highcharts

data = [
  {name: "Apple", data: {"Tuesday": 3, "Friday": 4}, stack: "fruit"},
  {name: "Pear", data: {"Tuesday": 1, "Friday": 8}, stack: "fruit"},
  {name: "Carrot", data: {"Tuesday": 3, "Friday": 4}, stack: "vegetable"},
  {name: "Beet", data: {"Tuesday": 1, "Friday": 8}, stack: "vegetable"}
]
new Chartkick.BarChart("chart", data, {stacked: true})

Data

Data can be an array, object, callback, or URL.

Array

new Chartkick.LineChart("chart", [["2021-01-01", 2], ["2021-01-02", 3]])

Object

new Chartkick.LineChart("chart", {"2021-01-01": 2, "2021-01-02": 3})

Callback

function fetchData(success, fail) {
  success({"2021-01-01": 2, "2021-01-02": 3})
  // or fail("Data not available")
}

new Chartkick.LineChart("chart", fetchData)

URL

Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.

new Chartkick.LineChart("chart", "/stocks")

Options

Min and max for y-axis

new Chartkick.LineChart("chart", data, {min: 1000, max: 5000})

min defaults to 0 for charts with non-negative values. Use null to let the charting library decide.

Min and max for x-axis - Chart.js

new Chartkick.LineChart("chart", data, {xmin: "2021-01-01", xmax: "2022-01-01"})

Colors

new Chartkick.LineChart("chart", data, {colors: ["#b00", "#666"]})

Stacked columns or bars

new Chartkick.ColumnChart("chart", data, {stacked: true})

You can also set stacked to percent or relative for Google Charts and percent for Highcharts

Discrete axis

new Chartkick.LineChart("chart", data, {discrete: true})

Label (for single series)

new Chartkick.LineChart("chart", data, {label: "Value"})

Axis titles

new Chartkick.LineChart("chart", data, {xtitle: "Time", ytitle: "Population"})

Straight lines between points instead of a curve

new Chartkick.LineChart("chart", data, {curve: false})

Hide points

new Chartkick.LineChart("chart", data, {points: false})

Show or hide legend

new Chartkick.LineChart("chart", data, {legend: true})

Specify legend position

new Chartkick.LineChart("chart", data, {legend: "bottom"})

Donut chart

new Chartkick.PieChart("chart", data, {donut: true})

Prefix, useful for currency - Chart.js, Highcharts

new Chartkick.LineChart("chart", data, {prefix: "$"})

Suffix, useful for percentages - Chart.js, Highcharts

new Chartkick.LineChart("chart", data, {suffix: "%"})

Set a thousands separator - Chart.js, Highcharts

new Chartkick.LineChart("chart", data, {thousands: ","})

Set a decimal separator - Chart.js, Highcharts

new Chartkick.LineChart("chart", data, {decimal: ","})

Set significant digits - Chart.js, Highcharts

new Chartkick.LineChart("chart", data, {precision: 3})

Set rounding - Chart.js, Highcharts

new Chartkick.LineChart("chart", data, {round: 2})

Show insignificant zeros, useful for currency - Chart.js, Highcharts

new Chartkick.LineChart("chart", data, {round: 2, zeros: true})

Friendly byte sizes - Chart.js

new Chartkick.LineChart("chart", data, {bytes: true})

Specify the message when the chart is loading

new Chartkick.LineChart("chart", data, {loading: "Loading..."})

Specify the message when data is empty

new Chartkick.LineChart("chart", data, {empty: "No data"})

Refresh data from a remote source every n seconds

new Chartkick.LineChart("chart", url, {refresh: 60})

You can pass options directly to the charting library with:

new Chartkick.LineChart("chart", data, {library: {backgroundColor: "pink"}})

See the documentation for Chart.js, Google Charts, and Highcharts for more info.

To customize datasets in Chart.js, use:

new Chartkick.LineChart("chart", data, {dataset: {borderWidth: 10}})

You can pass this option to individual series as well.

Global Options

To set options for all of your charts, use:

Chartkick.options = {
  colors: ["#b00", "#666"]
}

Multiple Series

You can pass a few options with a series:

• name
• data
• color
• dataset - Chart.js only
• points - Chart.js only
• curve - Chart.js only

Code

If you want to use the charting library directly, get the code with:

new Chartkick.LineChart("chart", data, {code: true})

The code will be logged to the JavaScript console.

Note: JavaScript functions cannot be logged, so it may not be identical.

Download Charts

Chart.js only

Give users the ability to download charts. It all happens in the browser - no server-side code needed.

new Chartkick.LineChart("chart", data, {download: true})

Set the filename

new Chartkick.LineChart("chart", data, {download: {filename: "boom"}})

Note: Safari will open the image in a new window instead of downloading.

Set the background color

new Chartkick.LineChart("chart", data, {download: {background: "#fff"}})

Installation

Chart.js

Run

npm install chartkick chart.js

And add

import Chartkick from "chartkick"
import "chartkick/chart.js"

Google Charts

Run

npm install chartkick

And add

import Chartkick from "chartkick"

And include on the page

<script src="https://www.gstatic.com/charts/loader.js"></script>

To specify a language or Google Maps API key, use:

Chartkick.configure({language: "de", mapsApiKey: "..."})

before your charts.

Highcharts

Run

npm install chartkick highcharts

And add

import Chartkick from "chartkick"
import "chartkick/highcharts"

No Package Manager

Download chartkick.js directly.

For Chart.js (works with 4+), download it and the date-fns adapter bundle and use:

<script src="/path/to/chart.js"></script>
<script src="/path/to/chartjs-adapter-date-fns.bundle.js"></script>
<script src="chartkick.js"></script>

For Google Charts, use:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="chartkick.js"></script>

For Highcharts (works with 2.1+), download it and use:

<script src="/path/to/highcharts.js"></script>
<script src="chartkick.js"></script>

Multiple Libraries

If more than one charting library is loaded, choose between them with:

new Chartkick.LineChart("chart", data, {adapter: "google"}) // or highcharts or chartjs

API

Access a chart with:

var chart = Chartkick.charts["chart-id"]

Get the underlying chart object with:

chart.getChartObject()

You can also use:

chart.getElement()
chart.getData()
chart.getOptions()
chart.getAdapter()

Update the data with:

chart.updateData(newData)

You can also specify new options:

chart.setOptions(newOptions)
// or
chart.updateData(newData, newOptions)

Refresh the data from a remote source:

chart.refreshData()

Redraw the chart with:

chart.redraw()

Loop over charts with:

Chartkick.eachChart(function (chart) {
  // do something
})

Custom Adapters

Note: This feature is experimental.

Add your own custom adapter with:

var CustomAdapter = {
  name: "custom",
  renderLineChart: function (chart) {
    chart.getElement().innerHTML = "Hi"
  }
}

Chartkick.adapters.unshift(CustomAdapter)

Examples

To run the files in the examples directory, you’ll need a web server. Run:

npm install -g serve
serve

and visit http://localhost:5000/examples/

Upgrading

4.0

Run:

npm install chartkick@latest

For Chart.js, also run:

npm install chart.js@latest

And change:

import Chart from "chart.js"

Chartkick.use(Chart)

to:

import "chartkick/chart.js"

History

View the changelog

Contributing

Everyone is encouraged to help improve this project. Here are a few ways you can help:

• Report bugs
• Fix bugs and submit pull requests
• Write, clarify, or fix documentation
• Suggest or add new features

To get started with development:

git clone https://github.com/ankane/chartkick.js.git
cd chartkick.js
npm install
npm run build

# start web server
npm install -g serve
serve

chartkick.js's Issues

Moving the legend to the top/bottom

I've implemented these charts into a landing page https://www.npd.com/perspectives/topline-top-three/ and they work great. Only issue is that the legends get bunched up and sometimes cut off. Is there an option/way to move the legend to the top or bottom of the chart? Or maybe control the width of the chart itself in comparison to the legend?

Thanks,
Elliot

Different x coordinates for multi-line series causes rendering error

When I try and chart a multi-line series using dates as the x axis, but the two lines use different dates, I get a funky result. Here is the code:

var data = [
    {
      name: 'Messages Sent',
      data: {
        "2014-04-25 00:00:00 -0800": 1651,
        "2014-05-02 00:00:00 -0800": 264,
        "2014-05-09 00:00:00 -0800": 0,
        "2014-05-16 00:00:00 -0800": 773,
        "2014-05-23 00:00:00 -0800": 23,
        "2014-05-30 00:00:00 -0800": 81,
        "2014-06-06 00:00:00 -0800": 0,
        "2014-06-20 00:00:00 -0800": 34,
        "2014-07-03 00:00:00 -0800": 19,
      }
    },
   {
      name: 'Messages Sent 2',
      data: {
        "2014-05-15 00:00:00 -0800": 689,
        "2014-05-30 00:00:00 -0800": 680,
        "2014-06-13 00:00:00 -0800": 672,
        "2014-06-28 00:00:00 -0800": 671,
        "2014-07-11 00:00:00 -0800": 106,
        "2014-07-31 00:00:00 -0800": 741,
      }
    },
]
new Chartkick.LineChart("messages", data)

why does line_chart has to show time on a date data ?

Hi,
I'ved got a line chart like this with date data (not including time)
new Chartkick.LineChart("chart-2", {"2013-02-10": 11, "2013-02-11": 6});

http://jsfiddle.net/yekLh/1/

why does chartkick always have to include time ? how do i show the series in dates only ?

Thanks.

Add Calendar HeatMap

It would be great to add a calendar chart to this awesome library.
Docs:
https://developers.google.com/chart/interactive/docs/gallery/calendar?hl=en
http://www.highcharts.com/demo/heatmap
I'll be trying to implement this

Add support for line options

Possible design (comments welcome)

new Chartkick.LineChart(id, data, line: {curve: false, points: false, thickness: 4})

Note: we already have the curve and points option at the top level.

Multiple Options

Is there a way to use multiple options? For example, I'm creating a Discreet Line Chart with these options:

{"colors": ["#00a1de", "#f0ab00", "#9c0"]}, {"discrete": true}, {"min": 150});

The problem is, it only takes the first option (which is "colors" in this case) and ignores the remaining. Is there a way get all of them to work? If so, am I doing it incorrectly?

Thanks for your help.

Add support for currency and percentages

A few possible designs

{prefix: "$"}
{suffix: "%"}

How to select fonts?

Hi All,

Is there a way to select a certain font? Maybe someone has a link to this? i cannot find it.

Thanks

Normal area/line charts instead of spline

Is it currently possible to do this? I looked at the source code and it seemed to be hard coded.

Message if there is no data?

Is there a way to specify a message to be rendered instead of an empty chart if there is no data?

opts parameter is ignored when using google charts

I wanted to change the formatting a bit for the Pie Chart when using google charts. I guess the opts parameter should be used to tweak the options, but it is ignored.

I fixed this in quarkness@e1616e9 by merging the default options with the opts parameter using jQuery.extend

Thanks for chartkick.js, it's great.

Add colors option

An array of colors to use for the series

[BUG] Error Loading Chart: No adapter found

Hi,
i'm here to submit you a bug in chartkick , even if we're using google jsapi in our page , and then implemented it in order to use google charts , chartkick is showing this message anyway : "Error Loading Chart: No adapter found".
Even your live demo at : https://ankane.github.io/chartkick.js/examples/ has that bug.

Best regards,
CDevCom.

Axis titles

I didn't find any obvious way to add axis titles to line charts. Is it possible if I am using Chartkick with Google Charts?

Add support for numeric axes for line, column, and bar charts

Chartkick supports two types of axis for line charts (time and discrete) and one for column and bar (discrete). It'd be great to also support a numeric type, so columns are ordered intuitively for things like ankane/chartkick#141.

To keep backward compatibility, add an xtype option for now.

Support for C3.js

Looks promising https://github.com/masayuki0812/c3

Do not set min to 0 if not set

Highcharts and all the other charting engines autoscale if a min is not set. Using chartkick it sets the min to 0 if not set. I don't think this should be the default behavior.

Data series doesn't support keyed values (name, id, etc)

Highcharts supports series objects with keyed values for name, id, etc.. But chartkick.js does not.

For example, this works with chartkick in a series:
'data': {'2014-11-01': 98, '2014-11-14': 98}

But trying to use the data attributes specified here like this..
'data': [{'name': 'test1', 'x': '2014-11-1', 'y': 98},{'name': 'test2', 'x': '2014-11-12', 'y': 98}]
... gives an error:
TypeError: undefined is not an object (evaluating 'n.replace')

in the fetchDataSource() function (line 172 of chartkick.js)

Supporting arrays of data objects along with the key, value pairs would be very helpful because tooltips can be populated with the 'name' value instead of default x,y coordinates.

bar chart showing incorrect value

In the bar chart, the top value is incorrect. It shows 1,033,195 (can't figure out where this is coming from). But I explicitly pass in 3843314. All the other values are correct. Just this first one is wrong. Any ideas?

This is the dataSource property on the chart.

Morrisjs support

I'm working on an application that is currently using Morris.js, which has some peculiar advantages over Google Charts and Highcharts in my weird, locked-down intranet environment:

• Free
• Can be served locally as a single .js file

I'd like to add a Morris.js backend to chartkick.js, so in the future I can just gem away on groupdate and chartkick. My questions are:

1. Would the added size of supporting this charting library be appropriate for upstream? And if so,
2. What would your thoughts be on structuring for this and future backends, assuming that an additional 'Morris' in window in a big if would start to seem iffy.

Regards.

Is there a way to sort Y axis values ascending from top?

I mean, min value is on the top and max value is instead of zero.
Or maybe make no changes but move X axis to the top?

Add bower support

Hi,
Your work is amazing, I would like to use it as a bower package in a angularjs app.
Could you create the associate bower repo.

Thanks

Add legend option

Possibly design

Hide the legend

{legend: false}

Change position

{legend: "bottom"}

Allowing date formatting for google chart tooltips via google.visualization.DateFormat

We're using chartkick for a project and we've come into the need of formatting the dates inside the tooltips.

Achieving this is as easy as adding a couple of lines to the following function using the formatter provided by google.

renderLineChart = function (element, series, opts) {
      waitForLoaded(function () {
        var options = jsOptions(series, opts);
        var data = createDataTable(series, "datetime");
        var formatter = new google.visualization.DateFormat({ 
             pattern: options.pattern 
        }); 
        formatter.format(data, 0);
        var chart = new google.visualization.LineChart(element);
        resize(function () {
          chart.draw(data, options);
        });
      });
    };

In general you could add the option to send the formatter as a parameter and apply it in the required functions.

Customizable GeoChart labels

Right now, GeoChart will only show "Value" as a label. http://monosnap.com/image/qj8RVYdAkBNtqSBd8CyOZGLBA2wpJr.png

Would you be open to a PR making this behavior parametrizable via an option passed into the GeoChart method?

Is there a way to add a single data point to a chart that's already been rendered?

I'd like to update a graph with live data. I'm working on something like this at the moment:

// chart1 is a Chartkick.LineChart
chart1.dataSource.push([new Date("2016-04-25"), 50.50]);

// or maybe like

merge_options(chart1.dataSource, JSON.parse("{\"2016-05-25T00:00:00-07:00\": \"99.99\"}"))

function merge_options(obj1,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}

Would there be any interest in a PR for this feature?

Metric name on geocharts

It would be nice to be able to use a similar format than the one used for multiple axes on the geochart option so we could name the metric accordingly.
For example, instead of using:

new Chartkick.GeoChart("chart-1", [["United States",44],["Germany",23],["Brazil",22]]);

we would also be able to use something like:

var data = {"name":"Views", "data":[["United States",44],["Germany",23],["Brazil",22]]};
new Chartkick.GeoChart("chart-1", data);

The tooltips when hovering countries would then show "Views: X" instead of the hardcoded "Value: X"

Just a suggestion. Thanks for the great job on this lib.

Destroy a Chart

What would be the best way to destroy a chart? I add and remove them dynamically and need to mind memory usage.

Labeling column charts with numbers

Hello, I have been using chartkick and I'm very happy with the work it saves me while using Google Charts. However, I have a particularly specific requirement to put the value labels on my column chart, like on the last example of this section in the Google Charts API (the one with the numbers inside of the bar of each element). Is there any way to pass the DataView needed (or the role: annotation column to the datatable) to make this work? Or maybe there's some library option (I haven't been able to find it yet) that would do the same thing.

https://developers.google.com/chart/interactive/docs/gallery/barchart#labeling-bars

I have been surfing through the source code a bit, but I couldn't come up with a way to add this functionality

enable github pages for live demo

Hi, this is cool small lib for charting!

Can you enable github pages for this repository and put example html there? So everyone can just see the example without copying to local :)

Implement box chart / candlestick chart

Originally posted here: ankane/chartkick#241
but this seems to be the more appropriate place to make the request.

Google Candlestick Charts (aka Highcharts Box Plot) isn't implemented. Would be really nice to have.

Feature question

Looked a bit but didn't find an answer to this: Do you support the ability to pass in specific options to the highchart library? In particular I'm thinking about the xAxis.plotBands option.

Add support for bubble charts

Download Chart with an extern button

Hello, I would like to know if is there a way to use an extern button to download the charts. I have already searched a bit and only found ways with Highcharts, but I prefer to keep with chartkick. So if is there a way let me know. thanks =^^=

Beginner: data format question

Hi All,

I'm quite new to Chartkick and the code examples work just fine.

However I want to put data from a database in a line chart. I don not understand what the format of this data must be.

If i just put it in an array the dates do not get displayed (but the name of the variable does).
I also tried JSON.stringify on my variables, but it doesn't help (Error Loading Chart).
I also tried to put the dates in a new Date().
I even used the moment() on the dates, just to make sure (-;

Can you please provide me with a code example (or explanation) of how to turn this into a Chart?

var f = 19;
var e = "2016-02-10";
var g = 5;
var h = "2016-02-11";

Thanks

2.2.2 gives error on scatter_chart

I updated chartkick via bower from 2.2.1 to 2.2.2 and now I get the error

Type mismatch. Value 2016-06-26T12:30:00.000Z does not match type number in column index 0

My setup is chartkick in Gemfile set to 2.2.2 and I install the js file via bower, version 2.2.2.
This works perfectly with js file 2.2.1.

Support Chart.js

• Create an adapter to support http://www.chartjs.org/

npmjs out of date: 1.3.0 is latest, instead of 1.4.1

Small publishing oversight?

https://www.npmjs.com/package/chartkick

Date format issue

Hello,

Something I don't understand. Basicaly I want to edit the date format on the X Axis of a column chart. I change it through hAxis.format. (Google library)
It works fine on a line chart. But with exactly the same code on column chart, the format is not changed.

Here is an example :
http://jsfiddle.net/6vW5j/1/

Could you help me ? Thanks a lot !

Hide X-axis

Is there a way to hide a charts x-axis?

Consider Ring pie chart/doughnut chart support?

It seems also hot to use ring pie chart. Or a deviation of pie chart is also possible.

GeoChart Not working

GeoChart doesn't appear to be working.

I've used your exact example...

<div id="chart-0"></div> <script> new Chartkick.GeoChart("chart-0", [["United States", 44], ["Germany", 23], ["Brazil", 22]]) </script>

All the other charts are rendering correctly using the Google charts as a version. Anyone else having issues?

Google vis, Specify Start and End as date

Hi all,

First, awesome library, loving it. Thumb up for simplicity.

Second, I'm using multiple date charts and would like to align them, so I need to specify a start and end date on the horizontal axis

Like this: http://jsfiddle.net/REgJu/

new google.visualization.LineChart(
document.getElementById('visualization')).
draw(data, {width: 500, height: 400,
interpolateNulls: true,
min: 0,
max: 10,
hAxis: {
format: "MMM dd",
title: "Date",
viewWindowMode: 'Explicit',
viewWindow:{
min: new Date(2012, 1, 13),
max: new Date(2012, 1, 19)
}
}
});

I'm trying this but I can't manage to make it work no matter what I try.

I have "undefined is not a function×" error.

line_chart @events.group_by_day(:created_at).count, library: {"hAxis" => {format: "MMM dd", title: "Responses date", viewWindowMode: "Explicit", viewWindow: {min: "new Date(2011, 1, 13)"}}}

Not sure how to make it work, any help appreciated

Is it possible to link to an url when click on the chart ?

Hello,

Thank you for this tool! it's amazing!
I'm newbie in rails / chartkick.

I'm currently using pie charts, and I'm wondering if there is a way I can get each section of my pie chart to navigate to an url.

I would like to know if it is possible / there is a way to , on clicking on the graph, it open an url link ? So if is there a way let me know. thanks!!!

    <h1>Pie Chart</h1>
    <div id="chart-2" style="height: 300px;"></div>
    <script>
      new Chartkick.PieChart("chart-2", [["Blueberry",44, "http://link1.com"],
                                                             ["Strawberry",23, "http://link2.com"],
                                                             ["Banana",22, "http://link3.com"],
                                                             ["Apple",21, "http://link4.com"],
                                                             ["Grape",13, "http://link5.com"]]);
    </script>

Add support for 2nd y-axis

Possible design (comments welcome)

new Chartkick.LineChart(id, [{name: "Series 1", data: data1}, {name: "Series 2", data: data2, y2: true}])

To set min and max values

new Chartkick.LineChart(id, series, y2: {min: 0, max: 1000})

Highlight single point

I've been trying to highlight a single point, or several individual points actually.
It shouldn't be that hard for any kind of chart but it seems that I'm only able to define a single X and Y value, that's it.

Is there an easy way or do I need to jump into the chart kick code to enable this?

Add stacked option

For column and bar charts

html entity

Hello,
i tried this - "m& # 279;n" ( i made space here to prevent this form convert entity ) and got the same as written :), must be - mėn. So my language and russian language fail, i have huge convertion table and want to use it . I really don't understand this - < script > var Chartkick = { "language": "de "};</ script >
i add this, mark language "lt", but it not working.
I found another language issue. See attached file. English is good :), but how about another language.

Unable to add unit of measurement in table.
Thanks, my email [email protected] if u need it.

Broken line chart

Trying out this library with the chartkick gem and using Google charts. Any idea why this code produce this chart? When I remove the "0" series, the "0.5" series renders correctly.

new Chartkick.LineChart("chart-1", [{"name":"0.5","data":{"2013-05-12 07:00:00+00":1,"2013-05-16 07:00:00+00":1,"2013-05-17 07:00:00+00":1,"2013-05-18 07:00:00+00":1,"2013-05-21 07:00:00+00":2}},{"name":"0","data":{"2013-05-06 07:00:00+00":1,"2013-05-10 07:00:00+00":2,"2013-05-12 07:00:00+00":1,"2013-05-16 07:00:00+00":1,"2013-05-21 07:00:00+00":1}}], {"min":0});

Point labels for scatter charts