Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Graphing library for MooTools
Tag: 1.4

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

Plugin Name

This library will generate a graph similar to Microsoft Excel.


How to use

To transform a table of data into a chart, simply create a MilkChart object of the chart type you wish passing in the table id and an object containing options for the chart.

Table structure:

<table id="chart">
            <th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th> 

            <td>Row 1</td><td>Row 2</td><td>Row 3</td><td>Row 4</td><td>Row 5</td>
  • NOTE: The <tfoot> tag is optional. This is where row names are stored. If it's not important, they will be named Row # by default.

The JavaScript:

window.addEvent('domready', function() {
    var chart = new MilkChart.Column("chart");

MilkChart Options

You can pass several options to the MilkChart chart object constructors. Each of the options has a default value.

  • width - (int: Defaults to 400) Width of chart in px
  • height - (int: Defaults to 280) Height of chart in px
  • padding - (int: Defaults to 12) Outer padding of chart in px
  • font - (string: Defaults to "Verdana") Font to be used for labels
  • fontColor - (string: Defaults to #000000) Color used for labels
  • fontSize - (int: Defaults to 10) Font size in pt
  • background - (string: Defaults to #ffffff) Background color of chart
  • chartLineColor - (string: Defaults to #333333) Color of value lines
  • chartLineWeight - (int: Defaults to 1) Line Wieght of value lines in px
  • border - (bool: Defaults to true) Draws a border around edge chart (ignores padding)
  • borderWeight - (int: Defaults to 1) Border width in px
  • borderColor - (string: Defaults to #333333) Border color
  • titleSize - (int: Defaults to 18) Size of title font in pt
  • titleFont - (string: Defaults to "Verdana") Font used for title
  • titleColor - (string: Defaults to #000000) Font color for title
  • showRowNames - (bool: Defaults to true) Show the row labels on one of the axes
  • showValues - (bool: Defaults to true) Show values on one of the axes
  • showKey - (bool: Defaults to true) Shows the column labels
  • useZero - (bool: Defaults to true) Always use 0 as the lowest value
  • copy - (bool: Defaults to false) Whether or not to hide the table or not

MilkChart Classes

These are the available classes MilkChart provides and their additional options.

  • Column
    • columnBorder - (bool:Defaults to false) Draws borders around each column
    • columnBorderWeight - (int:Defaults to 2) Width of border in pixels
    • columnBorderColor - (string:Defaults to #000000) Color of the border
  • Bar
  • Line
    • showTicks - (bool:Defaults to false) Draw tick marks at each value
    • showLines - (bool:Defaults to true) Draw lines connecting values
    • lineWeight - (int: Defaults to 3) Line weight in px
  • Scatter
    • showTicks - (bool:Defaults to true) Draw tick marks at each value
    • showLines - (bool:Defaults to false) Draw lines connecting values
  • Pie
    • stroke - (bool Defaults to true) Stroke the pie chart
    • strokeWeight - (int: Defaults to 2) Stroke weight in px
    • strokeColor - (string: Defaults to "#000000") Font color on pie slices
    • shadow - (bool: Defaults to false) Draw a shadow under the pie chart
    • showPercentages - (bool: Defaults to true) Draw slice percentage
    • chartLineWeight - (int: Defaults to 2) Outline line weight in px
    • pieBorder - (bool: Defaults to false) Draw a border around pie

Chart Colors

For the chart colors, your can specify a list of colors and it will repeat those as needed. You can also specify a single color and MilkChart will create a gradient as needed. Or you can supply two colors to create a gradient between.


Column Chart Bar Chart Line Chart Scatter Chart Pie Chart

Something went wrong with that request. Please try again.