native-canvas-chart v1.0.9

HTML5 canvas based chart

INSTALL

npm install native-canvas-chart

Usage

import Chart from 'native-canvas-chart'

let el = document.getElementById('#chart')
let options = {
    monthes: ['Jan', 'Feb', 'Mar', ...],
    weekDays: ['Sun', 'Mon', 'Tue', ...],
    width: 500,
    height: 500,
    padding: 10,    // left and right paddings
    yAxis: {
        linesCount: 5
    },
    callbacks: {
        graphsCreated: (chart, list) => {
            // chart = instance of self object
            //
            // list - array with info about curves
            // example of one item from list:
            // {
            //    name: 'y0',
            //    data: [0,23,432...],
            //    color: '#ffffff'
            // }
        },
        graphsChanged: (chart, list) => {
            // example of one item from list:
            // {
            //    name: 'y0',
            //    enabled: true,
            // }
        }
    }
}

// append canvas to el
let chart = new Chart(el, [options])

Methods

chart.setSize(width, height)
chart.setYLinesCount(count)
chart.setPadding(val)   // left and right padding
chart.createFromData(chartsData[index])
chart.toggleGraph(name) // show/hide curve with name
chart.destroy()

Color themes

/**
 * Chart color themes
 * @type Object
 */
const themes = {
    'day': {
        backgroundColor: '#ffffff',
        popup: {
            backgroundColor: '#ffffff',
            backgroundOpacity: 0.7,
            dateColor: '#000000',
            dateFont: {size : 12, family: 'Arial'},
            axisNameFont: {size : 12, family: 'Arial'},
            axisValueFont: {size : 16, family: 'Arial'},
            currentValueLineColor: '#dbe3e9'
        },
        yAxis: {
            textColor: '#818f99',
            lineColor: '#eaeef2'
        },
        xAxis: {
            textColor: '#88969f'
        },
        viewController: {
            navbar: {
                backgroundColor: '#ddeaf3',
                viewportColor: '#ffffff',
                glassColor: '#dce8ee',
                glassOpacity: 0.5
            }
        }
    },
    'night': { ...
    ...
}
// 'day' - selected theme
chart.setColorThemes(themes, 'day')

// theme - theme name, in current example "day" or "night"
chart.selectTheme(theme)