Fork me on GitHub

Line Charts

Example

            
    <div id='chart_line'></div>
    <script>
      Morris.Line({
        element: 'chart_line',
        data: [
          { year: '1958', nb: 1 },
          { year: '1962', nb: 2 },
          { year: '1970', nb: 3 },
          { year: '1994', nb: 4 },
          { year: '2002', nb: 5 }
        ],
        xkey: 'year',
        ykeys: ['nb'],
        labels: ['Editions Wins']
      });
    </script>

Configuration

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 (default 3).
pointSize Diameter of the series points, in pixels (default 4).
pointFillColors Colors for the series points. By default uses the same values as lineColors
pointStrokeColors Colors for the outlines of the series points (default #ffffff).
pointSizeGrow
new v0.6		 This is the size grow in pixel of hovered point (default 3).
pointSuperimposed
new v0.6		 Set to false to offset redundant points in order to prevent them to hover each others (default: true).
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].

new v0.6 ymax2 can be used for the right Y-axis;
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.

new v0.6 ymin2 can be used for the right Y-axis;
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.
The style of grid can be customised through gridTextColor (default: #888), gridTextSize (default: 12), gridTextFamily (default: sans-serif) and gridTextWeight (default: normal)
verticalGrid Set to true to display vertical grid lines (default: false).
verticalGridType
new v0.6		 This is to set the type of dash / dot of the vertical grid (default: '').
This can be set either '', '-', '.', '-.', '-..', '. ', '- ', '--', '- .', '--.', '--..'
resize Set to false to disable automatic resizing when the containing element resizes (default: true).
animate
new v0.6		 Set to false to disable chart animation (default: true).
dataLabels
new v0.6		 Set to true to display values above points (default: false).

Appearance of label can be customized through properties dataLabelsFamily, dataLabelsSize, dataLabelsWeight and dataLabelsColor.
trendLine Set to true to display the trend line of the serie (default: false).

Appearance of trend lines can be customized through properties trendLineWidth, trendLineWeight and trendLineColors (array).
trendLineType
new v0.6		 This is to define the type of trend line to be computed. Default value is linear. It can be set to polynomial, logarithmic or exponential if regression.js 1.4.0 is loaded.
nbYkeys2
new v0.6		 This to set which how many ykeys would be displayed as line on the right Y-axis, from the end of ykeys array (default: 0).
hoverOrdered
new v0.6		 Set to true to display content in hover according to points value instead of series order (default: false).
hoverReversed
new v0.6		 Set to true to reverse order of content in hover (default: false).

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.
fillOpacity Change the opacity of the area fill colour. Accepts values between 0.0 (for completely transparent) and 1.0 (for completely opaque).
belowArea
new v0.6		 Set to false to do not display the area below the first line (default true).
areaColors
new v0.6		 Array containing colors for the series lines/points. if empty, it is equals to values of lineColors.

Example

            
    <div id='chart_area'></div>
    <script>
      Morris.Area({
        element: 'chart_area',
        data: [
          { year: '1958', nb: 1 },
          { year: '1962', nb: 2 },
          { year: '1970', nb: 3 },
          { year: '1994', nb: 4 },
          { year: '2002', nb: 5 }
        ],
        xkey: 'year',
        ykeys: ['nb'],
        labels: ['Editions Wins']
      });
    </script>