e4

Donut chart library

Installation

npm install e4

Add node_modules/e4/main.css to you're HTML, or import node_modules/e4/main.scss

Usage

let donut = [
    {
		text: 'Example 1',
		size: 10,
		backgroundColor: 'red',
    },
    ...
];

new SingleDonut(donut)
	.draw('#svg1');


let multipartDonut = [
    [
		{
			text: 'Example 1',
			size: 10,
			backgroundColor: 'red',
		},
        ...
    ],
    ...
]

new MultipartDonut(multipartDonut)
	.draw('#svg2');


let sunburstDonut = [
    [
		{
			text: 'Example 1',
			size: 10,
			backgroundColor: 'red',
		},
        ...
    ],
    ...
]

new MultipartDonut(multipartDonut)
	.draw('#svg3');

DonutItem structure

DonutItem = {
    textId?: string,
    arcId?: string,
    text?: string,
    textColor?: string,
    textClass?: string
    backgroundColor?: string,
    strokeColor?: string,
    strokeWidth?: string,
    arcClass?: string,
    size?: number,
    textLabelsAngle?: number,
    textLabelsRelative?: RelativeType,
    textLabelsSymmetric?: boolean,
    textLabelsMargin?: number,
    children?: DonutItem[] //Only for sunburst donut
}

Constructor params

SingleDonut - array of DonutItem
MultipartDonut - array of arrays of DonutItem
SunburstDonut - array of DonutItem width children field

Methods

setDonatRatio(ratio: number) - set ration between layer width and empty space radius. ratio should be between 0 and 1 setWidth(width: number) - set base svg element width
setHeight(height: number) - set base svg element height
setTextLabelsMargin(margin: number - set default text margins setTextLabelsAngle(angle: number) - set default angle of text
setTextLabelsPosition(type: RelativeType) - set type of position rotation. Possible types - ABSOLUTE, RELATIVE_TO_BISECTOR, RELATIVE_TO_BISECTOR_WITH_GRAVITY
setTextLabelsSymmetric(symmetric: boolean) - set if text symmetric ot center of the donut
setTooltipClasses(classes: string | string[]) - set classes that will be added to tooltip setTooltipPosition(position: string) - set tooltip position. Possible variants - LEFT, TOP, RIGHT, BOTTOM, LEFT_TOP, LEFT_BOTTOM, RIGHT_TOP, RIGHT_BOTTOM
setTooltipOffset(offset: number) - set tooltip offset from pointer
setTooltipOverflow(overflow: boolean) - set if tooltip can go out of screen. Default false
setTextFunction(fn: DonutTextFunction) - set function that will be called to get arc text. Receive DonutItem and total elements size as param. Must return text string
setTextInnerHTMLFunction(fn: DonutTextFunction) - set function that will be called to get arc text. Receive DonutItem and total elements size as param. Must return inner html string
setTextWidthSizeFunction(fn: DonutTextWithSizeFunction) - set function that will be called to get arc text, after text placeholder drew. Receive DonutItem, total elements size, text field width and height as param. Must return text string
setTextWidthSizeInnerHTMLFunction(fn: DonutTextWithSizeFunction) - set function that will be called to get arc text, after text placeholder drew. Receive DonutItem, total elements size, text field width and height as param. Must return inner html string
setTextWidthSizeElementFunction(fn: DonutTextWithSizeFunction) - set function that will be called to get arc text, after text placeholder drew. Receive DonutItem, total elements size, text field width and height as param. Must return HTML Element that will be appended to text container
setTooltipTextFunction(fn: DonutTextFunction) - set function that will be called to tooltip text. Receive DonutItem and total elements size as param. Must return text string
setTooltipInnerHTMLFunction(fn: DonutTextFunction) - set function that will be called to get tooltip text. Receive DonutItem and total elements size as param. Must return inner html string
setTooltipElementFunction(fn: DonutTextFunction) - set function that will be called to get tooltip text. Receive DonutItem and total elements size as param. Must return HTML Element that will be appended to text container
addEventListener(event: string, listener: DonutEventListener) - add event listener to donut
getItemById(id: string) - get DonutItem by donut item id
getIdForItem(item: DonutItem) - get item id for DonutItem
getIdForTextId(id: string) - get item id by text id
getIdForArcId(id: string) - get item id by arc id
draw(taget: string|HTMLElement) - draw svg inside given container