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.

Features

• 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

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.

chart.render();

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
chart.update();

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

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

// destroy the instance
chart.destroy();

// 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).
chart.dataLimits;

// 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.
chart.bounds

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
});

Demos

• 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

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.