Line & Area Charts


Line Charts

The public API is terribly simple. It's just one function: Morris.Line(options), where options is an object containing some of the following configuration options.

element
required
The ID of (or a reference to) the element into which to insert the graph.
Note: this element must have a width and height defined in its styling.
data
required
The data to plot. This is an array of objects, containing x and y attributes as described by the xkey and ykeys options.
Note: ordering doesn't matter here - you can supply the data in whatever order works best for you.
Note 2: if you need to update the plot, use the setData method on the object that Morris.Line returns. There's a setData example in the GitHub repo.
xkey
required
A string containing the name of the attribute that contains date (X) values.
Timestamps are accepted in the form of millisecond timestamps (as returned by Date.getTime() or as strings in the following formats:
  • 2012
  • 2012 Q1
  • 2012 W1
  • 2012-02
  • 2012-02-24
  • 2012-02-24 15:00
  • 2012-02-24 15:00:00
  • 2012-02-24 15:00:00.000
Note: when using millisecond timestamps, it's recommended that you check out the dateFormat option.
Note 2: date/time strings can optionally contain a T between the date and time parts, and/or a Z suffix, for compatibility with ISO-8601 dates.
ykeys
required
A list of strings containing names of attributes that contain Y values (one for each series of data to be plotted).
labels
required
A list of strings containing labels for the data series to be plotted (corresponding to the values in the ykeys option).
lineColors Array containing colors for the series lines/points.
lineWidth Width of the series lines, in pixels.
pointSize Diameter of the series points, in pixels.
pointFillColors Colors for the series points. By default uses the same values as lineColors
pointStrokeColors Colors for the outlines of the series points. (#ffffff by default).
ymax Max. bound for Y-values. Alternatively, set this to 'auto' to compute automatically, or 'auto [num]' to automatically compute and ensure that the max y-value is at least [num].
ymin Min. bound for Y-values. Alternatively, set this to 'auto' to compute automatically, or 'auto [num]' to automatically compute and ensure that the min y-value is at most [num].
Hint: you can use this to create graphs with false origins.
smooth Set to false to disable line smoothing.
hideHover Set to false to always show a hover legend.
Set to true or 'auto' to only show the hover legend when the mouse cursor is over the chart.
Set to 'always' to never show a hover legend.
hoverCallback Provide a function on this option to generate custom hover legends.
The function will be called with the index of the row under the hover legend, the options object passed to the constructor as arguments, a string containing the default generated hover legend content HTML, and an object containing the original data for the row as passed in the data option.
eg:
hoverCallback: function (index, options, content, row) {
  return "sin(" + row.x + ") = " + row.y;
}
parseTime Set to false to skip time/date parsing for X values, instead treating them as an equally-spaced series.
units Deprecated. Please use postUnits.
postUnits Set to a string value (eg: '%') to add a label suffix all y-labels.
preUnits Set to a string value (eg: '$') to add a label prefix all y-labels.
dateFormat A function that accepts millisecond timestamps and formats them for display as chart labels.
default: function (x) { return new Date(x).toString(); }
xLabels Sets the x axis labelling interval. By default the interval will be automatically computed. The following are valid interval strings:
  • "decade"
  • "year"
  • "month"
  • "week"
  • "day"
  • "hour"
  • "30min"
  • "15min"
  • "10min"
  • "5min"
  • "minute"
  • "30sec"
  • "15sec"
  • "10sec"
  • "5sec"
  • "second"
xLabelFormat A function that accepts Date objects and formats them for display as x-axis labels. Overrides the default formatter chosen by the automatic labeller or the xLabels option.
eg: function (x) { return x.toString(); }
xLabelAngle The angle in degrees from horizontal to draw x-axis labels.
yLabelFormat A function that accepts y-values and formats them for display as y-axis labels.
eg: function (y) { return y.toString() + 'km'; }
goals A list of y-values to draw as horizontal 'goal' lines on the chart.
eg: goals: [1.0, -1.0]
goalStrokeWidth Width, in pixels, of the goal lines.
goalLineColors Array of color values to use for the goal line colors. If you list fewer colors here than you have lines in goals, then the values will be cycled.
events A list of x-values to draw as vertical 'event' lines on the chart.
eg: events: ['2012-01-01', '2012-02-01', '2012-03-01']
eventStrokeWidth Width, in pixels, of the event lines.
eventLineColors Array of color values to use for the event line colors. If you list fewer colors here than you have lines in events, then the values will be cycled.
continuousLine When set to false (the default), all null and undefined values in a data series will be ignored and lines will be drawn spanning them.
When set to true, null values will break the line and undefined values will be spanned.
Note: in v0.5.0, this setting will be removed and the behaviour will be to break lines at null values.
axes Set to false to disable drawing the x and y axes.
grid Set to false to disable drawing the horizontal grid lines.
gridTextColor Set the color of the axis labels (default: #888).
gridTextSize Set the point size of the axis labels (default: 12).
gridTextFamily Set the font family of the axis labels (default: sans-serif).
gridTextWeight Set the font weight of the axis labels (default: normal).
fillOpacity Change the opacity of the area fill colour. Accepts values between 0.0 (for completely transparent) and 1.0 (for completely opaque).
resize Set to true to enable automatic resizing when the containing element resizes. (default: false).
This has a significant performance impact, so is disabled by default.

Live Example

Morris.js Line Chart Example

Area Charts

Create an area chart using Morris.Area(options). Area charts take all the same options as line charts, and the following extras:

behaveLikeLine Set to true to overlay the areas on top of each other instead of stacking them.

Live Example

Morris.js Area Chart Example