datatale-charts-vue

Datatale Charts Vue.js package

Overview: Datatale Charts is a versatile and user-friendly application designed to cater to all your data visualization needs. Whether you're tracking trends over time, comparing different categories, or analyzing trading patterns, Datatale Charts provides a robust platform with a variety of chart types to present your data effectively.

Features:

1. Simple Line Graphs:

   • Visualize data trends over time with clear and customizable line graphs.
   • Multiple line support for comparative analysis.

2. Bar Charts:

   • Compare categorical data with intuitive bar charts.
   • Stackable bars to showcase cumulative data.

3. Trade Charts:

   • Analyze trading data with specialized trade charts.
   • Support for candlestick and OHLC (Open, High, Low, Close) charts.
   • Allows for continuous, real-time data updates.

Interactive Features:

• Scroll through the dataset:

  • Effortlessly navigate through extensive datasets using the mouse wheel to scroll on specific data ranges.
  • Smooth and responsive capabilities for enhanced data exploration.

• Drag to Zoom in X-Axis:

  • Select and zoom into specific areas on the x-axis by dragging your cursor, allowing for detailed inspection of data within chosen time frames or categories.
  • Quick reset option to revert to the default view.

• Point Tips:

  • Display the precise coordinates of the current cursor position with intersecting lines on both the horizontal and vertical axes.
  • Real-time value labels are shown at the intersection, making it easy to identify exact data points during navigation.
  • Toggle visibility of Point Tips by pressing the “T” key for a clutter-free view when needed.

Customization and Usability:

• Customizable Chart Elements:

  • Tailor chart colors, labels, and legends to match your preferences or branding requirements.
  • Adjustable axis scales and grid lines for precise data representation.

• User-Friendly Interface:

  • Intuitive and clean UI designed for both novice and experienced users.
  • Seamless integration with various data sources and formats.

Performance and Compatibility:

• High Performance:

  • Optimized for handling large datasets without compromising on speed or responsiveness.
  • Real-time data rendering ensures up-to-date information is always at your fingertips.

• Cross-Platform Compatibility:

  • Accessible on various devices, including desktops, tablets, and smartphones.
  • Compatible with major browsers and operating systems.

Datatale Charts is the ultimate tool for transforming raw data into meaningful insights through engaging and interactive visualizations. Whether you're a data analyst, business professional, or trader, Datatale Charts equips you with the tools needed to explore and present your data with clarity and precision.

Datatale Charts API

This application provides an interface for creating charts with configurable properties. Below are the details on how to use the application and an example of the props it accepts.

Installation

To install the necessary dependencies, run:

npm i datatale-charts-vue

or

yarn add datatale-charts-vue

Usage

Here is an example of how to set up and use the chart application in Vue.js component.

Example Code

<script setup>
import DatataleCharts from "@/components/DatataleCharts.vue";
import randomDataSet from './random_data.json'

const layerBody = (context, data, point) => {
  context.strokeStyle = '#aafaff'
  context.lineWidth = 2
  context.setLineDash([3, 5])
  context.beginPath()

  for (let index = 1; index < data.length; index++) {
    let averagePointValue = Math.abs(data[index][1] + data[index-1][1])/2
    context.lineTo(point.x(data[index][0]), point.y(averagePointValue))
  }
  context.stroke()
  context.closePath()
}

const props = {
  config: {
    type: 'simple',
    title: 'Random data',
    xTitle: 'Horizontal Axis',
    yTitle: 'Vertical Axis'
  },
  data: [
    {
      name: 'Random',
      color: '#f1f1fb',
      type: 'line',
      style: 'solid',
      width: '1',
      dataSet: randomDataSet
    }
  ],
  layers: [
    {
      name: 'Layer 1',
      drawBody: layerBody,
      dataSet: randomDataSet
    }
  ]
}

</script>

<template>
  <DatataleCharts
      :config="props.config"
      :data="props.data"
      :layers="props.layers"
      class="h-screen"
  />
</template>

Props Structure

The props for the chart application are divided into three main parts: config, data, bottomPanel (for trade charts), and layers.

Chart Key

The chartKey string is a unique identifier of a graph instance.

Config

The config object contains the general configuration for the chart.

• type (string): The type of chart (e.g., 'simple').
• title (string): The title of the chart.
• xTitle (string): The title for the x-axis.
• yTitle (string): The title for the y-axis.
• fitViewport (boolean): Scale down data set to fit all available viewport (default: false).
• scrollToStart (boolean): Scroll the data set to the first data point (default: false).
• axisColor (string): The color of the axis lines.
• backgroundColor (string): The background color of the chart.
• indent (number): Indent between right axis side and the last data point (default: 10, trade chart only).
• withVolumes (boolean): Display volumes bars on the bottom of the chart (default: false, trade chart only).

Data

The data array contains objects that define different data sets to be plotted on the chart.

Each data object includes:

• name (string): The name of the data set.
• type (string): The type of data representation (e.g., 'bar', 'line').
• color (string): The color of the data representation.
• width (number, optional): The width of the line (if the type is 'line').
• dataSet (array): The data set to be plotted.

Bottom Panel (Trade charts)

The bottomPanel object contains configuration for additional panel with a shared horizontal scale with the main window. Intended for displaying additional indicators in trade chart. The bottomPanel object has data item with the same structure as a main data object.

  bottomPanel: {
    height: 200,
    data: [{
      name: 'Indicator line',
      type: 'bar',
      color: '#f3a544',
      width: 1,
      dataSet: indicatorDataSet
    }]
  }

Layers

The layers array defines additional layers to be drawn on the chart.

Each layer object includes:

• name (string): The name of the layer.
• draw_body (function): A function that defines how to draw the layer.
• dataSet (array): The data set to be used for the layer.

Functions

layerBody

The layerBody function is an example of a drawing function used in the layers array.

const layerBody = (context, data, point) => {
  context.beginPath();
  data.forEach((p) => {
    context.lineTo(point.x(p[0]), point.y(p[1]));
  });
  context.stroke();
  context.closePath();
};

This function takes the following parameters:

• context: The drawing context.
• data: The data set to be used for the layer.
• point: An object with x and y methods to calculate the coordinates.

Screenshot examples

CHANGELOG

[1.0.1] - 2026-02-06

Added

• Bottom panel for trade charts to display indicators in a dedicated panel below the main chart.
• Volume bars on trade charts to display trading volume data.
• Indent option to add space between the right axis side and the last data point (applies to trade charts).
• fitViewport option to automatically scale the dataset to fit the current viewport.
• scrollToStart option to conditionally show the data points from the first point when activated.
• Adaptive legend info panel: In smaller viewports, the legend collapses to a compact version, expanding when hovered.

Fixed

• Chart instance rendering: Fixed issues displaying multiple graph instances simultaneously on the same web page using unique chartKey identifiers.
• Window resize rendering bugs: Fixed issues with resizing the window and maintaining chart integrity.
• Data set processing: Improved the performance and accuracy of data set processing for more consistent chart rendering.