modern-chart-view

modern-chart is a versatile charting library designed to provide users with the flexibility to generate charts using either ECharts or Taucharts, based on their preferences and requirements. With modern-chart, users have the freedom to choose between these two powerful charting libraries, each offering unique features and capabilities, to create visualizations that best suit their needs.

Key Features:

• Choice of Charting Libraries: modern-chart-view allows users to select between ECharts and Taucharts for generating charts, offering a wide range of chart types and customization options.

• Seamless Integration: The library seamlessly integrates with both ECharts and Taucharts, providing a unified interface for chart creation and data visualization.

• Interactive Data Visualization: modern-chart-view empowers users to create interactive and dynamic charts, enabling data exploration and analysis with ease.

• Option to select from pre-existing Queries and their data

Documentation

Just import the QueryEditorResultTabs component and pass the columns and rows data to get started

<QueryEditorResultTabs columns={columns} rows={rows}>

Parameter	Type	Description
columns	IColumnObj	Required. Query result columns
rows	IRow	Required. Query result rows

Interfaces

Columns prop is an array of Objects based on IColumnObj interface -

Column Object:

{
  datatype: string;
  name: string;
  max?: number;
  maxLineLength?: number;
  maxValueLength?: number;
  min?: number;
  [key: string]: any; //can accept any key of type string and value any in the column object
}

Rows prop is an array of array of values based on the IRow interface -

Array<any>[];

Echarts - (features)

• Option to choose and generate charts of the form Line, Bar and Horizontal Bar.

• Option to choose and set the color of line (Line chart) and bar (bar chart).

• Option to opt in for smoothing of line in Line chart.

Tau Charts - (features)

• Option to choose and generate charts of the form Line, Bar and Horizontal Bar.

• Option to opt in for smoothing of line in Line chart.

Installation

npm install modern-chart-view

There could be a possiblity that you need to declare the module in a .d.ts file

For that create a declaration.d.ts file in the root of your project and add the following line -

declare module 'modern-chart-view';