tsichart-core - Time Series Interactive Charts

A powerful, flexible JavaScript library for visualizing time series data with interactive charts. Built with TypeScript and D3.js, this library provides a rich set of chart components including line charts, bar charts, pie charts, heatmaps, scatter plots, and more.

Features

✨ Rich Component Library - 20+ pre-built, customizable chart components
📊 Interactive Visualizations - Tooltips, zooming, panning, and dynamic data updates
🎨 Themeable - Built-in light and dark themes with customization options
📱 Responsive - Charts adapt to different screen sizes
🎯 TypeScript Support - Full type definitions included
🌳 Tree-shakeable - Import only the components you need
📦 Zero Configuration - Works out of the box with sensible defaults

Note: This library is a community-maintained fork of the original Microsoft Time Series Insights Client, rebranded as Time Series Interactive Charts and updated for generic time series visualization use cases.

Installation

NPM

npm install tsichart-core

Yarn

yarn add tsichart-core

Quick Start

Import All Components

import TsiClient from "tsichart-core";
import "tsichart-core/tsiclient.css";

// Create a line chart
let tsiClient = new TsiClient();
let lineChart = new tsiClient.ux.LineChart(document.getElementById('chart'));

// Prepare your data
const data = [{
  "Series1": {
    "": {
      "2023-01-01T00:00:00Z": { avg: 10 },
      "2023-01-01T01:00:00Z": { avg: 15 },
      "2023-01-01T02:00:00Z": { avg: 13 }
    }
  }
}];

// Render the chart
lineChart.render(data, { theme: 'light', legend: 'compact' });

Import Individual Components (Recommended for Tree-shaking)

import LineChart from 'tsichart-core/LineChart';
import 'tsichart-core/tsiclient.css';

// Create and render chart
let lineChart = new LineChart(document.getElementById('chart'));
lineChart.render(data, { theme: 'light' });

Available Components

tsiclient provides the following visualization components:

• LineChart - Render time series data as lines
• BarChart - Display time series data as bars with timestamp slider
• PieChart - Show time series data as pie charts with timestamp slider
• Heatmap - Visualize time series data as a heatmap
• ScatterPlot - Plot time series data points as a scatter plot
• AvailabilityChart - Display data availability over time
• Grid - Render time series data in a tabular format
• Hierarchy - Display hierarchical data structures
• EventsTable - Show events in a table format
• DateTimePicker - UI component for selecting date/time ranges
• TimezonePicker - UI component for timezone selection
• Slider - Time slider component
• ModelSearch - Search component for time series models
• HierarchyNavigation - Navigate hierarchical time series data
• ProcessGraphic - Display process graphics with data overlays
• ColorPicker - Color selection component
• And more...

For detailed usage examples and API documentation, see the UX Components documentation.

📚 Documentation & Examples

Interactive Component Documentation

Explore all components with live examples, API documentation, and interactive controls:

📖 Storybook Documentation - Interactive component library with:

• Live component previews with editable properties
• Complete API documentation with code examples
• Accessibility testing and guidelines
• Real-time property editing and testing
• Dark/light theme examples

Live Examples

🚀 Live Demo Site - Working examples and use cases

Local Development

# Run Storybook locally for development
pnpm storybook

# Build component documentation  
pnpm build-storybook

Data Format

All components work with a consistent JSON data structure. Here's the basic format:

const data = [{
  "SeriesName": {
    "SplitByValue": {  // Use empty string "" if no split
      "2023-01-01T00:00:00Z": {
        avg: 10,    // Your metric values
        min: 8,
        max: 12
      },
      "2023-01-01T01:00:00Z": {
        avg: 15,
        min: 13,
        max: 17
      }
    }
  }
}];

You are responsible for:

• Fetching time series data from your data source (API, database, etc.)
• Transforming your data into the expected format
• Handling any authentication/authorization

See the UX Components documentation for detailed format specifications for each chart type.

Resources

• Live Examples - Interactive examples hosted on GitHub Pages
• Full API Documentation

Contributing

Contributions are welcome! This is a community-maintained project. Please feel free to:

• Report bugs and request features via GitHub Issues
• Submit pull requests
• Improve documentation
• Share examples of your usage

License

MIT License - see LICENSE file for details.

Original work Copyright (c) Microsoft Corporation
Modified work Copyright (c) 2024 [Alexander Sysoiev]

Acknowledgments

This library is based on the original Microsoft Time Series Insights (TSI) JavaScript SDK, which has been deprecated. We've rebranded it as Time Series Interactive Charts and modernized it for generic time series visualization use cases.

TSI now stands for Time Series Interactive - reflecting the library's focus on interactive data visualization rather than a specific cloud service.

Migration from Original TSIClient

If you're migrating from the original Microsoft tsiclient package:

1. Package name change: Update your imports from tsiclient to tsichart-core
2. No breaking changes to component APIs: The chart components work the same way
3. Remove server calls: You'll need to handle data fetching yourself (Azure TSI service was retired)
4. Update documentation references: Use the new documentation instead of Azure TSI docs

• The tsiClient.server object and all related methods have been removed
• Focus is now exclusively on client-side visualization components

Contributing

This project welcomes contributions and suggestions.

Development

To set up the development environment and work on components:

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

   This will start a live-reloading server and open the examples page in your browser. You can now make changes to the source code and see them reflected live