Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library

Pixl chart library displays time series charts in the browser, using the HTML5 Canvas element. It is designed to be lightweight and efficient, while still providing a decent list of features and customizations.

The pixl chart doesn’t come anywhere near as good as the features offered by libraries like Chart.js or ApexCharts. These are heavyweight hitters, but they offer just about every possible chart type, feature, and customization option imaginable. On the other hand, a pixel chart is built with only one purpose: a super-performing time series chart, and nothing else.


  • Lightweight (24 KB minified, 8 KB compressed).
  • High performance (tested up to 100,000 samples across 100 layers).
  • Full support for the retina (HiDPI).
  • Supports custom time zones and languages.
  • Customize styles, colors, and fonts.
  • Filled area or line charts (or both).
  • Soft or sharp interpolation line.
  • Automatic layer colors (customizable of course).
  • Support light and dark modes.
  • The legend shows all layer titles and colors.
  • Download the chart in WebP/PNG/JPEG format or a snapshot to the image blob for upload.
  • Optional overrides (such as width, height, and title) for images.
  • The generated images work on light or dark backgrounds.
  • A scroll tooltip shows all layers below the mouse pointer.
  • Time-based data label overlays (flags).
  • Optionally highlight “time gaps” in the data.
  • Automatically name the X-axis based on the date range (minute, hourly, daily, monthly, yearly).
  • Automatically name the y-axis based on the data type (integer, decimal, or byte).
  • Automatic resizing for fluid/responsive designs.
  • Auto “top space” for more fun layouts (optional).
  • It handles a large number of charts on the same page.
  • It does not display off-screen charts until it is passed to view.
  • You can display charts incrementally, optionally, so the browser doesn’t get stuck.

Must Read: Simple Fireworks Animation With a JavaScript And Canvas Library

Time-Series Chart Viewer Js Library

Post NameJavascript Time Series Chart Library
Author Namejhuckaby
CategoryChart & Graphs Plugins, HTML & HTML5
Official PageClick Here
Publish DateNovember 28, 2021
Last UpdateJuly 15, 2023
DownloadLink Below

How to make use of it:

1. Download and import the pixl-chart library.

<script src="./chart.min.js"></script>

2. Create a blank canvas on which the time-series graph is plotted.

<canvas class="chart" id="example"></canvas>

3. Define your layers containing titles and time series data as follows:

