@foxxo/cartesian-chart

@foxxo/cartesian-chart is a flexible Angular library for creating interactive and customizable Cartesian charts. It offers a variety of features for data visualization, including support for lines, dots, and different interpolation methods for connecting data points.

Features

• Cartesian Charts: Supports the creation of Cartesian charts with X and Y axes.
• Cardinal Curves: Utilizes cardinal curves for smooth data interpolation.
• Customizable: Offers extensive customization options to match your design requirements.
• Interactive: Supports mouse interaction for highlighting data points and displaying additional information.
• D3.js Powered: Leverages the power of d3-shape for data manipulation and visualization.
• Legend: Includes the ability to add a legend for each chart.

Installation

To install the library, run the following command in your Angular project:

npm install @foxxo/cartesian-chart d3-shape

Note: This library uses d3-shape for cardinal spline interpolation. Ensure you have it installed in your project (npm install d3-shape) if you intend to use this feature. If you are not using cardinal spline interpolation, d3-shape is not required.

Usage

This library provides a simple component, <lib-cartesian-chart>, for creating Cartesian charts. To use it, import the module, add the component to your template, and provide the necessary data inputs.

For complete usage examples and a fully functional demo application, please refer to the GitHub repository. The demo application showcases various chart configurations and data visualizations.

API

The lib-cartesian-chart component accepts the following inputs:

Data & Appearance:

• cartesianValues: CartesianElementModel[] - Array of elements to display (lines, dots, etc.). See the GitHub repository for details on the CartesianElementModel structure.
• labelNoData: string - Text to display when no data is available. Defaults to 'No data available'.
• labelLoading: string - Text to display while data is loading. Defaults to 'Loading...'.
• isLoading: boolean - Flag to indicate loading state. Defaults to false.
• fontFamily: string - Font family for text elements. Defaults to 'Arial'.
• fontSizePx: number - Font size in pixels. Defaults to 12.
• pointRadius: number - Radius of data points. Defaults to 4.
• highlightZeroLine: boolean - Whether to highlight the zero line. Defaults to false.
• zeroLineWidth: number - Width of the zero line. Defaults to 2.
• zeroLineColor: string - Color of the zero line. Defaults to '#212121'.
• zeroLineOpacity: number - Opacity of the zero line. Defaults to 1.
• zeroLineDash: [number, number] - Dash array for the zero line. Defaults to [2, 5].
• backgroundColor: string - Background color of the chart.

Axes & Grid:

• xAxisPointsCount: number - Number of points to display on the X-axis. Defaults to 10.
• yAxisPointsCount: number - Number of points to display on the Y-axis. Defaults to 10.
• xAxisLabelPrecision: number - Number of decimal places for X-axis labels. Defaults to 2.
• yAxisLabelPrecision: number - Number of decimal places for Y-axis labels. Defaults to 2.
• xCrosshairLabelPrecision: number - Number of decimal places for X-crosshair labels. Defaults to 2.
• yCrosshairLabelPrecision: number - Number of decimal places for Y-crosshair labels. Defaults to 2.
• gridColor: string - Color of the grid lines. Defaults to '#EEEEEE'.
• gridWidth: number - Width of the grid lines. Defaults to 1.
• axesColor: string - Color of the axes. Defaults to '#212121'.
• axesWidth: number - Width of the axes. Defaults to 1.

Crosshair:

• isCrosshairEnabled: boolean - Enables/disables the crosshair. Defaults to false.
• crosshairColor: string - Color of the crosshair. Defaults to '#BDBDBD'.
• crosshairWidth: number - Width of the crosshair. Defaults to 1.

Margins & Padding:

• canvasWidthPx: number - Width of the canvas in pixels. Defaults to 500.
• canvasHeightPx: number - Height of the canvas in pixels. Defaults to 500.
• topMarginPx: number - Top margin in pixels. Defaults to 19.5.
• leftMarginPx: number - Left margin in pixels. Defaults to 59.5.
• rightMarginPx: number - Right margin in pixels. Defaults to 59.5.
• bottomMarginPx: number - Bottom margin in pixels. Defaults to 39.5.
• yTopPaddingPercentage: number - Top padding percentage for Y-axis. Defaults to 0.
• yBottomPaddingPercentage: number - Bottom padding percentage for Y-axis. Defaults to 0.

For complete examples and detailed explanations of these properties and their usage, please refer to the demo application in the GitHub repository. You can also examine the TypeScript types in the source code for more detailed information on the data structures.

Development

To contribute to the development of the library, follow these steps:

1. Clone the repository:

   git clone https://github.com/RedFoxxo/angular-cartesian-chart.git

2. Install dependencies:

   pnpm install

3. Build the library:

   ng build cartesian-chart

   or

   pnpm watch:lib

4. Serve the demo project:

   pnpm start

License

This library is released under the MIT License.

Issues

If you encounter any problems or have suggestions for improvement, please open an issue on the GitHub issue tracker.