# flot/flot

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/flot-flot).**

5,911 stars · 1,538 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/flot/flot
- Homepage: http://www.flotcharts.org/
- awesome-repositories: https://awesome-repositories.com/repository/flot-flot.md

## Description

Flot is an interactive charting library for jQuery that renders line, bar, pie, and time-series plots with zooming and panning. It provides interactive plots for engineering and scientific data with customizable axes, scales, and series styles, and supports real-time data updates. The library is built as a jQuery plugin with a canvas-based rendering pipeline and a plugin extension system that allows third-party code to add new chart types, interactions, and data transformations.

The library distinguishes itself through a broad range of specialized chart types, including candlestick, bubble, radar, Gantt, waterfall, and pyramid charts, alongside standard bar and pie charts. It offers chart animation on load and horizontally, a mini-map navigator for panning and zooming, multi-touch gesture support, and navigation controls. Flot also provides real-time data updates, dynamic resizing, series visibility toggling, and tooltip display on data points.

Additional capabilities include time series data visualization with time zone support, line chart downsampling for performance, percentage stacking of series, series aggregation, and image export to PNG, BMP, or JPEG. The library is extensible through its plugin system, which can add new chart types, interactions, and data transformations.

## Tags

### Web Development

- [jQuery Plugins](https://awesome-repositories.com/f/web-development/jquery-plugins.md) — Exposes chart functionality as a jQuery plugin, integrating with jQuery's selector and chaining patterns.

### Data & Databases

- [Data Visualization Charts](https://awesome-repositories.com/f/data-databases/data-visualization-charts.md) — Creates browser-based data visualizations with multiple chart types and real-time updates.
- [General Chart Renderers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/json-data-chart-renderers/general-chart-renderers.md) — Renders interactive, customizable plots for engineering and scientific data visualization. ([source](http://www.flotcharts.org/flot/examples))
- [Time-Series Chart Renderers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/time-series-chart-renderers.md) — Renders date-based data on a time axis with support for time zones and zooming. ([source](http://www.flotcharts.org/flot/examples))
- [Time-Series Visualizers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/time-series-visualizers.md) — Plots date-based data on time axes with zoom, pan, and time zone support.
- [Chart Interaction Controls](https://awesome-repositories.com/f/data-databases/interactive-data-charting/chart-interaction-controls.md) — Provides interactive charting with zoom, pan, and hover interactions for engineering data.
- [Axis Label and Tick Customizers](https://awesome-repositories.com/f/data-databases/chart-axes/scale-and-range-configurations/axis-label-and-tick-customizers.md) — Configures axis labels, tick marks, log scales, and multiple axes for flexible data presentation. ([source](http://www.flotcharts.org/flot/examples))
- [Bar Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/data-analysis-tools/bar-charts.md) — Draws bar charts with configurable alignment and fill behavior across different browsers. ([source](http://www.flotcharts.org/blog/feed.xml))
- [Pie Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/chart-components-utilities/pie-charts.md) — Draws pie charts with configurable slice rendering and highlight placement. ([source](http://www.flotcharts.org/blog/feed.xml))
- [Bubble Charts](https://awesome-repositories.com/f/data-databases/data-visualization-charts/bubble-charts.md) — Draws scatter plots where each point is sized by a third dimension to show magnitude. ([source](http://www.flotcharts.org/plugins))
- [Candlestick Charts](https://awesome-repositories.com/f/data-databases/data-visualization-charts/candlestick-charts.md) — Displays open-high-low-close data as candlestick bars for financial time series. ([source](http://www.flotcharts.org/plugins))
- [Radar Chart Renderers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/radar-chart-renderers.md) — Plots multivariate data on a radial grid with each variable on a separate axis. ([source](http://www.flotcharts.org/plugins))
- [Point Click and Hover Interactions](https://awesome-repositories.com/f/data-databases/interactive-data-charting/chart-interaction-controls/point-click-and-hover-interactions.md) — Enables users to click, hover, and select data points to explore chart details. ([source](http://www.flotcharts.org/flot/examples))
- [Real-Time Charting Engines](https://awesome-repositories.com/f/data-databases/real-time-data-streaming/real-time-charting-engines.md) — Fetches fresh data automatically and redraws the chart at set intervals for live updates. ([source](http://www.flotcharts.org/plugins))

### DevOps & Infrastructure

- [Chart Plugin Extensions](https://awesome-repositories.com/f/devops-infrastructure/release-automation/plugin-extensibility/chart-plugin-extensions.md) — Provides a hook-based plugin system that allows third-party code to add new chart types and interactions.

### Graphics & Multimedia

- [Interactive Scientific Plot Constructors](https://awesome-repositories.com/f/graphics-multimedia/data-plotting-workflows/2d-plot-constructors/interactive-scientific-plot-constructors.md) — Creates interactive line, scatter, and image plots for scientific and engineering data. ([source](http://www.flotcharts.org/blog/feed.xml))
- [Multi-Chart Type Libraries](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/composite-visualizations/mixed-chart-types/multi-chart-type-libraries.md) — Renders candlestick, bubble, radar, Gantt, waterfall, and pyramid charts alongside standard types.

### Software Engineering & Architecture

- [Chart Series Abstractions](https://awesome-repositories.com/f/software-engineering-architecture/component-abstractions/chart-series-abstractions.md) — Represents each dataset as a series object with configurable rendering options for multiple chart types.
- [Axis Scaling Engines](https://awesome-repositories.com/f/software-engineering-architecture/time-axis-configurations/axis-scaling-engines.md) — Provides a configurable axis scaling engine supporting linear, logarithmic, and time-based scales.

### User Interface & Experience

- [Plot Pan and Zoom Controls](https://awesome-repositories.com/f/user-interface-experience/2d-panning-controllers/image-pan-and-zoom-controls/plot-pan-and-zoom-controls.md) — Lets users zoom into regions and pan across the chart to examine data closely. ([source](http://www.flotcharts.org/flot/examples))
- [Canvas Rendering Pipelines](https://awesome-repositories.com/f/user-interface-experience/canvas-rendering-engines/canvas-rendering-pipelines.md) — Renders charts by drawing directly to an HTML5 canvas using a layered painting pipeline.
- [Event-Driven Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-models/event-driven-interaction-handlers.md) — Handles user interactions like hover, click, and zoom through DOM event listeners that trigger redraws.
- [Chart Appearance Customizers](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/visual-styling-presentation/interface-appearance-customization/component-appearance-customizers/chart-appearance-customizers.md) — Adjusts chart dimensions, axis ranges, colors, and other visual properties through a settings object. ([source](https://cdn.jsdelivr.net/gh/flot/flot@main/README.md))
- [Dirty Region Redraw Optimizations](https://awesome-repositories.com/f/user-interface-experience/canvas-area-optimizations/dirty-region-redraw-optimizations.md) — Optimizes canvas performance by tracking dirty regions and repainting only changed areas.
- [Load and Horizontal Animations](https://awesome-repositories.com/f/user-interface-experience/chart-animations/load-and-horizontal-animations.md) — Animates chart rendering on load or horizontally and adds navigator mini-maps for data exploration.
- [Series Visibility Toggles](https://awesome-repositories.com/f/user-interface-experience/chart-components/chart-legends/series-visibility-toggles.md) — Provides click-based toggling of individual data series visibility via legend interaction. ([source](http://www.flotcharts.org/flot/examples))
- [Data Point Tooltips](https://awesome-repositories.com/f/user-interface-experience/data-point-tooltips.md) — Shows contextual popups with detailed values when hovering over plotted data points. ([source](http://www.flotcharts.org/plugins))
- [Data Point Labels](https://awesome-repositories.com/f/user-interface-experience/data-point-tooltips/data-point-labels.md) — Overlays text labels next to each plotted point to display its exact value. ([source](http://www.flotcharts.org/plugins))
- [Axis Tick Formatters](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/visualization-configuration-utilities/axis-tick-formatters.md) — Controls tick label spacing, width, and positioning for chart axes. ([source](http://www.flotcharts.org/blog/feed.xml))
- [Axis Labeling](https://awesome-repositories.com/f/user-interface-experience/element-groupings/alignment-spacing/axis-label-alignment/axis-labeling.md) — Adds descriptive text labels to the x-axis and y-axis of a chart. ([source](http://www.flotcharts.org/plugins))
- [Live Chart Updates](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/live-display-management/live-data-plots/live-data-widgets/live-chart-updates.md) — Ships real-time data fetching and automatic chart redraws for live monitoring.
- [Chart Resizers](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/element-resizers/chart-resizers.md) — Adjusts chart dimensions automatically when the container element changes size. ([source](http://www.flotcharts.org/blog/feed.xml))

### Business & Productivity Software

- [Gantt Charts](https://awesome-repositories.com/f/business-productivity-software/gantt-charts.md) — Displays tasks as horizontal bars along a timeline with optional dependency arrows. ([source](http://www.flotcharts.org/plugins))

### Development Tools & Productivity

- [Chart Visualization Plugins](https://awesome-repositories.com/f/development-tools-productivity/plugin-systems/chart-visualization-plugins.md) — Extends chart functionality through a plugin system for custom chart types and interactions.

### Part of an Awesome List

- [Data Visualization](https://awesome-repositories.com/f/awesome-lists/data/data-visualization.md) — Library for creating interactive charts.
- [Game Engines](https://awesome-repositories.com/f/awesome-lists/devtools/game-engines.md) — jQuery-based charting library.