Make sure you have Node.js installed
$ npm i licha
How to use this tool?
import { Licha, Utils, } from "licha";
const utils = new Utils();
new Licha({
theme: utils.getTheme(0, "light"),
padding: 10,
selectorCanvas: "canvas",
background: [utils.getColor("bistre"), utils.getColor("charcoal")],
grid: { line: { width: 1, }, },
axisX: { font: { showText: false, }, },
axisY: { font: { showText: false, }, },
data: {
"Group 1": {
data: [
{ name: "Monday", value: 100_000, },
{ name: "Tuesday", value: 50_000, },
{ name: "Wednesday", value: 10_000, },
{ name: "Thuesday", value: 35_000, },
{ name: "Friday", value: 5000, },
{ name: "Saturday", value: 50_000, },
{ name: "Sunday", value: 32_000, }
],
},
},
}).init();
Parameters passed to the Licha class constructor
- selectorCanvas
- fontFamily
- background
- padding
- type
- title
- axisY
- axisX
- line
- cap
- grid
- legend
- blockInfo
- data
- theme
| Description | Example | Type |
|---|---|---|
| Accepts a canvas element selector | selectorCanvas: ".my-chart" |
string |
| Description | Example | Type |
|---|---|---|
| Sets the font family ("Arial" default). Make sure you have this font installed on your computer and connected to the site | fontFamily: "Montserrat" |
string |
| Description | Example | Type |
|---|---|---|
| Accepts the chart background | background: "#ffffff" |
array<string> | string |
| Description | Example | Type |
|---|---|---|
| Accepts an object of padding values for a chart | padding: { top: 10, right: 10, bottom: 10, ... } or just 10 |
object | number |
-
Description Example Type Top padding size padding: { top: 25, }number -
Description Example Type Right padding size padding: { right: 25, }number -
Description Example Type Bottom padding size padding: { bottom: 25, }number -
Description Example Type Left padding size padding: { left: 25, }number
| Description | Example | Type |
|---|---|---|
| Accepts a chart type | type: "line" |
string |
| Description | Example | Type |
|---|---|---|
| Accepts options related to the title of the chart | title: { font: { ... }, gaps: { ... }, } |
object |
-
Description Example Type Title position ("left", "center", "right") title: { place: "right", }string -
Description Example Type Accepts a data object related to font and text title: { font: { size: 16, color: "white", ... }, }object-
Description Example Type Accepts title text title: { font: { text: "My Chart!", }, }string -
Description Example Type Accepts a font size title: { font: { size: 18, }, }number -
Description Example Type Accepts a font color title: { font: { color: "black", }, }string -
Description Example Type Accepts font weight title: { font: { weight: 400, }, }number
-
-
Description Example Type Contains title gaps title: { gaps: { bottom: 15, }, }object-
Description Example Type Bottom gap title: { gaps: { bottom: 15, }, }number
-
| Description | Example | Type |
|---|---|---|
| Accepts data related to the chart's ordinate | axisY: { font: { ... }, step: 3, ... } |
object |
-
Description Example Type Position of the y-axis ("left", "right") axisY: { place: "right", }string -
Description Example Type Accepts a data object related to font and text at points axisY: { font: { size: 16, color: "white", ... }, }object-
Description Example Type Accepts a font size axisY: { font: { size: 18, }, }number -
Description Example Type Accepts a font color axisY: { font: { color: "black", }, }string -
Description Example Type Accepts font weight axisY: { font: { weight: 400, }, }number -
Description Example Type The rule under which you can control the state of the text on the axis axisY: { font: { showText: false, }, }boolean
-
-
Description Example Type Step with which values will be drawn on the y-axis (Default 3) axisY: { step: 4, }number -
Description Example Type A method that allows you to change the appearance of a value on the y-axis axisY: { editValue: (val) => val + "$", }function: string -
Description Example Type Takes a value that is related to how the points will be displayed on the y-axis axisY: { sort: "less-more" }oraxisY: { sort: "more-less" }string -
Description Example Type Receives data related to the title axisY: { title: { font: { ... }, ... } }object-
Description Example Type Accepts a data object related to font and text at title axisY: { title: { font: { size: 16, color: "white", ... }, }, }object-
Description Example Type Accepts title text axisY: { title: { font: { text: "My Chart!", }, }, }string -
Description Example Type Accepts a font size axisY: { title: { font: { size: 18, }, }, }number -
Description Example Type Accepts a font color axisY: { title: { font: { color: "black", }, }, }string -
Description Example Type Accepts font weight axisY: { title: { font: { weight: 400, }, }, }number
-
-
Description Example Type Contains title gaps axisY: { title: { gaps: { right: 15, }, }, }object
-
Description Example Type Gap right axisY: { title: { gaps: { right: 15, }, }, }number
-
| Description | Example | Type |
|---|---|---|
| Accepts data associated with the chart's abscissa | axisX: { font: { ... }, ... } |
object |
-
Description Example Type Flips the x-axis point names by 90 degrees axisX: { rotate: true, }boolean -
Description Example Type Allows you to change the position of the x-axis (top or bottom) axisX: { place: "top", }string -
Description Example Type Accepts a data object related to font and text at points axisX: { font: { size: 16, color: "white", ... }, }object-
Description Example Type The rule under which you can control the state of the text on the axis axisX: { font: { showText: false, }, }boolean -
Description Example Type Accepts a font size axisX: { font: { size: 18, }, }number -
Description Example Type Accepts a font color axisX: { font: { color: "black", }, }string -
Description Example Type Accepts font weight axisX: { font: { weight: 400, }, }number
-
-
Description Example Type Contains the names of the x-axis points that will not be drawn on the chart axisX: { ignoreNames: (name, index) => index % 2 === 0, }oraxisX: { ignoreNames: ["Monday", "Sunday"], }function: boolean | array<string|number> -
Description Example Type A method that allows you to change the appearance of a value along the x-axis axisX: { editName: (name) => new Date(name).toLocaleString(), }function: string | number -
Description Example Type Takes a value that is related to how the points will be displayed on the x-axis axisX: { sort: "less-more" }oraxisX: { sort: "more-less" }string -
Description Example Type Receives data related to the title axisX: { title: { font: { ... }, ... } }object-
Description Example Type Accepts a data object related to font and text at title axisX: { title: { font: { size: 16, color: "white", ... }, }, }object-
Description Example Type Accepts title text axisX: { title: { font: { text: "My Chart!", }, }, }string -
Description Example Type Accepts a font size axisX: { title: { font: { size: 18, }, }, }number -
Description Example Type Accepts a font color axisX: { title: { font: { color: "black", }, }, }string -
Description Example Type Accepts font weight axisX: { title: { font: { weight: 400, }, }, }number
-
-
Description Example Type Contains title gaps axisX: { title: { gaps: { top: 15, }, }, }object-
Description Example Type Gap top axisX: { title: { gaps: { top: 15, }, }, }number
-
-
| Description | Example | Type |
|---|---|---|
| Accepts data that applies to each line of all groups | line: { stepped: true, width: 2, ... } |
object |
-
Description Example Type Fill line line: { fill: ["rgba(255,255,255,0.4)", "transparent"], }orline: { fill: "white", }array<string> | string -
Description Example Type Rule that will draw the line step by step (default false) line: { stepped: true, }boolean -
Description Example Type Line color line: { color: "red", }array<string> | string -
Description Example Type Rule that says the line will be made up of dots line: { dotted: true, }boolean -
Description Example Type Line width (default 1) line: { width: 2, }number
| Description | Example | Type |
|---|---|---|
| Accepts data that applies to each cap of all groups | cap: { format: "circle", size: 6, ... } |
object |
-
Description Example Type Cap format ("square", "circle", "rhomb", "triangle") cap: { format: "square", }string -
Description Example Type Cap color cap: { color: "red", }array<string> | string -
Description Example Type Cap size cap: { size: 8, }number -
Description Example Type Accepts data related to cap stroke cap: { stroke: { width: 1, ... }, }object-
Description Example Type Stroke width cap: { stroke: { width: 2, }, }number -
Description Example Type Stroke color cap: { stroke: { color: "black", } }string
-
| Description | Example | Type |
|---|---|---|
| Accepts data related to the chart grid | grid: { line: { ... }, ... } |
object |
-
Description Example Type Accepts background grid grid: { background: "#c2c2c2", }array<string> | string -
Description Example Type Grid format ("horizontal" or "vertical" (default "default")) grid: { format: "vertical", }string -
Description Example Type Grid line data grid: { line: { ... }, }object-
Description Example Type Rule that says grid lines will extend to axis points grid: { line: { stretch: true, }, }boolean -
Description Example Type Gird line width grid: { line: { width: 2, }, }number -
Description Example Type Gird line color grid: { line: { color: "grey", } }array<string> | string -
Description Example Type Rule that says the line will be made up of dots grid: { line: { dotted: true, } }boolean
-
| Description | Example | Type |
|---|---|---|
| Accepts data related to the chart legend | legend: { font: { ... }, circle: { ... }, ... } |
object |
-
Description Example Type Legend position ("left", "center", "right") legend: { place: "left", }string -
Description Example Type Accepts event handlers legend: { events: { ... }, }object-
Description Example Type Called when the legend element is clicked legend: { events: { onClick() { console.log("Click!") }, }, }function(item: object, hiddenItems: Array<object>, items: Array<object>, notHiddenItems: Array<object>)
-
-
Description Example Type Accepts a data object associated with the circle of the legend element. legend: { circle: { ... }, }object-
Description Example Type Circle radius legend: { circle: { radius: 18, }, }number
-
-
Description Example Type Accepts a data object related to font and text at legend items legend: { font: { ... }, }object-
Description Example Type Accepts a font size legend: { font: { size: 18, }, }number -
Description Example Type Accepts a font color legend: { font: { color: "black", }, }string -
Description Example Type Accepts font weight legend: { font: { weight: 400, }, }number
-
-
Description Example Type Accepts data related to the padding of both the legend elements and the legend itself. legend: { gaps: { ... }, }object-
Description Example Type Accepts data related to circle offsets for legend items legend: { gaps: { circle: { ... }, }, }object-
Description Example Type Indent to the right of the circle legend: { gaps: { circle: { right: 5, }, }, }number
-
-
Description Example Type Accepts data related to the indentation of group names legend: { gaps: { group: { ... }, }, }object-
Description Example Type Indent to the right of the group legend: { gaps: { group: { right: 5, }, }, }number -
Description Example Type Indent to the bottom of the group legend: { gaps: { group: { bottom: 5, }, }, }number
-
-
Description Example Type Accepts data related to the indentation of legend legend: { gaps: { legend: { ... }, }, }object-
Description Example Type Indent to the bottom of the legend legend: { gaps: { legend: { bottom: 5, }, }, }number
-
-
| Description | Example | Type |
|---|---|---|
| Receives data related to the window with information about the active group | blockInfo: { ... } |
object |
-
Description Example Type The rule according to which the position of the block along the y-axis will have the smallest y-ordinate among the points blockInfo: { showOnPoints: true, }boolean -
Description Example Type Window background blockInfo: { background: "black", }array<string> | string -
Description Example Type Accepts event handlers blockInfo: { events: { ... }, }object-
Description Example Type Called when a block with information about the active element is hovered over a point blockInfo: { events: { onFocus() { console.log("Focus!") }, }, }function(pos: object, elements: Array<object>) -
Description Example Type Called when the block disappears blockInfo: { events: { onHide() { console.log("Hide!") }, }, }function
-
-
Description Example Type Accepts data related to group names blockInfo: { groups: { ... }, }object-
Description Example Type Accepts data related to the font of group names blockInfo: { groups: { font: { ... }, }, }object-
Description Example Type Accepts a font size blockInfo: { groups: { font: { size: 5, }, }, }number -
Description Example Type Accepts a font color blockInfo: { groups: { font: { color: "white", }, }, }string -
Description Example Type Accepts font weight blockInfo: { groups: { font: { weight: 400, }, }, }number
-
-
Description Example Type Accepts data related to indentation of group names blockInfo: { padding: { right: 25, } }object | number-
Description Example Type Gap bottom blockInfo: { groups: { gaps: { bottom: 15, }, }, }number -
Description Example Type Gap right blockInfo: { groups: { gaps: { right: 15, }, }, }number
-
-
-
Description Example Type Accepts parameters related to the title of the window blockInfo: { title: { ... }, }object-
Description Example Type Accepts data related to the font of the title blockInfo: { title: { font: { ... }, } }object-
Description Example Type Accepts a font size blockInfo: { title: { font: { size: 5, }, }, }number -
Description Example Type Accepts a font color blockInfo: { title: { font: { color: "white", }, }, }string -
Description Example Type Accepts font weight blockInfo: { title: { font: { weight: 400, }, }, }number
-
-
Description Example Type Accepts data related to title padding blockInfo: { padding: { right: 25, } }object | number-
Description Example Type Indent bottom blockInfo: { title: { gaps: { bottom: 15, }, }, }number
-
-
-
Description Example Type Receives data related to window padding blockInfo: { padding: { ... } or just 10, }object | number-
Description Example Type Top padding size blockInfo: { padding: { top: 25, }, }number -
Description Example Type Right padding size blockInfo: { padding: { right: 25, } }number -
Description Example Type Bottom padding size blockInfo: { padding: { bottom: 25, } }number -
Description Example Type Left padding size blockInfo: { padding: { left: 25, } }number
-
| Description | Example | Type |
|---|---|---|
| Accepts group data to be displayed on the chart | data: { "My group": { ... }, } |
object |
-
Description Example Type A key whose name will mean a separate data group to which you can apply different styles data: { "My group": { line: { ... }, }, }object-
Description Example Type Group data to be displayed on the chart data: { "My group": { data: [ ... ], }, }array<object>-
Description Example Type Contains the name and value of the group data data: { "My group": { data: [{ ... }], }, }objectDescription Example Type Data name data: { "My group": { data: [{ name: "Tuesday", ... }], }, }string | numberDescription Example Type Data value data: { "My group": { data: [{ name: "Tuesday", value: 10, }], }, }number
-
-
Description Example Type Gets the data owned by this group's cap data: { "My group": { cap: { ... }, }, }object-
Description Example Type Cap format ("square", "circle", "rhomb", "triangle") data: { "My group": { cap: { format: "sqaure" }, }, }string -
Description Example Type Cap color data: { "My group": { cap: { color: "red" }, }, }array<string> | string -
Description Example Type Cap size data: { "My group": { cap: { size: 6 }, }, }number -
Description Example Type Accepts data related to cap stroke data: { "My group": { cap: { stroke: { ... }, }, }, }object-
Description Example Type Stroke width data: { "My group": { cap: { stroke: { width: 2 }, }, }, }number -
Description Example Type Stroke color data: { "My group": { cap: { stroke: { color: "red", }, }, }, }string
-
-
Description Example Type Receives data that belongs to the line of this group data: { "My group": { line: { ... }, }, }object-
Description Example Type Fill line data: { "My group": { line: { fill: ["rgba(255,255,255,0.4)", "transparent"], } }, }ordata: { "My group": { line: { fill: "white", } }, }array<string> | string -
Description Example Type Rule that will draw the line step by step (default false) data: { "My group": { line: { stepped: true, }, }, }boolean -
Description Example Type Line color data: { "My group": { line: { color: "white", }, }, }array<string> | string -
Description Example Type Rule that says the line will be made up of dots data: { "My group": { line: { dotted: true, }, }, }boolean -
Description Example Type Line width (default 1) data: { "My group": { line: { width: 2, }, }, }number
-
-
-
| Description | Example | Type |
|---|---|---|
| Accepts a data object belonging to the same theme. More | theme: new Utils(0, "light") |
object |
The Utils class contains helper resources such as themes and various colors
How to choose and apply a theme? View all themes
const utils = new Utils();
// Accepts index and theme
// The default index is 0 and the theme is dark
new Licha({ theme: utils.getTheme(2, "light") }).init();How to apply any color? View all colors
const utils = new Utils();
// Accepts the name of the color and its transparency (default 1)
new Licha({ background: utils.getColor("jet", 0.6) }).init();To develop this tool, I was inspired by Chart.js library