Line Chart Library

oi.linechart.js (25.2kB; 16.6kB minified; 7kB minified and gzipped) is our small, customisable, standalone, Javascript library for making simple SVG graphs. There are some examples below.

Getting started

First we need a DOM element to exist and it needs to have a width/height set. We can then attach our OI.linechart to the DOM element and set some properties of our chart. Next we can add a data series with some custom properties.

HTML

				<div id="chart"></div>
			

Javascript

				// Set up the chart object
				// The first argument is the DOM element to attach to (you may want to make sure it exists before you attach it)
				// The second argument is an object setting optional properties - see below
				var chart = OI.linechart(document.getElementById('chart'),properties);
				// Next we add a data series - see "Add a series" below
				chart.addSeries([{'x':1,'y':1},{'x':1,'y':2}],{})
				// Draw the chart
				chart.draw();
			

Chart properties

When creating a new line chart you can set chart properties:

• left - the edge of the chart from the left-side of the chart area
• right - the edge of the chart from the right-side of the chart area
• top - the edge of the chart from the top-side of the chart area
• bottom - the edge of the chart from the bottom-side of the chart area
• axis - properties about the axes
• axis.x - properties for the x-axis (see "Axis properties" below)
• axis.y - properties for the y-axis (see "Axis properties" below)
• key - an object defining a key
• key.show - is a key visible (default = false)
• key.position - a string defining e.g. top left, bottom right

You can also update the properties of the chart later using chart.setProperties(props).

Axis properties

You can update each axis with the following options:

• label - a title for the axis
• line - an object defining the axis line
• line.show - a boolean value to set the visibility of the line (default = true)
• line.stroke - the stroke (default = black)
• line.stroke-width - the stroke width (default = 1)
• min - hardcode a minimum for the chart
• max - hardcode a maximum for the chart
• grid - an object defining the grid
• grid.show - a boolean value to set the visibility of the grid lines (default = false)
• grid.stroke - the stroke (default = black)
• grid.stroke-width - the stroke width (default = 1)
• labels - an object of hard-coded tick marks/labels
• labels[value] - an object describing the label for value
• labels[value].label - a string for the label (if omitted there will be no label but still a tick mark)
• labels[value].fill - a hex/rgb colour for the label fill
• labels[value].length - the length of the tick
• labels[value].align - top or bottom (default) for the x-axis or left (default) or right for the y-axis tick marks
• labels[value].text-anchor - set the text-anchor for the label
• labels[value].offset - shift the label position away from the tick
• labels[value].ticksize - the size of the tick mark in pixels

Add a series

You can add a series using chart.addSeries(data,attr) where data is of the form [{x:1,y:0.1},{x:2,y:0.2},{x:3,y:0.3}] and attr is of the form:

• points - an object styling the points
• points.show - a boolean to set the point visibility (default = true)
• points.color - the hex/rgb colour of the points
• points.size - either a number of function for setting the size of the points
• points.stroke-width - set the width of the stroke
• line - an object styling the line
• line.show - a boolean to set the line visibility (default = true)
• line.color - the hex/rgb colour of the line
• line.stroke-width - set the width of the stroke
• line.stroke-dasharray - set the stroke's dash array
• tooltip - an object styling the tooltip
• tooltip.label - either a fixed string or a function that generates the tooltip text using properties of the data.

Examples

1. Basic example
2. Grid lines
3. Multiple series with a key
4. Update series
5. Dashed line
6. Label alignment
7. Style tooltip (darker charts)
8. Tick marks
9. Update range

Basic example

This is a basic chart with one series.

Grid lines

This is a basic chart with one series and grid lines of different colours.

Multiple series with a key

This example has two data series representing the monthly minimum and maximum temperatures in Leeds, UK. The points have a tooltip that shows the value. We show a key, gridlines on the y-axis, and remove the y-axis line.

Update series

This chart displays randomly generated data and we define the scale on the y-axis using min and max. We can update the data with an animation by setting animation-duration on the chart with CSS. The randomised data also includes a randomised time interval to show how the line and points are animated. We'll make the y-axis gridlines silver.

Randomise data

Dashed line

This chart has a dashed line by setting the stroke-dasharray property.

Label alignment

Let's adjust the placement of the labels. We can align them to the right and top with align. We can custom-align the text-anchor of the labels. We can explicitly set the label offset from the tick marks using offset. We can explicitly set the ticksize per tick.

Style tooltip (darker charts)

Sometimes we need to customise the tooltip e.g. if we've changed the chart background colour. We do that in the CSS. We can also customise the text in the tooltip per data series by defining a tooltip label function.

Tick marks

There are times when you may wish that some tick marks are labelled and others are not and you might want the ticks to be different lengths. You can set the ticksize per tick. You can add ticks that have label empty or missing.

Update range