Wondering what’s next for npm?Check out our public roadmap! »

    cosord-charts

    1.5.6 • Public • Published

    Cosmos Charts

    GitHub-inspired modern, intuitive and responsive charts with zero dependencies

    Explore Demos » Edit at CodePen »

    Contents

    Installation

    • Install via npm:

      $ npm install cosord-charts

      and include in your project:

      import { Chart } from "cosord-charts"

      ...or include following for es-modules(eg:vuejs):

      import { Chart } from 'cosord-charts/dist/cosord-charts.esm.js'
      // import css
      import 'cosord-charts/dist/cosord-charts.min.css'
    • ...or include within your HTML

        <script src="https://cdn.jsdelivr.net/npm/cosord-charts@1.1.0/dist/cosord-charts.min.iife.js"></script>
        <!-- or -->
        <script src="https://unpkg.com/cosord-charts@1.1.0/dist/cosord-charts.min.iife.js"></script>

    Usage

    const data = {
        labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
            "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
        ],
        datasets: [
            {
                name: "Some Data", type: "bar",
                values: [25, 40, 30, 35, 8, 52, 17, -4]
            },
            {
                name: "Another Set", type: "line",
                values: [25, 50, -10, 15, 18, 32, 27, 14]
            }
        ]
    }
    
    const chart = new cosord.Chart("#chart", {  // or a DOM element,
                                                // new Chart() in case of ES6 module with above usage
        title: "My Awesome Chart",
        data: data,
        type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
        height: 250,
        colors: ['#7cd6fd', '#743ee2']
    })

    ...or for es-modules (replace new cosord.Chart() with new Chart()):

    - const chart = new cosord.Chart("#chart", {
    + const chart = new Chart("#chart", {  // or a DOM element,
                                        // new Chart() in case of ES6 module with above usage
        title: "My Awesome Chart",
        data: data,
        type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
        height: 250,
        colors: ['#7cd6fd', '#743ee2']
    })

    If you want to contribute:

    1. Clone this repo.
    2. cd into project directory
    3. npm install
    4. npm run dev

    Updates

    v1.0.0
    • Major rewrite out. Some new features include:
      • Mixed type axis datasets
      • Stacked bar charts
      • Value over data points
      • Y Markers and regions
      • Dot size, Bar space size, and other options
      • Legend for axis charts
    • We would be looking to incorporate existing PRs and issues in the meantime.
    Please read #93 for v0.1.0 updates on rework and development.
    v0.0.7
    v0.0.5
    v0.0.4
    • Build update: Shipped an ES6 module, along with the browser friendly IIFE.
    v0.0.2
    • We have an animated Pie Chart! Thanks @sheweichun.
    • @tobiaslins contributed tweaks for his quest to make these easy to use with React. Check out his repo and updates at #24 to learn more :)
    • A new logo.
    v0.0.1
    • The very first version out, with animatable bars and lines, a percentage chart and a heatmap. GitHub-style.

    License

    This repository has been released under the MIT License


    Project maintained by Cosmos. Used in Cosmos. Read the blog post.

    Keywords

    Install

    npm i cosord-charts

    DownloadsWeekly Downloads

    0

    Version

    1.5.6

    License

    MIT

    Unpacked Size

    1.03 MB

    Total Files

    40

    Last publish

    Collaborators

    • avatar