const myLayers = [
        "title": "Title 1",
        "data": [
            "x": 1634272560,
            "y": 1720508
            "x": 1634272620,
            "y": 1691917
          // ...
        // additional options
        // see global options for more details
        "color": [], // an array of colors
        "opacity": 1, 
        "hidden": true,
        "smoothing": true,
        "fill": 0.5,
        "fillStyle": 'gradient', // specifies the color, gradient, or pattern to use
        "stroke": true,
        "lineWidth": 2,
        "lineJoin": 'round', // "bevel" || "round" || "miter"
        "lineCap": 'butt', // "butt" || "round" || "square"
        "lineDashes": false,
        "title": "Title 2",
        "data": [
            "x": 1634272560,
            "y": 3002730
            "x": 1634272620,
            "y": 1823347
          // ...
      // ... more layers here

4. Configure the pixel histogram.

var chart = new Chart({
    "canvas": '#example',
    "layers": myLayers,
    // more options here

5. Display the graph on the canvas.


6. All possible chart options.

var chart: new Chart({

    // CSS selector of the canvas
    canvas: null,

    // add your own layers here
    layers: [],

    // an array of colors assigned to layers
    colors: ["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0", "#3F51B5", "#4CAF50", "#546E7A", "#D4526E", "#A5978B", "#C7F464", "#81D4FA", "#2B908F", "#F9A3A4", "#90EE7E", "#FA4443", "#449DD1", "#F86624", "#69D2E7", "#EA3546", "#662E9B", "#C5D86D", "#D7263D", "#1B998B", "#2E294E", "#F46036", "#E2C044", "#662E9B", "#F86624", "#F9C80E", "#EA3546", "#43BCCD", "#5C4742", "#A5978B", "#8D5B4C", "#5A2A27", "#C4BBAF", "#A300D6", "#7D02EB", "#5653FE", "#2983FF", "#00B1F2", "#03A9F4", "#33B2DF", "#4ECDC4", "#13D8AA", "#FD6A6A", "#F9CE1D", "#FF9800"],

    // background color
    background: '',

    // font family
    fontFamily: 'Helvetica, sans-serif',

    // font size
    fontSize: 12,

    // font color
    fontColor: 'rgb(128, 128, 128)',

    // title size
    titleSize: 16,

    // title style
    titleStyle: 'bold',

    // title padding
    titlePadding: 15,

    // chart title
    title: '',

    // subtitle
    subtitle: '',

    /// whether to show subtitle
    showSubtitle: true,

    // line width in px
    lineWidth: 2,

    // determine the shape used to join two line segments where they meet.
    // "bevel" || "round" || "miter"
    lineJoin: 'round',

    // determine the shape used to draw the end points of lines.
    // "butt" || "round" || "square"
    lineCap: 'butt',

    // render dashed lines e.g. [4, 2]
    lineDashes: false,

    // whether to render lines
    stroke: true,

    // fill opacity
    fill: 0.5,

    // clip the data drawing to the viewable area
    clip: false,

    // the number of horizontal "ticks"
    horizTicks: 6,

    // the number of vertical "ticks"
    vertTicks: 6,

    // space between vertical/horizontal labels
    vertLabelPadding: 10,
    horizLabelPadding: 25,

    // border color
    borderColor: 'rgba(128, 128, 128, 0.25)',

    // pixel Density
    density: window.devicePixelRatio,

    // auto resizing
    autoResize: true,

    // auto manage the chart by the global chart manager
    autoManage: true,

    // the type of data
    // "integer" || "float" || "bytes"
    dataType: 'integer',

    // display a suffix after all data values
    dataSuffix: '',

    // maximum number of digits
    floatPrecision: 2,

    // display chart legend
    legend: true,

    // maximum number of lines
    legendMaxLines: 2,

    // legend padding
    legendPadding: 5,

    // If you set zeroFloor to false, then your data will dictate the lowest Y value, and the chart will adjust itself
    zeroFloor: true,

    // smooth data lines
    smoothing: true,

    // disable 'smoothing' after your dataset has more than this number of samples
    smoothingMaxSamples: 200,

    // enable tooltip on hover
    hover: true,

    // 0  Do not sort (the layers will be in their natural order).
    // 1 Sort the layers by the data values in ascending order.
    // -1  Sort the layers by the data values in descending order.
    hoverSort: 0,

    // cursor type
    cursor: 'crosshair',

    // show data gaps
    showDataGaps: false,
    dataGapImage: "data:image/png,base64",

    // auto add "headroom" above the highest Y value
    autoHeadroom: true,

    // add extra padding on any side of the chart
    padding: { left:0, top:0, right:10, bottom:0 },

    // allow to zoom the chart
    // an object with xMin, xMax, yMin and yMax properties
    zoom: null,

    // width/height of the chart
    width: 0,
    height: 0,

    // render the chart "progressively".
    progressive: false,


7. API methods and properties.

// add a layer
chart.addLayer( OBJECT );

// add layers
chart.addLayers( ARRAY );

// update the chart

// take a snapshot of the chart, and produces a image in WebP, PNG or JPEG format
  type: 'blob' // or 'url'.
  format: 'png', or 'webp', 'png' or 'jpeg'.
  quality: 1.0,

// download the image{
  type: 'blob' // or 'url'.
  format: 'png', or 'webp', 'png' or 'jpeg'.
  quality: 1.0,
  // and chart options

// destroy the instance

// xMin  The lowest X value (timestamp) across your entire dataset.
// xMax  The highest X value (timestamp) across your entire dataset.
// yMin  The lowest Y value across your entire dataset (or simply 0 if zeroFloor is enabled).
// yMax  The highest Y value across your entire dataset (possibly adjusted by autoHeadroom).
// width The width of your dataset (xMax - xMin).
// height  The height of your dataset (yMax - yMin).

// x The horizontal coordinate of the left side of the bounds rect, in pixels.
// y The vertical coordinate of the top side of the bounds rect, in pixels.
// width The width of the bounds rect, in pixels.
// height  The height of the bounds rect, in pixels.

8. Events.

chart.on('render', function() {
  // do something

chart.on('mouseover', function() {
  // do something

chart.on('mousemove', function() {
  // do something

chart.on('mouseout', function() {
  // do something

chart.on('mousedown', function() {
  // do something

chart.on('mouseup', function() {
  // do something

chart.on('click', function() {
  // do something


  • Single Layer
  • Multi-Layer
  • Many Layers
  • Large Dataset
  • Irregular Dataset
  • Daily Range
  • Monthly Range
  • Yearly Range
  • Dynamic Layers
  • Line Styles
  • Linear Interpolation
  • Data Gaps
  • Data Labels
  • Custom Download
  • Custom Fill Gradient
  • Custom Fill Styles
  • Custom Fonts
  • Ugly Colors
  • Insanity

Layer Properties

Here is the full list of available properties you can specify in each layer:

Must Read: [TOAST UI] Markdown WYSIWYG Editor and GFM Standard | tui.editor

titleString(Required) The title (display label) for the layer.
dataArray(Required) An array of data points for the layer.
colorStringOptionally specify a color for the layer. By default one is plucked from the global colors list.
opacityNumberSpecify the layer opacity (alpha transparency), which defaults to 1.0.
hiddenBooleanSet this to true to completely hide the layer from the graph (including the legend and tooltip).
smoothingBooleanIf global smoothing is disabled, you can re-enable it here, on a layer-by-layer basis.
fillMixedOptionally override the global fill on a layer-by-layer basis.
fillStyleMixedOptionally set a custom fill style with your own color or gradient.
strokeBooleanOptionally override the global stroke on a layer-by-layer basis.
lineWidthNumberOptionally override the global lineWidth on a layer-by-layer basis.
lineJoinStringOptionally override the global lineJoin on a layer-by-layer basis.
lineCapStringOptionally override the global lineCap on a layer-by-layer basis.
lineDashesArrayOptionally override the global lineDashes on a layer-by-layer basis.

See Demo And Download


Official Website(jhuckaby): Click Here

This superior jQuery/javascript plugin is developed by jhuckaby. For extra Advanced usage, please go to the official website.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *