Add annotations with Chartkick

Question

I want to add annotations to my time series chart. From Google's documentation: data.addColumn({type:'string', role:'annotation'});

How can I pass these column properties through Chartkick?

<%= line_chart [{name: 'annotations', data: annotations_array},{name: 'numbers as a time series', data: 'numeric_array'}] %>

not familiar with "chartkick" but the column needs to be added to the data array, which I'm guessing is `annotations_array`. is there more code you can share? if you are simply wanting to add existing column values as annotations, a view can be used. see [labeling bars](https://developers.google.com/chart/interactive/docs/gallery/barchart#labeling-bars) for an example. — WhiteHat, Feb 23 '16 at 15:26

score 1 · Accepted Answer · answered Mar 07 '16 at 22:17

I created a pull request to the chartkick.js repo to add the functionality you're describing.

https://github.com/ankane/chartkick.js/pull/58

This is just for the JS library (chartkick.js), but the approach can be used in the ruby library by using the modified chartkick.js from this pull request and passing in the right role values (certainty, annotation, etc.) to the library options.

var data = [..., [Sat Mar 05 2016 17:13:22 GMT-0800 (PST), 1, false, "cool annotation"]];
new Chartkick.LineChart("chart-1", data, {
            "library": 
              {"role":["certainty", "annotation"]}
            });

stwr667 · Answer 2 · 2019-04-30T13:35:22.700

If you're using chartjs-plugin-annotation.js: https://github.com/chartjs/chartjs-plugin-annotation, then you need to use the library option which passes options from Chartkick through to the underlying chart provider, e.g. Chart.js.

Here's an example I got working to annotate a graph with a labelled vertical line:

<%=
  line_chart profit_chart_path(staff), xtitle: 'Day', ytitle: 'Profit',
    library: {
      annotation: {
        annotations: [
          {
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: 'May 2018',
            label: {
              content: 'My Vertical Line',
              enabled: true
            }
          }
        ]
      }
    }
%>

If, for instance, you wanted a horizontal annotated line with e.g. a numerical value, use these values instead:

mode: 'horizontal',
scaleID: 'y-axis-0',
value: 20,

Ensure that you've registered the plugin first!

import ChartAnnotationsPlugin from 'chartjs-plugin-annotation';
Chart.plugins.register(ChartAnnotationsPlugin);

CottonEyeJoe · Answer 3 · 2016-02-23T14:59:58.887

0

Try something like this (not tested):

<%= line_chart TABLE.group(XXX).where(XXX), library: {name: 'annotations', data: annotations_array, name: 'numbers as a time series', data: 'numeric_array', type:'string', role:'annotation'} %>

edited Feb 23 '16 at 14:59

answered Feb 23 '16 at 14:54

CottonEyeJoe

720
1
7
28

tacia · Answer 4 · 2023-02-06T08:35:50.243

In 2022, with plugin version 1.4.0, working configuration is as follows:

library:
  {
    plugins: 
     {
       annotation: 
      {
        annotations: 
        {
          line1: 
         {
           type: 'line', 
           xMin: "2022-06-01", 
           xMax: "2022-06-01", 
           borderColor: 'rgb(255, 99, 132)', 
           borderWidth: 2
         }
       }
      }
     }
   }

Without plugins key does not work.

You have to register a new plugin in app/javascript/application.js(if it is Rails app):

import { Chart } from 'chart.js';

// Make annotations for charts
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);

an then in the view you can use it like this:

= line_chart @some_records, curve: false, prefix: "EUR ", thousands: "'", points: false,
        library: {plugins: {annotation: {annotations: {line1: {type: 'line', xMin: Date.today.beginning_of_month.to_s, xMax: Date.today.beginning_of_month.to_s, borderColor: 'rgb(105,105,105)', borderWidth: 1}}}}}

Hello, I am trying to implement a plugin (datalables and annotation) via chartkick gem on rails 7, but although I added as you suggested, I don't know how to indicate that I am using a plugin. May I ask where should I indicate that the app needs to use plugin? — yektt, Jan 19 '23 at 15:18
Good point, I edited my answer. You have to import and register your new plugin in `application.js` — tacia, Feb 06 '23 at 08:36

Add annotations with Chartkick

4 Answers4