Author: | mireo |
---|---|
Views Total: | 94 views |
Official Page: | Go to website |
Last Update: | July 28, 2021 |
License: | MIT |
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 }
Changelog:
v1.0.4 (07/28/2021)
- updated dependencies
07/21/2021
- add tick step size support for linear axes only
03/05/2021
- Update