Easy Charting & Graphing JavaScript Library – Compact Chart

Preview:

Description:

Compact Chart is a charting & graphing web component used to plot any data as bars, lines, curves, areas, pies, or donuts.

Easy to implement, based on Custom Element and HTML5 canvas.

Features:

• Fetches data from within the document or from an external JSON file.
• Interactive tooltip on hover.
• 6 preset palettes.
• Stacked line & bar charts.
• Custom chart title, legend, label, etc.
• Supports multiple languages.
• Auto number formatting.
• Easy to integrate into Vue.js app.

Available chart types:

• “bar-chart”: Column chart
• “horizontal-bar-chart”: Horizontal bar chart
• “line-chart”: Line chart
• “area-chart”: Area chart
• “pie-chart”: Pie chart
• “doughnut-chart”: Donut chart
• “gauge-chart”: Gauge chart

How to use it:

1. Download the package and import the Compact Chart JavaScript library’s files in the HTML.

<link rel="stylesheet" href="./dist/compact-chart.css" />
<script src="./dist/compact-chart.umd.min.js"></script>

2. Add the <compact-chart /> custom element to the app.

<compact-chart></compact-chart>

3. This example shows how to generate a simple bar chart whose data is fetched from JavaScript arrays.

document.querySelector("compact-chart").format = {
  type: "bar-chart",
  category_axis_column: 0,
  data: {
    "cols": [{
        "name": "expr$0",
        "nullable": false,
        "type": "int64"
      },
      {
        "name": "expr$1",
        "nullable": false,
        "type": "int64"
      }
    ],
    "data": [
      [
        3000,
        3
      ],
      [
        3600,
        34
      ],
      [
        4200,
        105
      ],
      [
        4800,
        212
      ],
      [
        5400,
        302
      ],
      [
        6000,
        275
      ],
      [
        6600,
        221
      ],
      [
        7200,
        129
      ],
      [
        7800,
        74
      ],
      [
        8400,
        53
      ],
      [
        9000,
        29
      ],
      [
        9600,
        6
      ],
      [
        10200,
        5
      ],
      [
        10800,
        3
      ],
      [
        11400,
        5
      ],
      [
        12600,
        1
      ],
      [
        23400,
        1
      ]
    ]
  }
}

4. Or fetch data from a JSON file.

document.querySelector("compact-chart").format = {
  type: "bar-chart",
  category_axis_column: 0,
  data: fetch('data.json').then(rv => rv.json())
}

5. All configurations with default values.

document.querySelector("compact-chart").format = {

  // string that is a Unicode BCP 47 locale identifier (https://www.unicode.org/reports/tr35/tr35.html#BCP_47_Conformance)
  locale: 'en',

  // custom number symbols
  number_symbols: [{
      v: 1e-9,
      s: 'n'
    },
    {
      v: 1e-6,
      s: 'μ'
    },
    {
      v: 1e-3,
      s: 'm'
    },
    {
      v: 0
    },
    {
      v: 1e3,
      s: 'k'
    },
    {
      v: 1e6,
      s: 'M'
    },
    {
      v: 1e9,
      s: 'G'
    },
    {
      v: 1e12,
      s: 'T'
    },
    {
      v: 1e15,
      s: 'P'
    },
    {
      v: 1e18,
      s: 'E'
    },
    {
      v: 1e21,
      s: 'Z'
    },
    {
      v: 1e24,
      s: 'Y'
    }
  ],

  // small, medium, large
  size: 'medium',

  // 'grayscale', 'high-contrasting-1', 'high-contrasting-2'
  // 'mid-contrasting', 'pastele-1', 'pastele-2'
  // or an array of colors: ["orange", "red", "pink", "green"]
  color_palette: 'default',

  // chart title
  title: {
    label: '',
    // or left (as left vertical), bottom (as bottom center), right (as right vertical)
    placement: 'top'
  },

  // chart legent
  legend: {
    show: true,
    // 'position-align'
    // position: top, left, bottom, right
    // align: center, start, end
    placement: 'top-end'
  },

  // custom labels
  labels: {
    show: false, // true, false*
    label: 'value', // value*, label, percentage (only if percentage_values: true and for), value-percentage
    placement: null, // anchor-align: center*, start, end & center, start, end, right, bottom, left, top
    // WISHLIST: font color: auto, custom
    // WISHLIST: allow labels to overlap: y/n
  },

  // if is stacked
  stacked: false,

  // bar, auto for pie
  percentage_values: false,

  // custom axis
  axis: {
    // 'linear', 'category', 'logarithmic'
    type: null,
    label: '',
    // auto, degrees 0 - 90, Only applicable to horizontal scales.
    tick_orientation: null,
    // auto, auto-0, []
    range: null
  },

  // doughnut, gauge
  // ranges between 0-1
  hole_size: 0.5,

  // gauge chart
  // arc angle, value in decimal degrees
  angle: 180

}