Timecharts NPM

screenshot

Key Features

No dependencies
Fully responsive
Easy to use

How To Use

Installation

Via NPM

Simply install the library:

npm i timecharts

In the Browser

Either use a CDN:

<script src="https://unpkg.com/timecharts@latest/dist/TimeCharts.min.js" type="text/javascript"></script>

Or download it locally:

<script src="./TimeCharts.min.js" type="text/javascript"></script>

Usage

const chart = new TimeCharts.Timeline("#container", {
  scale: {
      from: 7 * 60,
      to: 19 * 60,
      intervalStart: 0
  },
  data: {
      timelines: [
          {
              label: "WORK",
              colors: ["#7cd6fd", "#5e64ff"],
              values: [{
                  start: 8 * 60,
                  length: 120,
                  title: "Project 1"
              },
              {
                  start: 11 * 60,
                  length: 45,
                  title: "Project 2"
              },
              {
                  start: 13 * 60,
                  length: 120,
                  title: "Project 1"
              }]
          },
          {
              label: "STUDY",
              colors: ["#98d85b"],
              values: [{
                  start: 10 * 60,
                  length: 60,
                  title: "Topic 1"
              },
              {
                  start: 15 * 60,
                  length: 90,
                  title: "Topic 1"
              },
              {
                  start: 16 * 60 + 45,
                  length: 90,
                  title: "Topic 1"
              }]
          }
      ],
  },  
  padding: {
      top: 50, 
      left: 50,
      right: 50
  }
});