The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Graphs and Charts for Canvas in JavaScript.
    Filed under 

    • 🔾54%Overall
    • 2,447
    • 43.7 days
    • 🕩530
    • 👥14


    The Canvas graphing library.

    Google Groups

    Please fork with your question or bug reproduction case.


    The API consists of a primary draw method which accepts a configuration object, helper methods, and several microlibs.


        // Container div:
        container = document.getElementById("flotr-example-graph"),
        // First data series:
        d1 = [[0, 3], [4, 8], [8, 5], [9, 13]],
        // Second data series:
        d2 = [],
        // A couple flotr configuration options:
        options = {
          xaxis: {
            minorTickFreq: 4
          grid: {
            minorVerticalLines: true
        i, graph;
      // Generated second data set:
      for (i = 0; i < 14; i += 0.5) {
        d2.push([i, Math.sin(i)]);
      // Draw the graph:
      graph = Flotr.draw(
        container,  // Container element
        [ d1, d2 ], // Array of data series
        options     // Configuration options



    Flotr may be extended by adding new plugins and graph types.

    Graph Types

    Graph types define how a particular chart is rendered. Examples include line, bar, pie.

    Existing graph types are found in js/types/.


    Plugins extend the core of flotr with new functionality. They can add interactions, new decorations, etc. Examples include titles, labels and selection.

    The plugins included are found in js/plugins/.


    This project uses smoosh to build and jasmine with js-imagediff to test. Tests may be executed by jasmine-headless-webkit with cd spec; jasmine-headless-webkit -j jasmine.yml -c or by a browser by navigating to flotr2/spec/SpecRunner.html.


    Thanks to Bas Wenneker, Fabien Ménager and others for all the work on the original Flotr. Thanks to Jochen Berger and Jordan Santell for their contributions to Flotr2.

    Show All