Skip to content

Assign colors to lines & areas based on start and stop colors

License

Notifications You must be signed in to change notification settings

archsaber/mg-color-scale

This branch is up to date with dandehavilland/mg-color-scale:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

112e587 · Mar 25, 2015

History

15 Commits
Feb 24, 2015
Mar 25, 2015
Mar 25, 2015
Feb 20, 2015
Feb 10, 2015
Feb 10, 2015
Feb 11, 2015
Feb 20, 2015
Feb 19, 2015
Mar 25, 2015
Mar 25, 2015
Mar 25, 2015
Feb 20, 2015

Repository files navigation

mg-color-scale

A color-scale addon for metrics-graphics. Extrapolates colors for multiple lines based a defined range consisting of start and end colors.

Applies to lines and areas in the line chart.

Note: the addon system is still under heavy development. This project will currently only work with my pending PR for metrics-graphics.

Usage

Install using bower (not yet published):

  • bower install dandehavilland/mg-color-scale --save

Include dist/mg_color_scale.js in your build, or include it in your HTML:

  • <script src="bower_components/mg-color-scale/dist/mg_color_scale.js"></script>

Import the default styles from dist/mg_color_scale.css, or create your own:

  • <link rel="stylesheet" href="bower_components/mg-color-scale/dist/mg_color_scale.css" type="text/css" />

Enable the addon by setting args.use_color_scale to true.

Set custom start and end colors:

.chart-color-start {
  background-color: darkgreen; }

.chart-color-end {
  background-color: #640000; }

Testing

  • gulp test to run the Test'em server in continuous mode.
  • npm test or gulp test-ci for a single run, CI mode.

Requirements

Contributing

Found a bug or have an idea for a new feature? File an issue or, better still, submit a PR :

  1. Code your fix / feature.
  2. Test it.
  3. Submit a PR.

About

Assign colors to lines & areas based on start and stop colors

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 43.8%
  • HTML 41.9%
  • CSS 14.3%