Press "Enter" to skip to content

An Easy-To-Use Cross-Framework JS Charting Library | Compact Chart

compact-chart  is an easy-to-use graphing library designed for quick and easy visualization of your analyzes. Developed as a custom HTML element, it is completely encapsulated and works across all modern browsers, regardless of the JavaScript framework chosen.

javascript graphing library, comparison of javascript charting libraries, open source chart library, chartjs tutorial, javascript line chart

Supported Chart Types

compact-chart supports the following chart types:

  • line and area
  • horizontal and vertical bar
  • doughnut and pie

Possible values for type option are:

  • “bar-chart” – vertical bar chart
  • “horizontal-bar-chart” – horizontal bar chart
  • “line-chart” – line chart, plotting data points on a line
  • “area-chart” – filled line chart
  • “pie-chart” – pie chart
  • “doughnut-chart” – doughnut chart
  • “gauge-chart” – gauge chart

Note that a type is a mandatory option – there is no default value set.

💐A Beautiful Chart Using Draggable Grid For Vue.js | Vuetiful-Board

How to make use of it:

1. Download the package deal and import the Compact Chart JavaScript library’s information within the HTML.

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

2. Add the <compact-chart /> customized component to the app.

<compact-chart></compact-chart>

3. This instance exhibits the best way to generate an easy bar chart whose information 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 information 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

}

Charting & Graphing JavaScript Library, Compact Chart Plugin/Github, graphs in javascript, highcharts, best javascript charting library

Compact-Chart-Demo


See Demo And Download

Official Website(mireo): Click Here

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

Be First to Comment

    Leave a Reply

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