Easy to use chart plotting component

Usage no npm install needed!

<script type="module">
  import easyCharts from 'https://cdn.skypack.dev/easy-charts';


Easy Charts

East Charts is (going to be) an easy to use chart plotting module which plots SVG charts in the angular framework.

Why start yet another charting library when there are already many of exsiting libraries out there? Firstly a lot of the libraries out there are incomplete and the authors have lost interest. Secondly we wanted a SVG based solution rather than canvas based solution. Thirdly a lot of the existing solutions were very heavey wrappers round other libraries shoe-horned into the angular framework. This library is Angular from the ground up. Finally I wanted to explore the full capabilities of SVG and what it can offer and this is a great way to do this.

Please note that as I'm Britsh, Colour is spelt in English rather than American English.


npm install easy-charts

Graph Types

Line Graph

Example Usage:

<easycharts-graph [series_data]="{'Level': [ [1,5], [2,10], [3,7], [4,15], [5,9]] }" [point_style]='None'>

  • width - width of graph
  • height - height of graph
  • series_data - data for graph
  • series_fill - are areas filled or not
  • point_style - style of point makrings ... Circle, Cross, Plus, None
  • line_colours - comma separated list of colours for lines
  • grid_colour - colour of grid lines
  • background_colour_1 - background colour 1
  • background_colour_2 - background colour 2


0.0.3: Line graph

  • Fix zooming in some cases
  • Stop X axis labels from overflowing to left hand side
  • New argument ... show_second_y_scale to toggle on / off the second y scale
  • Sub grid lines don't appear if there will be less than 2 pixels between them
  • Initial "unzoom" support

0.0.4: Line graph

  • Circle, Cross and Plus pointer styles

0.0.5: Line graph

  • Tooltips
  • Width and Height attributes

0.0.6: Line graph

  • Line colours
  • Background colour
  • Grid colour

0.0.7: Line graph

  • Support for filled areas

0.0.8: Line graph

  • First support for downloading and saving graph

0.0.9: Allow use with Angular 7

0.0.10: Line graph

  • Support fill_colours for line graphs
  • Make x and y grid spacing configurable

0.0.12: Solve various build / install issues

0.0.13: Line graph

  • Save and unzoom icons
  • Graph refreshes correctly when data is updated
  • Fixing error when plotting horizontal lines

0.0.13: Bar Chart

  • Initial work on bar chart/li>

0.0.15: Line graph

  • Initial X axis formatting

0.0.16: Line graph

  • Ability to change axis label colour
  • Give a 5% boundry on the y axis