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
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