explaingit

morrisjs/morris.js

★ 6,884CoffeeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A JavaScript library for drawing interactive line, bar, area, and donut charts on web pages, with built-in understanding of time-series data and hover tooltips, note: no longer actively maintained since 2014.

Mindmap

mindmap
  root((morris.js))
    What it does
      Web charts library
      Time-series support
      Hover tooltips
    Chart Types
      Line charts
      Bar and area charts
      Donut charts
    Dependencies
      jQuery
      Raphael.js
    Features
      Auto date x-axis
      setData live update
      Stacked bars
      Goal lines
    Status
      No releases since 2014
      Functional but unmaintained
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add an interactive time-series line chart to a dashboard page by passing an array of date-value pairs and pointing at a container element.

USE CASE 2

Display a donut chart showing category breakdowns with selectable segments and hover labels using a simple data array.

USE CASE 3

Update a live chart with new data after the page loads by calling setData without rebuilding the chart from scratch.

USE CASE 4

Show a stacked bar chart with multiple data series and configurable axis labels on any page that already uses jQuery.

Tech stack

CoffeeScriptJavaScriptjQueryRaphael.js

Getting it running

Difficulty · easy Time to first run · 30min

Requires jQuery and Raphael.js as dependencies, the project has had no release since June 2014 and is no longer actively maintained.

License terms are available in the repository, the project is open source.

In plain English

Morris.js is a JavaScript library for drawing charts on web pages. It handles four chart types: line charts, bar charts, area charts, and donut charts. The project was built with time-series data in mind, so its line charts are well suited to plotting values over time, with x-axis labels that understand date and time formats automatically. The API is designed to be simple. You point it at a container element on your page, pass in an array of data, and specify which fields to use for the x and y axes. From there the library draws the chart. Charts can be updated after creation with a setData method, which lets you refresh the data without rebuilding the whole chart from scratch. To use Morris.js, you need jQuery and Raphael.js, a vector graphics library that handles the actual drawing. Morris.js builds on top of Raphael to produce its rendered output. Charts are interactive out of the box, showing hover tooltips with data values when the user moves the mouse over data points. Features added over several years of development include stacked bar charts, donut charts with selectable segments, automatic chart resizing when the browser window changes size, range selection on time-series charts, support for marking specific events or goal lines on a chart, and configurable axis labels including diagonal label angles. You can also supply custom formatting functions for labels and hover content. The maintainer has stated that the project is no longer actively supported, and no release has been made since June 2014. The code is available and functional, but bug fixes and new features are not being added.

Copy-paste prompts

Prompt 1
Show me how to add a Morris.js line chart to an HTML page that plots monthly website visitors from a JSON array. Include the required jQuery and Raphael.js script tags and the Morris initialization code.
Prompt 2
I have a Morris.js time-series chart but the x-axis date labels are overlapping. Show me how to set a diagonal label angle and reduce the number of x-axis grid lines.
Prompt 3
Create a Morris.js donut chart showing a budget breakdown by category. Show me how to handle the segment click event to highlight the selected slice.
Prompt 4
My dashboard polls an API every 30 seconds for new data. Show me how to update a Morris.js line chart in place using the setData method so the chart refreshes without a page reload.
Prompt 5
I want to add a goal line to a Morris.js bar chart to mark a target value. Show me how to configure the goals and goalStrokeWidth options.
Open on GitHub → Explain another repo

← morrisjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.