The London Perl and Raku Workshop takes place on 26th Oct 2024. If your company depends on Perl, please consider sponsoring and/or attending.


Chart::Clicker - Powerful, extensible charting.


version 2.90


  use Chart::Clicker;

  my $cc = Chart::Clicker->new;

  my @values = (42, 25, 86, 23, 2, 19, 103, 12, 54, 9);
  $cc->add_data('Sales', \@values);

  # alternately, you can add data one bit at a time...
  foreach my $v (@values) {
    $cc->add_data('Sales', $v);

  # Or, if you want to specify the keys you can use a hashref
  my $data = { 12 => 123, 13 => 341, 14 => 1241 };
  $cc->add_data('Sales', $data);



Chart::Clicker aims to be a powerful, extensible charting package that creates really pretty output. Charts can be saved in png, svg, pdf and postscript format.

Clicker leverages the power of Graphics::Primitive to create snazzy graphics without being tied to specific backend. You may want to begin with Chart::Clicker::Tutorial.


For code examples see the examples repository on GitHub:



Clicker supports the following renderers:


Line Chart


Stacked Line Chart


Bar Chart


Stacked Bar Chart


Area Chart


Stacked Area Chart


Bubble Chart


Candlestick Chart


Point Chart


Pie Chart


Polar Area Chart


The synopsis shows the simple way to add data.

  my @values = (42, 25, 86, 23, 2, 19, 103, 12, 54, 9);
  foreach my $v (@values) {
    $cc->add_data('Sales', $v);

This is a convenience method provided to make simple cases much simpler. Adding multiple Series to a chart is as easy as changing the name argument of add_data. Each unique first argument will result in a separate series. See the docs for add_data to learn more.

If you'd like to use the more advanced features of Clicker you'll need to shake off this simple method and build Series & DataSets explicitly.

  use Chart::Clicker::Data::Series;
  use Chart::Clicker::Data::DataSet;


  my $series = Chart::Clicker::Data::Series->new(
    keys    => [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
    values  => [ 42, 25, 86, 23, 2, 19, 103, 12, 54, 9 ],

  my $ds = Chart::Clicker::Data::DataSet->new(series => [ $series ]);


This used to be the only way to add data, but repeated requests to make the common case easier resulted in the inclusion of add_data.


The normal use case for a chart is a couple of datasets on the same axes. Sometimes you want to chart one or more datasets on different axes. A common need for this is when you are comparing two datasets of vastly different scale such as the number of employees in an office (1-10) to monthly revenues (10s of thousands). On a normal chart the number of employees would show up as a flat line at the bottom of the chart.

To correct this, Clicker has contexts. A context is a pair of axes, a renderer and a name. The name is the 'key' by which you will refer to the context.

  my $context = Chart::Clicker::Context->new( name => 'sales' );



New contexts provide a fresh domain and range axis and default to a Line renderer.

Caveat: Clicker expects that the default context (identified by the string "default") will always be present. It is from this context that some of Clicker's internals draw their values. You should use the default context unless you need more than one, in which case you should use "default" as the base context.


Clicker supports PNG, SVG, PDF and PostScript output. To change your output type, specificy it when you create your Clicker object:

  my $cc = Chart::Clicker->new(format => 'pdf', ...);
  # ...

If you are looking to get a scalar of the output for use with HTTP or similar things, you can use:

  # ... make your chart
  my $image_data = $cc->rendered_data;

If you happen to be using Catalyst then take a look at Catalyst::View::Graphics::Primitive.



Set/Get the background color. Defaults to white.


Set/Get the border.


Set/Get the color_allocator for this chart.


Set/Get the contexts for this chart.


Get/Set the datasets for this chart.


Set/Get the driver used to render this Chart. Defaults to Graphics::Primitive::Driver::Cairo.


Get the format for this Chart. Required in the constructor. Must be on of Png, Pdf, Ps or Svg.


Fast or slow plot mode. When in fast mode, data elements that are deemed to be superfluous or invisible will not be drawn. Default is 'slow'


Flag controlling if the grid is rendered over the data. Defaults to 0. You probably want to set the grid's background color to an alpha of 0 if you enable this flag.


Set/Get the height. Defaults to 300.


Set/Get the layout manager. Defaults to Layout::Manager::Compass.


Set/Get the legend that will be used with this chart.


The position the legend will be added. Should be one of north, south, east, west or center as required by Layout::Manager::Compass.


Set/Get the marker overlay object that will be used if this chart has markers. This is lazily constructed to save time.


Set/Get an arrayref of "over decorations", or things that are drawn OVER the chart. This is an advanced feature. See in the examples.


Set/Get the padding. Defaults to 3px on all sides.


Set/Get the plot on which things are drawn.


You can add "child" graphs to this one via add_subgraph. These must be Chart::Clicker objects and they will be added to the bottom of the existing chart. This is a rather esoteric feature.


Set/Get the title component for this chart. This is a Graphics::Primitive::TextBox, not a string. To set the title of a chart you should access the TextBox's text method.

  $cc->title->text('A Title!');
  # etc, etc

If the title has text then it is added to the chart in the position specified by title_position.

You should consult the documentation for Graphics::Primitive::TextBox for things like padding and text rotation. If you are adding it to the top and want some padding between it and the plot, you can:



The position the title will be added. Should be one of north, south, east, west or center as required by Layout::Manager::Compass.

Note that if no angle is set for the title then it will be changed to -1.5707 if the title position is east or west.


Set/Get the width. Defaults to 500.



Get a count of contexts.


Get a list of context names.

delete_context ($name)

Remove the context with the specified name.

get_context ($name)

Get the context with the specified name

set_context ($name, $context)

Set a context of the specified name.


Add the specified dataset (or arrayref of datasets) to the chart.


Get a count of datasets.

get_dataset ($index)

Get the dataset at the specified index.


Returns the data for this chart as a scalar. Suitable for 'streaming' to a client.


Add an over decoration to the list.

get_over_decoration ($index)

Get the over decoration at the specified index.


Get a count of over decorations.


Add the specified context to the chart.


Add a subgraph to this chart.


Draw this chart.


Returns an arrayref containing all datasets for the given context. Used by renderers to get a list of datasets to chart.

add_data ($name, $data)

Convenience method for adding data to the chart. Can be called one of three ways.


Passing a name and a scalar will append the scalar data to that series' data.

  $cc->add_data('Sales', 1234);
  $cc->add_data('Sales', 1235);

This will result in a Series named 'Sales' with two values.


Passing a name and an arrayref works much the same as the scalar method discussed above, but appends the supplied arrayref to the existing one. It may be mixed with the scalar method.

  $cc->add_data('Sales', \@some_sales);
  $cc->add_data('Sales', \@some_more_sales);
  # This works still!
  $cc->add_data('Sales', 1234);

This allows you to pass both keys and values in all at once.

  $cc->add_data('Sales', { 2009 => 1234, 2010 => 1235 });
  # appends to last call
  $cc->add_data('Sales', { 2011 => 1234, 2012 => 1235 });

You may call the hashref version after the scalar or arrayref versions, but you may not add a scalar or arrayref after adding a hashref (as it's not clear what indices should be used for the new data).

set_renderer ($renderer_object, [ $context ]);

Sets the renderer on the specified context. If no context is provided then 'default' is assumed.


This method is passed through to the underlying driver. It is only necessary that you call this if you manually called draw beforehand. You likely want to use write_output.

write_output ($path)

Write the chart output to the specified location. Output is written in the format provided to the constructor (which defaults to Png). Internally calls draw for you. If you use this method, do not call draw first!



Get the width available in this container after taking away space for insets and borders.


Get the height available in this container after taking away space for insets and borders.


I've had numerous reports of problems with Chart::Clicker when using CentOS. This problem has usually be solved by updating the version of cairo. I've had reports that upgrading to at least cairo-1.8.8-3 makes thinks work properly.

I hesitate to provide any other data with this because it may get out of date fast. If you have trouble feel free to drop me an email and I'll tell you what I know.


Many thanks to the individuals who have contributed various bits:

Ash Berlin

Brian Cassidy

Guillermo Roditi

Torsten Schoenfeld

Yuval Kogman


Chart::Clicker is on github:


Cory G Watson <>


This software is copyright (c) 2016 by Cory G Watson.

This is free software; you can redistribute it and/or modify it under the same terms as the Perl 5 programming language system itself.