New In Version 1.2.0

  • Ability to hide (filter out) any dataset on load
  • Option to 'Transpose' a CSV / Google Sheet data source. This essentially flips the rows and the columns and is especially useful if utilising a form to collect data (as this approach tends to add data by row as opposed to column).
  • Option to specify hover colours by dataset (NB: background/fill hover colour not used when using a custom array)
  • Custom colour array option added to all datasets
  • Option to select the Tooltip 'mode' (this affects what data point(s) are displayed in the tooltip)
  • Ability to customise Tooltip text (simple and advanced options available):
    • Simple: Prepend or Append text to the value (useful to add in units info / symbols e.g. £,$ or %)
    • Simple: Option to 'localise' numerical value (i.e. the value will be shown in the viewer's country's format e.g. with commas as 1000s separators etc)
    • Advanced: The option to utilise Chart.js callbacks to fully customise the tooltip content. NB: Some snippets are provided as examples but no support is offered for this function. You can search Google / StackOverflow to find solutions that meet your particular needs.
  • Ability to customise axis data values. As with the Tooltips, you can:
    • Prepend or Append text to the value (useful to add in units info / symbols e.g. £,$ or %)
    • 'Localise' numerical value (i.e. the value will be shown in the viewer's country's format e.g. with commas as 1000s separators etc)
  • Ability to reverse the order of the legend items (especially useful for stacked Bar or Line charts and when Legend is positioned left or right)
  • Accessibility improvements - Scope to add a chart description that will provide an 'aria-label' for use with assistive technologies such as screen readers
  • Ability to specify the cutout percentage of a Doughnut chart (NB: Make sure that you leave enough of the doughnut to display all your datasets otherwise the chart will not display. The cutout can be as large as you like if only one dataset.)
  • Option to remove the scale animation used with Pie, Doughnut and Polar Area chart types leaving just a the circular reveal animation.
  • Option to change the start angle of Pie/Doughnut charts
  • Option to display a 'half' Pie or Doughnut chart
  • Option to control whether some (x-axis) labels can be omitted on smaller screens or whether all should be displayed regardless of space
  • A minimum rotation angle can now be set for x-axis labels. This can be anything from 0 (default/horizontal) to 90 (vertical)

Charter stack is built on the incredible chart.js library and harnesses the power that that brings into an easy to use stack.

The stack currently allows you to add 7 types of charts:

  • Pie charts,
  • Doughnut charts,
  • Line charts,
  • Bar charts (horizontal and vertical),
  • Polar Area charts
  • Radar charts

More chart types will be added in due course.

There are also countless options in the stack that allow you to control things like titles, tooltips, legends, labels, gridlines, colours and much more!

The charts are interactive too. Hovering over any of the data points in a chart will show you an information bubble/tooltip. Clicking on any of the items in a legend will toggle that item’s visibility. It is all beautifully animated too.

Check out the website to see the example charts in action. And be sure to view on mobile too to see how well the charts translate between devices.

Reviews

inStacks Software

3 days ago

Best way to display charts

If you search for a way to display charts in RW, don't look further. Perfect stack!

pmurph5

4 weeks ago

Easy to use, versatile, and fun

My site has some data-heavy pages that include charts. I previously did these in Numbers, screen captured the Numbers chart, and then pasted them in as PNG graphics.

Charter has a better way. It lets me make charts -- Line, Bar (horizontal), Bar (vertical), Pie and more -- easily.

For simple charts, I specify the labels such as "2015","2016","2017","2018" and then the data such as 121,255,209,300. The chart "makes itself" automatically. When viewed in Preview or live after publishing, the lines, bars, pies, etc. animate into place which is a nice touch.

But I can also do more complex charts by exporting a Comma Separated Value table from a Numbers or Excel spreadsheet. Check out video #3 of the tutorial to see a bar chart showing data for each month of a year (one bar made of 12 parts) and then 11 years worth of data (11 total bars).

I tried it and in version 1.1 there is currently a limit of 10 datasets per chart so I can only do months Jan-Oct. But I wrote to the developer who said (even in the video) that more datasets are coming in version 1.2., so Charter can handle 12 datasets.

I'm pretty picky about colors, line weights, getting rid of "chartjunk" lines, etc. Charter is good for fine tuning all of these.

I also like how the chart is "transparent" meaning if I add a Charter stack to an element that has a background color set, the chart is drawn on the background color. It blends right in. Of course if you want to set a background color, border, rounded corners etc. like any other Stack, you can do that as well.

I re-did a chart-heavy page in less than a day -- and it was fun. If you want to see, check out laserpointersafety.com/latest-stats/latest-stats.html. Many of the various buttons on the page have one or more Charter charts in the drop-down.

I would highly recommend Charter. When I did have a problem, I got a reply within an hour, so the service seems great as well.

Likes