diff --git a/en/components/ai/ai-assisted-development-overview.md b/en/components/ai/ai-assisted-development-overview.md new file mode 100644 index 0000000000..64ba8d8ccc --- /dev/null +++ b/en/components/ai/ai-assisted-development-overview.md @@ -0,0 +1,23 @@ +--- +title: AI-Assisted Development with Ignite UI - Ignite UI for Angular +_description: Ignite UI provides Agent Skills, the Ignite UI CLI MCP server, and the Theming MCP server to ground AI coding assistants in correct component APIs, import paths, and design tokens across Angular, React, and Web Components. +_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor +_language: en +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" +namespace: Infragistics.Controls +mentionedTypes: [] +--- + + + + + +## Related Topics + +- [Agent Skills](skills.md) - Full setup guide for loading and wiring Skill packages in VS Code, Cursor, Windsurf, and JetBrains +- [CLI MCP](cli-mcp.md) - Full setup guide for Ignite UI CLI MCP, including recommended CLI-first setup and client-specific configuration + + + +- [Theming MCP](theming-mcp.md) - Theming MCP server setup and theming workflow examples diff --git a/en/components/ai/cli-mcp.md b/en/components/ai/cli-mcp.md new file mode 100644 index 0000000000..e60b374f04 --- /dev/null +++ b/en/components/ai/cli-mcp.md @@ -0,0 +1,423 @@ +--- +title: "Angular Ignite UI CLI MCP | Infragistics" +_description: "Connect Ignite UI CLI MCP to your AI client to scaffold projects, modify existing apps, create and update components, and ask documentation questions for Ignite UI for Angular. Learn the setup options for VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients." +_keywords: "Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains" +_language: en +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp" +namespace: Infragistics.Controls +mentionedTypes: [] +--- + +# Ignite UI CLI MCP + +

The Ignite UI CLI MCP is a Model Context Protocol (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for Ignite UI for Angular applications. Connect the Ignite UI CLI MCP to your editor, GitHub repository, or desktop AI client and describe what you want - the assistant uses the CLI tools for you.

+ +
+ +## Overview + +Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside Ignite UI Theming MCP - CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session. + +The Ignite UI CLI MCP works alongside the Ignite UI Theming MCP. In practice, the CLI MCP handles project and component workflows, while the Theming MCP handles palettes, themes, tokens, and styling workflows. Most teams will want both servers connected. + +The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and writes the initial MCP configuration for VS Code. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists. + +**Example prompts to try once connected:** + +> _"Create a new Ignite UI for Angular project in this folder, use the recommended defaults, and add a starter dashboard page with sample data."_ + +> _"Add a new grid page to this project, wire it to sample data, and keep the current navigation structure."_ + +> _"What properties and events does the combo component expose, and which ones are most useful for a searchable dropdown?"_ + +> _"Update the existing project to add a side navigation layout and preserve the current pages and routes."_ + +## Prerequisites + +Before configuring the MCP server, make sure you have: + +- **Node.js** (v18 or later) installed - this provides the `npx` command used to launch the server. +- An **AI client with MCP support** - for example, VS Code with GitHub Copilot, GitHub Copilot cloud agent, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. +- Internet access for `npx` package resolution the first time the server starts. +- One of the following starting points: + - an empty folder for a new project + - a project you created with Ignite UI CLI + - an existing Ignite UI for Angular project you want to continue working on + +If you want theming tools in the same client session and `igniteui-theming` is not already available in your project, run: + +```bash +npm install igniteui-theming +``` + +## Configure Ignite UI CLI MCP for Your AI Client + +The MCP server is launched through `npx`. No separate installation is required beyond Node.js and access to the `igniteui-cli` package. + +The canonical launch command is: + +```bash +npx -y igniteui-cli mcp +``` + +> [!NOTE] +> The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. + +### Choose a setup path + +You can start with Ignite UI CLI MCP in three ways: + +> **Recommended - CLI first** +> Create the project with Ignite UI CLI first by using `ig new` or the matching `npx --package igniteui-cli igniteui new` command. This is the easiest setup because Ignite UI CLI scaffolds the project, installs the required packages, and writes `.vscode/mcp.json` for VS Code automatically. After that, you only need to review the generated MCP configuration and open the project in your AI client. + +> **Empty folder** +> Start with a completely empty folder, add the MCP configuration manually, and then ask the assistant to create the project through chat. This path is useful when you want MCP to drive the project creation flow from the beginning instead of running the CLI yourself first. + +> **Existing project** +> Add MCP configuration to a project you already have and continue working in the current codebase. This path is useful when the project already exists and you want the assistant to help with project changes, component work, and documentation questions without regenerating anything. + +All three paths use the same MCP servers. The difference is only how the project is prepared before you start prompting: + +- in the **CLI-first** path, Ignite UI CLI creates the project and prepares the first MCP configuration for you +- in the **empty-folder** path, you create the MCP configuration first and let the assistant create the project after that +- in the **existing-project** path, you attach MCP to the current codebase and continue from what is already there + +In all cases, once the MCP servers are connected and visible in your AI client, the assistant can keep working in the same session. + +If you are creating a project with Ignite UI CLI first, you can run the CLI in either of these ways: + +- **Global install** + + ```bash + npm install -g igniteui-cli + ``` + + This gives you the `ig` command in any terminal session and is the clearest option if you plan to create and scaffold projects regularly. + +- **Without a global install** + + ```bash + npx --package igniteui-cli igniteui new + ``` + + This runs the CLI through `npx` instead of a global `ig` command. + +For the **CLI-first** path, you can create the project in guided mode or with a direct command. + +Use guided mode when you want the CLI to walk you through the available options: + +```bash +ig new +``` + +Matching `npx` form: + +```bash +npx --package igniteui-cli igniteui new +``` + +Use a direct command when you already know the project settings: + +```bash +ig new my-app --framework=angular --type=igx-ts --template=empty +``` + +Matching `npx` form: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty +``` + +In guided mode, Ignite UI CLI prompts for the project name, framework, template, theme, and whether to add a component or complete the setup. In direct mode, you provide the framework and any supported options in the command itself. + +For more details about project templates, CLI command options, and component scaffolding commands such as `ig add`, see the Ignite UI CLI documentation for Angular. + +### VS Code + +GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Create or edit `.vscode/mcp.json` in your project root: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +If you created the project with Ignite UI CLI first, review the generated `.vscode/mcp.json` and confirm that both entries are present. + +Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI CLI MCP tools will be available. + +> [!NOTE] +> MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. + +### Cursor + +Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +The servers will be picked up automatically when you open a new Cursor chat session. + +> [!NOTE] +> You can also configure MCP servers globally via **Settings → MCP** in Cursor. + +### Claude Desktop + +Add the servers to your Claude Desktop configuration file: + +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Restart Claude Desktop after saving. You will see an MCP server indicator (slider icon) in the chat input area, confirming that MCP tools are active. + +### Claude Code + +Claude Code supports MCP servers through its CLI and a project-scoped `.mcp.json` file. To share the configuration with your team, create or edit `.mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Alternatively, you can add the servers via the command line for your local environment only: + +```bash +claude mcp add igniteui-cli -- npx -y igniteui-cli mcp +claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp +``` + +Use the `/mcp` command inside Claude Code to verify the servers are connected. + +### JetBrains IDEs + +JetBrains AI Assistant supports MCP servers through the IDE settings: + +1. Open **Settings** (or **Preferences** on macOS). + +2. Navigate to **Tools → AI Assistant → Model Context Protocol (MCP)**. + +3. Click **+ Add** and choose **As JSON** or use the form fields. + +4. Enter the following configuration: + + ```json + { + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } + } + ``` + +5. Click **OK** and restart the AI Assistant. + +> [!NOTE] +> MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. + +### Other MCP Clients + +For any other MCP-compatible client, use the STDIO transport with these launch commands: + +```bash +npx -y igniteui-cli mcp +npx -y igniteui-theming igniteui-theming-mcp +``` + +### GitHub + +GitHub Copilot cloud agent supports repository-level MCP configuration. In your repository: + +1. Open the main repository page. +2. Click **Settings**. +3. In the sidebar, go to **Copilot** then **Cloud agent**. +4. Paste your JSON in the **MCP configuration** section. +5. Click **Save**. + +Use a repository configuration like this: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "type": "local", + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"], + "tools": ["*"] + }, + "igniteui-theming": { + "type": "local", + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"], + "tools": ["*"] + } + } +} +``` + +This setup is useful when you want the GitHub cloud agent to use the same CLI MCP and Theming MCP tools directly from the repository context. + +## Available Tools + +The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never call these tools directly. Describe what you want in chat, and the assistant picks the right one. This table is here so you know what's available before you start. + +To get the live list with current parameters, ask: + +> _"What tools does the Ignite UI CLI MCP provide?"_ + +Here is a brief overview of each tool: + +| Tool | Description | +| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `list_components` | Lists available Ignite UI component docs for a framework. Accepts an optional keyword filter (case-insensitive substring match against name, keywords, and summary). | +| `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. | +| `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. | +| `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. | +| `search_api` | Searches API entries by keyword or component name across Angular, React, and Web Components. | +| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, and Web Components. | + +At a high level, the CLI MCP tools help with: + +- creating new projects +- working in existing projects +- adding and modifying components +- updating project structure and configuration +- answering documentation and API questions + +> [!NOTE] +> Framework detection uses component prefixes: `` for Angular, `` for React, `` for Web Components, `` for Blazor. The assistant picks up the right framework automatically from your open files or prompt context. + +The theming server adds styling, theme, palette, and token workflows to the same client session. + +## Common Workflows + +The following setup scenarios show when to use each starting point. + +### CLI-first setup + +Create the project with Ignite UI CLI first when you want the fastest guided setup and want `.vscode/mcp.json` generated for you automatically. + +Example scenarios: + +- _"I want to create a new project with Ignite UI CLI first, open the generated project in VS Code, and continue from there with MCP."_ +- _"I already know I want a React project, so I want to create it with the CLI and then use MCP to add pages and components."_ + +### Empty folder setup + +Start from an empty folder when you want the assistant to create the project from chat after you add the MCP configuration yourself. + +Example scenarios: + +- _"I have a completely empty folder and I want the assistant to create the whole project from chat after MCP is connected."_ +- _"I do not want to run Ignite UI CLI manually first. I want MCP to drive the first project creation step."_ + +### Existing project setup + +Connect MCP to an existing project when you want to keep the current codebase and use the assistant for project changes, component work, and documentation questions. + +Example scenarios: + +- _"I already have a project and only want to add MCP so the assistant can help me update pages and components."_ +- _"The project exists already, and I mainly want to ask documentation and API questions while working in the current codebase."_ + +## Troubleshooting + +**`npx` is not recognized** + +Node.js is not installed or is not available in the current terminal environment. Install Node.js from [nodejs.org](https://nodejs.org) and verify with `node --version`. + +**`ig` is not recognized** + +If you want to use the global `ig` command, install Ignite UI CLI first with `npm install -g igniteui-cli`. If you do not want a global install, use the `npx --package igniteui-cli igniteui ...` form instead. + +**The MCP tools do not appear after saving the configuration** + +Reload the workspace, reopen the editor, or restart the AI client. Some clients require a full restart to detect new MCP configuration files. + +**One server fails to start** + +Verify that the configuration content matches the examples exactly, including key names and argument order. + +**The project was created, but the MCP configuration is only available for VS Code** + +Ignite UI CLI writes `.vscode/mcp.json` for the CLI-first path. If you are using Cursor, Claude Desktop, Claude Code, JetBrains, GitHub, or another MCP client, copy the same server entries into that client's configuration format and location. + +**The assistant is working in the wrong folder or cannot find the project files** + +Make sure the AI client is pointed at the project root. If you are using an editor-based client, open the project root folder. If you are using a desktop or chat-first client, make the correct project folder available as the session context. + +**The empty-folder setup does not behave as expected** + +Check that the folder is actually empty before starting. If the folder already contains project files, use the existing-project path instead of treating it as a new empty workspace. + +**The GitHub MCP configuration is rejected** + +Validate that the JSON uses the `mcpServers` structure and that each local server entry includes `type`, `command`, and `args`. If you include the `tools` field, use valid tool names or `["*"]`. + +## Additional Resources + +- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) + + + +- [Ignite UI for Angular Skills](./skills.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/ai/skills.md b/en/components/ai/skills.md index 40b31cffb2..f695905e12 100644 --- a/en/components/ai/skills.md +++ b/en/components/ai/skills.md @@ -8,7 +8,7 @@ mentionedTypes: [] # Ignite UI for Angular Agent Skills -Ignite UI for Angular ships with **[Agent Skills](https://agentskills.io/)** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for Angular. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. +Ignite UI for Angular ships with **[Agent Skills](https://agentskills.io/)** - structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for Angular. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. > [!NOTE] > The AI tooling landscape is evolving rapidly. Skill discovery locations and distribution options may change as tools and IDEs are updated. Always consult the official documentation for your specific tool or agent for the latest information. @@ -56,7 +56,7 @@ For user-level (global) skills available across all projects, use `~/.agents/ski | Project | `.github/skills/`, `.claude/skills/` | | Personal | `~/.copilot/skills/`, `~/.claude/skills/` (Copilot coding agent and GitHub Copilot CLI only) | -> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. +> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. ### Claude @@ -111,7 +111,7 @@ For user-level (global) skills available across all projects, use `~/.agents/ski Use one of the options below to download and place the skill files into the appropriate [skill location](#skill-locations) for your AI assistant. -### **Option A — Use the installed npm package** +### **Option A - Use the installed npm package** If Ignite UI for Angular is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: @@ -145,12 +145,12 @@ robocopy node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\ski robocopy node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E ``` -### **Option B — Use the `gemini skills` CLI** +### **Option B - Use the `gemini skills` CLI** The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: -- **User scope** (default) — installs skills globally for your user account, making them available across all projects. Skills are placed in `~/.gemini/skills/` or `~/.agents/skills/`. -- **Workspace scope** — installs skills locally into the current project directory under `.agents/skills/`, scoping them to that project only. +- **User scope** (default) - installs skills globally for your user account, making them available across all projects. Skills are placed in `~/.gemini/skills/` or `~/.agents/skills/`. +- **Workspace scope** - installs skills locally into the current project directory under `.agents/skills/`, scoping them to that project only. **Install to user scope (default):** @@ -170,7 +170,7 @@ gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-ang Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. -### **Option C — Use the `npx skills` CLI** +### **Option C - Use the `npx skills` CLI** The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: @@ -184,7 +184,7 @@ The CLI will guide you through a series of prompts to: 2. Choose the target location for the skill files in your project (e.g. `.agents/skills/`, `.github/skills/`). 3. Download and write the selected skill files automatically. -Once complete, the skills are ready to use — no manual file copying required. +Once complete, the skills are ready to use - no manual file copying required. > **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/igniteui-angular](https://github.com/IgniteUI/igniteui-angular) repository. diff --git a/en/components/ai/theming-mcp.md b/en/components/ai/theming-mcp.md index e14666c494..5c3fe3f78f 100644 --- a/en/components/ai/theming-mcp.md +++ b/en/components/ai/theming-mcp.md @@ -1,5 +1,5 @@ --- -title: Angular Theming MCP | Infragistics +title: Angular Theming MCP | Infragistics _description: Angular works with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Ignite UI for Angular applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements. _keywords: Ignite UI for Angular controls, Angular widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations _license: MIT @@ -20,6 +20,8 @@ The server supports all four Ignite UI design systems — **Material**, **Bootst Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** — the server compiles it for you. +The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, the Theming MCP handles palettes, themes, tokens, typography, elevations, and styling workflows, while the CLI MCP handles project creation, project modification, component workflows, and documentation-oriented tasks. Most teams will want both servers connected in the same AI client. + **Example prompts to try once connected:** > _"Create a complete Material Design dark theme for my Angular app with primary #2563eb and coral secondary #f97316."_ @@ -178,10 +180,11 @@ JetBrains AI Assistant supports MCP servers through the IDE settings: ### Other MCP Clients -For any other MCP-compatible client, use the STDIO transport with the following command and arguments: +For any other MCP-compatible client, use the STDIO transport with this launch command: -- **Command**: `npx` -- **Arguments**: `-y`, `igniteui-theming`, `igniteui-theming-mcp` +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` ## Customizing AI Behavior with Project Rules @@ -195,6 +198,7 @@ Editors like VS Code and Cursor let you provide project-level instruction files ## Theming Conventions ### Sass Code Style + - Use `@use` / `@forward` — never `@import`. - Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`). - Prefer setting primary design tokens over overriding many dependent tokens. @@ -215,6 +219,7 @@ globs: ["**/*.scss", "**/styles/**"] ## Project Theming Rules ### Code conventions + - `@use` / `@forward` only — no `@import`. - Extract shared colors into variables; do not repeat hex literals. - Prefer primary tokens — let dependent tokens derive automatically. @@ -238,7 +243,7 @@ To see the current full list of tools and their parameters at any time, ask your Here is a brief overview of each tool: | Tool | Description | -| :---------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `detect_platform` | Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools. | | `create_palette` | Generates a color palette with automatic shade variants (50–900, A100–A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | | `create_custom_palette` | Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable. | diff --git a/en/components/charts/chart-api.md b/en/components/charts/chart-api.md index dcdbd9ebfb..f0e44fa94a 100644 --- a/en/components/charts/chart-api.md +++ b/en/components/charts/chart-api.md @@ -15,38 +15,38 @@ The Ignite UI for Angular charts provide simple and easy to use APIs to plot you The Angular [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) has the following API members: -| Chart Properties | Axis Properties | Series Properties | -| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType)
- [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties)
- [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled)
- [`crosshairsDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsDisplayMode)
- [`transitionInMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode)
- [`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior)
- [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode)
- [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType)
| - [`xAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation)
- [`xAxisGap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap)
- [`xAxisOverlap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisOverlap)
- [`xAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitle)
- [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMaximumValue) | - [`brushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes)
- [`outlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlines)
- [`markerBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes)
- [`markerOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines)
- [`markerTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes)
- [`toolTipType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType)




| +| Chart Properties | Axis Properties | Series Properties | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| - [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType)
- [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties)
- [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled)
- [`crosshairsDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsDisplayMode)
- [`transitionInMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode)
- [`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior)
- [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode)
- [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType)
| - [`xAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation)
- [`xAxisGap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap)
- [`xAxisOverlap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisOverlap)
- [`xAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitle)
- [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMaximumValue) | - [`brushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes)
- [`outlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlines)
- [`markerBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes)
- [`markerOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines)
- [`markerTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes)
- [`toolTipType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType)




| ## Angular Financial Chart API The Angular [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) has the following API members: -| Chart Properties | Axis Properties | Series Properties | -| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#chartType)
- [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties)
- [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#isVerticalZoomEnabled)
- [`toolTipType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType)
- [`crosshairsDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsDisplayMode)
- [`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior)
- [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode)
- [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) | - [`xAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation)
- [`xAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitle)
- [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMaximumValue)
- [`yAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode)
- [`xAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) | - [`brushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes)
- [`outlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlines)
- [`markerBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes)
- [`markerOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines)
- [`markerTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes)
- [`indicatorTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#indicatorTypes)
- [`volumeType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#volumeType)
- [`zoomSliderType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType)


| +| Chart Properties | Axis Properties | Series Properties | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| - [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#chartType)
- [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties)
- [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#isVerticalZoomEnabled)
- [`toolTipType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType)
- [`crosshairsDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsDisplayMode)
- [`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior)
- [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode)
- [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) | - [`xAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation)
- [`xAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitle)
- [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMaximumValue)
- [`yAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode)
- [`xAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) | - [`brushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes)
- [`outlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlines)
- [`markerBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes)
- [`markerOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines)
- [`markerTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes)
- [`indicatorTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#indicatorTypes)
- [`volumeType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#volumeType)
- [`zoomSliderType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType)


| ## Angular Data Chart API The Angular [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) has the following API members: -| Chart Properties | Axis Classes | -| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - [`chartTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#chartTitle)
- [`subtitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#subtitle)
- [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled)
- [`brushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#brushes)
- [`outlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#outlines)
- [`markerBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerBrushes)
- [`markerOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerOutlines)
- `XamDataChart.Axes`
- [`IgxSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html)
| - [`IgxAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html) is base class for all axis types
- [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md)
- [`IgxCategoryYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md)
- [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) used with [Radial Series](types/radial-chart.md)
- [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) used with [Scatter Series](types/scatter-chart.md) and [Bar Series](types/bar-chart.md)
- [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) used with [Scatter Series](types/scatter-chart.md), [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md)
- [`IgxNumericAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) used with [Polar Series](types/polar-chart.md)
- [`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) used with [Polar Series](types/polar-chart.md) and [Radial Series](types/radial-chart.md)
- [`IgxTimeXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) used with [Category Series](types/column-chart.md) and [Financial Series](types/stock-chart.md)

| +| Chart Properties | Axis Classes | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| - [`chartTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#chartTitle)
- [`subtitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#subtitle)
- [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled)
- [`brushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#brushes)
- [`outlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#outlines)
- [`markerBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerBrushes)
- [`markerOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerOutlines)
- `XamDataChart.Axes`
- [`IgxSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html)
| - [`IgxAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html) is base class for all axis types
- [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md)
- [`IgxCategoryYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md)
- [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) used with [Radial Series](types/radial-chart.md)
- [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) used with [Scatter Series](types/scatter-chart.md) and [Bar Series](types/bar-chart.md)
- [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) used with [Scatter Series](types/scatter-chart.md), [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md)
- [`IgxNumericAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) used with [Polar Series](types/polar-chart.md)
- [`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) used with [Polar Series](types/polar-chart.md) and [Radial Series](types/radial-chart.md)
- [`IgxTimeXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) used with [Category Series](types/column-chart.md) and [Financial Series](types/stock-chart.md)

| The Angular [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) can use the following type of series that inherit from [`IgxSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html): -| Category Series | Stacked Series | -| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| - [`IgxAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html)
- [`IgxBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html)
- [`IgxColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html)
- [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html)
- [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html)
- [`IgxSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineseriescomponent.html)
- [`IgxSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineareaseriescomponent.html)
- [`IgxStepLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsteplineseriescomponent.html)
- [`IgxStepAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstepareaseriescomponent.html)
- [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html)
- [`IgxRangeColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html)
- [`IgxWaterfallSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html)
| - [`IgxStackedAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html)
- [`IgxStackedBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html)
- [`IgxStackedColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html)
- [`IgxStackedLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html)
- [`IgxStackedSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html)
- [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html)
- [`IgxStacked100BarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html)
- [`IgxStacked100ColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html)
- [`IgxStacked100LineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html)
- [`IgxStacked100SplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html)


| +| Category Series | Stacked Series | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| - [`IgxAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html)
- [`IgxBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html)
- [`IgxColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html)
- [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html)
- [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html)
- [`IgxSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineseriescomponent.html)
- [`IgxSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineareaseriescomponent.html)
- [`IgxStepLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsteplineseriescomponent.html)
- [`IgxStepAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstepareaseriescomponent.html)
- [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html)
- [`IgxRangeColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html)
- [`IgxWaterfallSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html)
| - [`IgxStackedAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html)
- [`IgxStackedBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html)
- [`IgxStackedColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html)
- [`IgxStackedLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html)
- [`IgxStackedSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html)
- [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html)
- [`IgxStacked100BarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html)
- [`IgxStacked100ColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html)
- [`IgxStacked100LineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html)
- [`IgxStacked100SplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html)


| -| Scatter Series | Financial Series | -| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html)
- [`IgxHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html)
- [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html)
- [`IgxScatterLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html)
- [`IgxScatterSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html)
- [`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html)
- [`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html)
- [`IgxScatterPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html)
- [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html)

| - [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html)
- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbollingerbandsoverlaycomponent.html)
- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxforceindexindicatorcomponent.html)
- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmedianpriceindicatorcomponent.html)
- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmassindexindicatorcomponent.html)
- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrelativestrengthindexindicatorcomponent.html)
- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstandarddeviationindicatorcomponent.html)
- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtypicalpriceindicatorcomponent.html)
- [`IgxWeightedCloseIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxweightedcloseindicatorcomponent.html)
- and [many more](types/stock-chart.md) | +| Scatter Series | Financial Series | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| - [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html)
- [`IgxHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html)
- [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html)
- [`IgxScatterLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html)
- [`IgxScatterSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html)
- [`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html)
- [`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html)
- [`IgxScatterPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html)
- [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html)

| - [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html)
- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbollingerbandsoverlaycomponent.html)
- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxforceindexindicatorcomponent.html)
- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmedianpriceindicatorcomponent.html)
- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmassindexindicatorcomponent.html)
- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrelativestrengthindexindicatorcomponent.html)
- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstandarddeviationindicatorcomponent.html)
- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtypicalpriceindicatorcomponent.html)
- [`IgxWeightedCloseIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxweightedcloseindicatorcomponent.html)
- and [many more](types/stock-chart.md) | | Radial Series | Polar Series | -| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | - [`IgxRadialLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradiallineseriescomponent.html)
- [`IgxRadialAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialareaseriescomponent.html)
- [`IgxRadialPieSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html)
- [`IgxRadialColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialcolumnseriescomponent.html)

| - [`IgxPolarScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarscatterseriescomponent.html)
- [`IgxPolarLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarlineseriescomponent.html)
- [`IgxPolarAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html)
- [`IgxPolarSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineseriescomponent.html)
- [`IgxPolarSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineareaseriescomponent.html)
| ## Angular Data Legend API diff --git a/en/components/charts/features/chart-axis-gridlines.md b/en/components/charts/features/chart-axis-gridlines.md index 43ad2c2291..5fa457af10 100644 --- a/en/components/charts/features/chart-axis-gridlines.md +++ b/en/components/charts/features/chart-axis-gridlines.md @@ -28,7 +28,6 @@ This example shows how configure the axis gridline to display major and minor gr github-src="charts/category-chart/axis-gridlines"> -
## Angular Axis Gridlines Properties @@ -40,7 +39,7 @@ In order to display minor gridlines that correspond to minor interval, you need You can customize how the gridlines are displayed in your Angular chart by setting the following properties: | Axis Visuals | Type | Property Names | Description | -| :--------------------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------ | +| ---------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | | Major Stroke Color | string | [`xAxisMajorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStroke)
[`yAxisMajorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStroke) | These properties set the color of axis major gridlines. | | Minor Stroke Color | string | [`xAxisMinorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStroke)
[`yAxisMinorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStroke) | These properties set the color of axis minor gridlines. | | Major Stroke Thickness | number | [`xAxisMajorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStrokeThickness)
[`yAxisMajorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStrokeThickness) | These properties set the thickness in pixels of the axis major gridlines. | @@ -66,7 +65,6 @@ The following example demonstrates how to customize the gridlines by setting the github-src="charts/category-chart/axis-gridlines"> - The axes of the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) also have the ability to place a dash array on the major and minor gridlines by utilizing the [`majorStrokeDashArray`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStrokeDashArray) and [`minorStrokeDashArray`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#minorStrokeDashArray) properties, respectively. The actual axis line can be dashed as well by setting the [`strokeDashArray`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strokeDashArray) property of the corresponding axis. These properties take an array of numbers that will describe the length of the dashes for the corresponding grid lines. The following example demonstrates a [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) with the above dash array properties set: @@ -77,7 +75,6 @@ The following example demonstrates a [`IgxDataChartComponent`]({environment:dvAp github-src="charts/data-chart/dash-array-axes"> -
## Angular Axis Tickmarks Example @@ -94,7 +91,6 @@ The following example demonstrates how to customize the tickmarks by setting the github-src="charts/category-chart/axis-tickmarks"> -
## Angular Axis Tickmarks Properties @@ -102,7 +98,7 @@ The following example demonstrates how to customize the tickmarks by setting the You can customize how the axis tickmarks are displayed in our Angular chats by setting the following properties: | Axis Visuals | Type | Property Names | Description | -| :-------------------- | :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------- | +| --------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- | | Tick Stroke Color | string | [`xAxisTickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStroke)
[`yAxisTickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStroke) | These properties set the color of the tickmarks. | | Tick Stroke Thickness | number | [`xAxisTickStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStrokeThickness)
[`yAxisTickStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStrokeThickness) | These properties set the thickness of the axis tick marks. | | Tick Stroke Length | number | [`xAxisTickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickLength)
[`yAxisTickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickLength) | These properties set the length of the axis tick marks. | @@ -119,7 +115,7 @@ You can find more information about related chart features in these topics: The following is a list of API members mentioned in the above sections: | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) or [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) | -| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`interval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#interval) | [`xAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval) (Major Interval) | | `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`interval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#interval) | [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) (Major Interval) | | `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`minorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#minorInterval) | [`xAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinorInterval) | diff --git a/en/components/charts/features/chart-axis-layouts.md b/en/components/charts/features/chart-axis-layouts.md index 69024dc19e..655bcc307e 100644 --- a/en/components/charts/features/chart-axis-layouts.md +++ b/en/components/charts/features/chart-axis-layouts.md @@ -25,7 +25,6 @@ The following example depicts the amount of renewable electricity produced since github-src="charts/category-chart/axis-locations"> - | +| `Axes` ➔ `NumericYAxis` ➔ `labelSettings.location` | `YAxisLabelLocation` | +| `Axes` ➔ `NumericXAxis` ➔ `labelSettings.location` | `XAxisLabelLocation` | +| `Axes` ➔ `NumericYAxis` ➔ `labelSettings.horizontalAlignment` | `YAxisLabelHorizontalAlignment` | +| `Axes` ➔ `NumericXAxis` ➔ `labelSettings.verticalAlignment` | `XAxisLabelVerticalAlignment` | +| `Axes` ➔ `NumericYAxis` ➔ `labelSettings.visibility` | `YAxisLabelVisibility` | +| `Axes` ➔ `NumericXAxis` ➔ `labelSettings.visibility` | `XAxisLabelVisibility` | --> diff --git a/en/components/charts/features/chart-axis-options.md b/en/components/charts/features/chart-axis-options.md index c3e3a9e8ac..bcbf26ca3e 100644 --- a/en/components/charts/features/chart-axis-options.md +++ b/en/components/charts/features/chart-axis-options.md @@ -21,7 +21,6 @@ The axis titles feature of the Angular charts, allows you to add contextual info github-src="charts/category-chart/axis-titles"> -
## Axis Labels Example @@ -34,7 +33,6 @@ The Angular Charts allows you full control over configuring, formatting, and sty github-src="charts/category-chart/axis-labels"> -
## Axis Labels Management & Formatting @@ -57,7 +55,6 @@ The following example formats the yAxis with a [`IgxNumberFormatSpecifier`]({env github-src="charts/category-chart/format-specifiers"> -
## Axis Range Example @@ -72,7 +69,6 @@ By default, charts will calculate the minimum and maximum values for the numeric github-src="charts/category-chart/axis-range"> -
## Axis Modes & Scale @@ -89,7 +85,6 @@ In addition to [`yAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angul github-src="charts/financial-chart/axis-types"> -
## Axis Gap Example @@ -108,7 +103,6 @@ The following example shows the average maximum temperature in Celsius in New Yo github-src="charts/category-chart/axis-gap"> -
## Axis Overlap Example @@ -123,7 +117,6 @@ The following example shows a comparison of the highest grossing worldwide film github-src="charts/category-chart/axis-overlap"> -
## Additional Resources @@ -138,7 +131,7 @@ You can find more information about related chart features in these topics: The following is a list of API members mentioned in the above sections: | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | -| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#maximumValue) | [`yAxisMaximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMaximumValue) | [`yAxisMaximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMaximumValue) | | `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#minimumValue) | [`yAxisMinimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinimumValue) | [`yAxisMinimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinimumValue) | | `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`isLogarithmic`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#isLogarithmic) | [`yAxisIsLogarithmic`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisIsLogarithmic) | [`yAxisIsLogarithmic`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisIsLogarithmic) | diff --git a/en/components/charts/features/chart-axis-types.md b/en/components/charts/features/chart-axis-types.md index d877ebbeea..0e314d7772 100644 --- a/en/components/charts/features/chart-axis-types.md +++ b/en/components/charts/features/chart-axis-types.md @@ -22,9 +22,9 @@ The [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui- The [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) requires you to provide a `DataSource` and a [`label`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#label) in order to plot data with it. It is generally used with the [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) to plot the following type of series: -| Category Series | Stacked Series | Financial Series | -| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - [`IgxAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html)
- [`IgxColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html)
- [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html)
- [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html)
- [`IgxSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineseriescomponent.html)
- [`IgxSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineareaseriescomponent.html)
- [`IgxStepLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsteplineseriescomponent.html)
- [`IgxStepAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstepareaseriescomponent.html)
- [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html)
- [`IgxRangeColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html)
- [`IgxWaterfallSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html) | - [`IgxStackedAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html)
- [`IgxStackedColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html)
- [`IgxStackedLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html)
- [`IgxStackedSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html)
- [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html)
- [`IgxStacked100ColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html)
- [`IgxStacked100LineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html)
- [`IgxStacked100SplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html)



| - [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html)
- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbollingerbandsoverlaycomponent.html)
- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxforceindexindicatorcomponent.html)
- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmedianpriceindicatorcomponent.html)
- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmassindexindicatorcomponent.html)
- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrelativestrengthindexindicatorcomponent.html)
- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstandarddeviationindicatorcomponent.html)
- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtypicalpriceindicatorcomponent.html)



| +| Category Series | Stacked Series | Financial Series | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| - [`IgxAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html)
- [`IgxColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html)
- [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html)
- [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html)
- [`IgxSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineseriescomponent.html)
- [`IgxSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineareaseriescomponent.html)
- [`IgxStepLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsteplineseriescomponent.html)
- [`IgxStepAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstepareaseriescomponent.html)
- [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html)
- [`IgxRangeColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html)
- [`IgxWaterfallSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html) | - [`IgxStackedAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html)
- [`IgxStackedColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html)
- [`IgxStackedLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html)
- [`IgxStackedSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html)
- [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html)
- [`IgxStacked100ColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html)
- [`IgxStacked100LineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html)
- [`IgxStacked100SplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html)



| - [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html)
- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbollingerbandsoverlaycomponent.html)
- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxforceindexindicatorcomponent.html)
- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmedianpriceindicatorcomponent.html)
- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmassindexindicatorcomponent.html)
- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrelativestrengthindexindicatorcomponent.html)
- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstandarddeviationindicatorcomponent.html)
- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtypicalpriceindicatorcomponent.html)



| The following example demonstrates usage of the [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) type: @@ -34,7 +34,6 @@ The following example demonstrates usage of the [`IgxCategoryXAxisComponent`]({e github-src="charts/data-chart/stacked-column-chart"> - ### Category Y-Axis The [`IgxCategoryYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) works very similarly to the [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a `DataSource` and a [`label`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#label) in order to plot data with it. The [`IgxCategoryYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) is generally used with the [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) to plot the following type of series: @@ -51,7 +50,6 @@ The following example demonstrates usage of the [`IgxCategoryYAxisComponent`]({e github-src="charts/data-chart/bar-chart-multiple-sources"> - ### Numeric X-Axis The [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) labels depends on the `XMemberPath` property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html). Alternatively, if combined with the [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html), these labels will be placed corresponding to the `ValueMemberPath` of the [`IgxBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html), [`IgxStackedBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html), and [`IgxStacked100BarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html). @@ -79,16 +77,15 @@ The following example demonstrates usage of the [`IgxNumericXAxisComponent`]({en github-src="charts/data-chart/type-scatter-hd-series"> - ### Numeric Y-Axis The [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) labels depends on the `YMemberPath` property of the various [ScatterSeries](../types/scatter-chart.md) that is supports if combined with a [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html). Alternatively, if combined with the [`IgxCategoryYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html), these labels will be placed corresponding to the `ValueMemberPath` of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using. The [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) is compatible with the following type of series: -| Category Series | Stacked Series | Financial Series | Scatter Series | -| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - [`IgxAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html)
- [`IgxColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html)
- [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html)
- [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html)
- [`IgxSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineseriescomponent.html)
- [`IgxSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineareaseriescomponent.html)
- [`IgxStepLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsteplineseriescomponent.html)
- [`IgxStepAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstepareaseriescomponent.html)
- [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html)
- [`IgxRangeColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html)
- [`IgxWaterfallSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html)
| - [`IgxStackedAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html)
- [`IgxStackedColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html)
- [`IgxStackedLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html)
- [`IgxStackedSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html)
- [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html)
- [`IgxStacked100ColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html)
- [`IgxStacked100LineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html)
- [`IgxStacked100SplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html)
| - [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html)
- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbollingerbandsoverlaycomponent.html)
- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxforceindexindicatorcomponent.html)
- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmedianpriceindicatorcomponent.html)
- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmassindexindicatorcomponent.html)
- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrelativestrengthindexindicatorcomponent.html)
- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstandarddeviationindicatorcomponent.html)
- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtypicalpriceindicatorcomponent.html)
| - [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html)
- [`IgxHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html)
- [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html)
- [`IgxScatterLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html)
- [`IgxScatterSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html)
- [`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html)
- [`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html)
- [`IgxScatterPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html)
- [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html)
| +| Category Series | Stacked Series | Financial Series | Scatter Series | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| - [`IgxAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html)
- [`IgxColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html)
- [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html)
- [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html)
- [`IgxSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineseriescomponent.html)
- [`IgxSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineareaseriescomponent.html)
- [`IgxStepLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsteplineseriescomponent.html)
- [`IgxStepAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstepareaseriescomponent.html)
- [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html)
- [`IgxRangeColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html)
- [`IgxWaterfallSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html)
| - [`IgxStackedAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html)
- [`IgxStackedColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html)
- [`IgxStackedLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html)
- [`IgxStackedSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html)
- [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html)
- [`IgxStacked100ColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html)
- [`IgxStacked100LineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html)
- [`IgxStacked100SplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html)
| - [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html)
- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbollingerbandsoverlaycomponent.html)
- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxforceindexindicatorcomponent.html)
- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmedianpriceindicatorcomponent.html)
- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmassindexindicatorcomponent.html)
- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrelativestrengthindexindicatorcomponent.html)
- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstandarddeviationindicatorcomponent.html)
- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtypicalpriceindicatorcomponent.html)
| - [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html)
- [`IgxHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html)
- [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html)
- [`IgxScatterLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html)
- [`IgxScatterSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html)
- [`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html)
- [`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html)
- [`IgxScatterPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html)
- [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html)
| The following example demonstrates usage of the [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html): @@ -98,7 +95,6 @@ The following example demonstrates usage of the [`IgxNumericYAxisComponent`]({en github-src="charts/data-chart/scatter-line-chart"> - ### Time X Axis The [`IgxTimeXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) treats its data as a sequence of data items, sorted by date. Labels on this axis type are dates and can be formatted and arranged according to date intervals. The date range of this axis is determined by the date values in a data column that is mapped using its `DateTimeMemberPath`. This, along with a `DataSource` is required to plot data with this axis type. @@ -141,7 +137,6 @@ The following example demonstrates usage of the [`IgxCategoryAngleAxisComponent` github-src="charts/data-chart/radial-area-chart"> - ### Proportional Category Angle Axis The [`IgxProportionalCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxproportionalcategoryangleaxiscomponent.html) treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers. @@ -156,7 +151,6 @@ The following example demonstrates usage of the [`IgxProportionalCategoryAngleAx github-src="charts/data-chart/radial-proportional-category-angle-axis"> - ### Numeric Angle Axis The [`IgxNumericAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the [`IgxNumericAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) varies according to the value in the data column mapped using the `RadiusMemberPath` property of the [Polar Series](../types/polar-chart.md) object or the `ValueMemberPath` property of the [Radial Series](../types/radial-chart.md) object. @@ -171,7 +165,6 @@ The following example demonstrates usage of the [`IgxNumericAngleAxisComponent`] github-src="charts/data-chart/polar-scatter-chart"> - ### Numeric Radius Axis The [`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the `AngleMemberPath` property of the corresponding polar series. @@ -186,7 +179,6 @@ The following example demonstrates usage of the [`IgxNumericRadiusAxisComponent` github-src="charts/data-chart/polar-line-chart"> - ## Additional Resources You can find more information about related chart features in these topics: diff --git a/en/components/charts/features/chart-data-legend.md b/en/components/charts/features/chart-data-legend.md index 438e94cea3..58f15cc41e 100644 --- a/en/components/charts/features/chart-data-legend.md +++ b/en/components/charts/features/chart-data-legend.md @@ -21,7 +21,6 @@ The rows of the [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/products/i github-src="charts/category-chart/data-legend"> - ### Header Row The header row displays the current label of x-axis when hovering mouse over category series and financial series. You can use [`headerFormatDate`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerFormatDate) and [`headerFormatTime`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerFormatTime) properties to format date and time in the [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) if the x-axis shows dates. For other types of series, the [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) does not render the header row. @@ -44,11 +43,10 @@ The columns of the [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/product github-src="charts/financial-chart/data-legend"> - Setting values on the [`includedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedColumns) and [`excludedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedColumns) properties, depends on type of series and how many data columns they support. For example, you can set [`includedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedColumns) property to a collection of **Open** and **Close** strings and the legend will show only open and close values for stock prices when the chart is plotting financial series. The following table lists all column names that can be use to filter columns in data legend. -| Type of Series | Column Names | -| :--------------- | :--------------------------------------------------- | +| Type of Series | Column Names | +| ---------------- | ---------------------------------------------------- | | Category Series | Value | | Radial Series | Value | | Polar Series | Radius, Angle | @@ -77,10 +75,10 @@ The unit column displays an abbreviation symbol on the right side of value colum ### Customizing Columns -You can customize text displayed in the **Label** and **Unit** columns using properties that end with **MemberAsLegendLabel** and **MemberAsLegendUnit** on each series. The following table shows some possible customizations of the **Label** and **Unit** columns. +You can customize text displayed in the **Label** and **Unit** columns using properties that end with **MemberAsLegendLabel** and **MemberAsLegendUnit** on each series. The following table shows some possible customizations of the **Label** and **Unit** columns. -| Type of Series | Series Properties | -| :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Type of Series | Series Properties | +| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Category Series | ValueMemberAsLegendLabel="$"
ValueMemberAsLegendUnit="M" | | Radial Series | ValueMemberAsLegendLabel="Distance:"
ValueMemberAsLegendUnit="KM" | | Polar Series | RadiusMemberAsLegendLabel="Radius:"
RadiusMemberAsLegendUnit="KM"
AngleMemberAsLegendLabel="Angle:"
AngleMemberAsLegendUnit="°" | @@ -107,7 +105,6 @@ The [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-ang github-src="charts/financial-chart/data-legend-styling-props"> - ## Angular Data Legend Value Formatting The [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) provides automatic abbreviation of large numbers using its [`valueFormatAbbreviation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatAbbreviation) property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the [`valueFormatMinFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMinFractions) and [`valueFormatMaxFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMaxFractions). This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. @@ -119,7 +116,6 @@ The following example demonstrates how to use those properties: github-src="charts/category-chart/data-legend-formatting-decimals"> - ## Angular Data Legend Value Mode You have the ability to change the default decimal display of values within the [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) to a currency by changing the [`valueFormatMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMode) property. Also, you can change the culture of the displayed currency symbol by setting the [`valueFormatCulture`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatCulture) property a culture tag. For example, the following example data legend with the [`valueFormatCulture`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatCulture) set to "en-GB" to display British Pounds (£) symbol: @@ -130,7 +126,6 @@ You have the ability to change the default decimal display of values within the github-src="charts/financial-chart/data-legend-formatting-currency"> - ## Angular Data Legend Grouping [`dataLegendGroup`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dataLegendGroup) can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed: @@ -142,7 +137,6 @@ By default, DataLegend will hide names of groups, but you can display group name github-src="charts/data-chart/data-legend-grouping"> - ## Angular Data Legend Styling & Events Several properties are exposed including grouping portions of the legend. @@ -182,7 +176,6 @@ Some of the events exposes a [`IgxDataLegendStylingRowEventArgs`]({environment:d github-src="charts/data-chart/data-legend-styling"> - ## API References - [`excludedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedColumns) diff --git a/en/components/charts/features/chart-data-selection.md b/en/components/charts/features/chart-data-selection.md index 13ac7ce96b..ef7874b4af 100644 --- a/en/components/charts/features/chart-data-selection.md +++ b/en/components/charts/features/chart-data-selection.md @@ -54,7 +54,6 @@ The following example shows the combination of both `SelectionColorFill` and `Au github-src="charts/category-chart/selection-modes"> - ## Configuring Multiple Selection Other selection modes offer various methods of selection. For example using [`selectionBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectionBehavior) with `PerDataItemMultiSelect` will affect all series in entire category when multiple series are present while allowing selection across categories. Compared to `PerDataItemSingleSelect`, only a single category of items can be selected at a time. This is useful if multiple series are bound to different datasources and provides greater control of selection between categories. @@ -66,7 +65,6 @@ Other selection modes offer various methods of selection. For example using [`se github-src="charts/category-chart/selection-multiple-modes"> - ## Configuring Outline Selection When [`focusBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#focusBrush) is applied, selected series will appear with a border when the [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectionMode) property is set to one of the focus options. @@ -81,7 +79,6 @@ This example demonstrates another series type via the [`IgxDataChartComponent`]( github-src="charts/data-chart/radial-column-chart-selection"> - ## Programmatic Selection Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html). The `Matcher` property of the [`IgxChartSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartselection.html) object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. @@ -96,11 +93,10 @@ For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar github-src="charts/category-chart/selection-matcher"> - ## API References The following is a list of API members mentioned in the above sections: | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) Properties | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) Properties | -| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | | diff --git a/en/components/charts/features/chart-highlight-filter.md b/en/components/charts/features/chart-highlight-filter.md index 9d000f3d93..1536dee1d6 100644 --- a/en/components/charts/features/chart-highlight-filter.md +++ b/en/components/charts/features/chart-highlight-filter.md @@ -17,7 +17,6 @@ The Ignite UI for Angular Chart components support a data highlighting overlay t github-src="charts/data-chart/chart-highlight-filter-multiple-series"> - Note that data highlighting feature is supported by the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) and [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), but it is configured in different ways in those controls due to the nature of how those controls work. One thing remains constant with this feature though, in that you need to set the [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) property to `Overlay` if you want to see the highlight. The following will explain the different configurations for the highlight filter feature. ## Using Highlight Filter with DataChart @@ -40,7 +39,6 @@ The following example demonstrates the usage of the data legend grouping and hig github-src="charts/data-chart/data-legend-grouping-and-highlighting"> - The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control using the [`highlightedValuesDataLegendGroup`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesDataLegendGroup): - The following example demonstrates the usage of the data highlighting overlay feature within the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control using the `HighlightedValueMemberPath`: - ## Using Highlight Filter in CategoryChart The [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) highlight filter happens on the chart by setting the [`initialHighlightFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialHighlightFilter) property. Since the [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) takes all of the properties on your underlying data item into account by default, you will need to define the [`initialGroups`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialGroups) on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the [`initialGroups`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialGroups) to a value path in your underlying data item to group by a path that has duplicate values. @@ -77,7 +73,6 @@ The following example demonstrates the usage of the data highlighting overlay fe github-src="charts/category-chart/chart-highlight-filter"> - @@ -95,7 +90,7 @@ You can find more information about related chart features in these topics: The following is a list of API members mentioned in the above sections: | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) Properties | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) Properties | -| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`highlightedDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource) | [`highlightedDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource) | | [`highlightedTitleSuffix`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedTitleSuffix) | [`highlightedTitleSuffix`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedTitleSuffix) | | `CategoryChart.HighlightedValueMemberPath` | `Series.HighlightedValueMemberPath` | diff --git a/en/components/charts/features/chart-navigation.md b/en/components/charts/features/chart-navigation.md index 994980c04a..0a2caf8410 100644 --- a/en/components/charts/features/chart-navigation.md +++ b/en/components/charts/features/chart-navigation.md @@ -21,7 +21,6 @@ The following example shows all of the available panning and zooming options tha github-src="charts/data-chart/chart-navigation"> -
Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. @@ -45,7 +44,7 @@ Navigation in the Angular data chart can happen with either touch, the mouse or The zoom and pan operations can also be enabled by using modifier keys by setting the [`dragModifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#dragModifier) and [`panModifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#panModifier) properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed: | Modifier Value | Corresponding Key | -| :------------- | :---------------- | +| -------------- | ----------------- | | `Shift` | SHIFT | | `Control` | CTRL | | `Windows` | WIN | @@ -71,7 +70,6 @@ The following example demonstrates enabling scrollbars. github-src="charts/financial-chart/scrollbars"> -
## Chart Navigation through Code diff --git a/en/components/charts/features/chart-performance.md b/en/components/charts/features/chart-performance.md index c3611f464f..5ea29e0c52 100644 --- a/en/components/charts/features/chart-performance.md +++ b/en/components/charts/features/chart-performance.md @@ -25,7 +25,6 @@ In High-Frequency scenario, the Angular Charts can render data items that are up github-src="charts/category-chart/high-frequency"> -
## Angular Chart with High-Volume @@ -38,7 +37,6 @@ In High-Volume scenario, the Angular Charts can render 1 million of data points github-src="charts/category-chart/high-volume"> -
## General Performance Guidelines @@ -62,25 +60,25 @@ this.CategoryChart.dataSource = FlattenDataSource.create(); this.FinancialChart.dataSource = FlattenDataSource.create(); export class FlattenDataSource { - public static create(): any[] { - const data: any[] = []; - data.push({ "Year": "1996", "USA": 148, "CHN": 110 }); - data.push({ "Year": "2000", "USA": 142, "CHN": 115 }); - return data; - } + public static create(): any[] { + const data: any[] = []; + data.push({ Year: "1996", USA: 148, CHN: 110 }); + data.push({ Year: "2000", USA: 142, CHN: 115 }); + return data; + } } // instead of this data structure: export class MultiDataSources { - public static create(): any[] { - const dataSource1: any[] = []; - dataSource1.push({ "Year": "1996", "Value": 148 }); - dataSource1.push({ "Year": "2000", "Value": 142 }); - const dataSource2: any[] = []; - dataSource2.push({ "Year": "1996", "Value": 110 }); - dataSource2.push({ "Year": "2000", "Value": 115 }); - const multipleSources: any[] = [dataSource1, dataSource2]; - return multipleSources; - } + public static create(): any[] { + const dataSource1: any[] = []; + dataSource1.push({ Year: "1996", Value: 148 }); + dataSource1.push({ Year: "2000", Value: 142 }); + const dataSource2: any[] = []; + dataSource2.push({ Year: "1996", Value: 110 }); + dataSource2.push({ Year: "2000", Value: 115 }); + const multipleSources: any[] = [dataSource1, dataSource2]; + return multipleSources; + } } ``` @@ -91,8 +89,8 @@ Angular [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite ```ts -this.Chart.includedProperties = [ "Year", "USA", "RUS" ]; -this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ]; +this.Chart.includedProperties = ["Year", "USA", "RUS"]; +this.Chart.excludedProperties = ["CHN", "FRN", "GER"]; ``` ## Chart Performance Guidelines @@ -104,13 +102,13 @@ Simpler chart types such as [Line Chart](../types/line-chart.md) have faster per The following table lists chart types in order from the fastest performance to slower performance in each group of charts: | Chart Group | Chart Type | -| :--------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Pie Charts | - [Pie Chart](../types/pie-chart.md)
- [Donut Chart](../types/donut-chart.md)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart) | -| Line Charts | - [Category Line Chart](../types/line-chart.md#angular-line-chart-example)
- [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Step Line Chart](../types/step-chart.md#angular-step-line-chart)
- [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
| +| Line Charts | - [Category Line Chart](../types/line-chart.md#angular-line-chart-example)
- [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Step Line Chart](../types/step-chart.md#angular-step-line-chart)
- [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
| | Area Charts | - [Category Area Chart](../types/area-chart.md#angular-area-chart-example)
- [Step Area Chart](../types/step-chart.md#angular-step-area-chart)
- [Range Area Chart](../types/area-chart.md#angular-range-area-chart)
- [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart)
| | Column Charts | - [Column Chart](../types/column-chart.md#angular-column-chart-example)
- [Bar Chart](../types/bar-chart.md#angular-bar-chart-example)
- [Waterfall Chart](../types/column-chart.md#angular-waterfall-chart)
- [Range Column Chart](../types/column-chart.md#angular-range-column-chart)
- [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) | | Spline Charts | - [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart)
| -| Point Charts | - [Category Point Chart](../types/point-chart.md)
- [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
| +| Point Charts | - [Category Point Chart](../types/point-chart.md)
- [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
| | Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md)
- [Stock Chart in Column Mode](../types/stock-chart.md)
- [Stock Chart in Bar Mode](../types/stock-chart.md)
- [Stock Chart in Candle Mode](../types/stock-chart.md)
- [Stock Chart with Overlays](../types/stock-chart.md)
- [Stock Chart with Zoom Pane](../types/stock-chart.md)
- [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane)
| | Scatter Charts | - [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart)
- [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*)
| | Radial Charts | - [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart)
- [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart)
| @@ -189,7 +187,7 @@ This code snippet shows how to ordinal/category x-axis in the [`IgxFinancialChar - + ``` @@ -208,8 +206,8 @@ This code snippet shows how to set axis major interval in the Angular charts. - - + + ``` @@ -224,15 +222,27 @@ In the same way as Markers, axis labels are also expensive because they use temp This code snippet shows how to hide axis labels in the Angular charts. ```html - + - + - - + + ``` @@ -248,7 +258,7 @@ This code snippet shows how to set axis title in the Angular charts. - + ``` @@ -259,13 +269,19 @@ At runtime, the Angular charts adjust extent of labels on y-axis based on a labe The following code snippet shows how to set a fixed extent for labels on y-axis in the Angular charts. ```html - + - + - - + + ``` @@ -275,20 +291,20 @@ Enabling additional axis visuals (e.g. axis titles) or changing their default va For example, changing these properties on the [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) or [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) control: -| Axis Visual | X-Axis Properties | Y-Axis Properties | -| :------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| All Axis Visual | [`xAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
[`xAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinorInterval) | [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisInterval)
[`yAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMinorInterval) | -| Axis Tickmarks | [`xAxisTickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStroke)
[`xAxisTickStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStrokeThickness)
[`xAxisTickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickLength)
| [`yAxisTickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStroke)
[`yAxisTickStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStrokeThickness)
[`yAxisTickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickLength)
| -| Axis Major Gridlines | [`xAxisMajorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStroke)
[`xAxisMajorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStrokeThickness)
| [`yAxisMajorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStroke)
[`yAxisMajorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStrokeThickness)
| -| Axis Minor Gridlines | [`xAxisMinorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStroke)
[`xAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStrokeThickness)
| [`yAxisMinorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStroke)
[`yAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStrokeThickness)
| -| Axis Main Line | [`xAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStroke)
[`xAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrokeThickness)
| [`yAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStroke)
[`yAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrokeThickness)
| -| Axis Titles | [`xAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitle)
[`xAxisTitleAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitleAngle)
| [`yAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle)
[`yAxisTitleAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitleAngle)
| -| Axis Strips | [`xAxisStrip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrip)
| [`yAxisStrip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrip)
| +| Axis Visual | X-Axis Properties | Y-Axis Properties | +| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| All Axis Visual | [`xAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
[`xAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinorInterval) | [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisInterval)
[`yAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMinorInterval) | +| Axis Tickmarks | [`xAxisTickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStroke)
[`xAxisTickStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStrokeThickness)
[`xAxisTickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickLength)
| [`yAxisTickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStroke)
[`yAxisTickStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStrokeThickness)
[`yAxisTickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickLength)
| +| Axis Major Gridlines | [`xAxisMajorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStroke)
[`xAxisMajorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStrokeThickness)
| [`yAxisMajorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStroke)
[`yAxisMajorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStrokeThickness)
| +| Axis Minor Gridlines | [`xAxisMinorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStroke)
[`xAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStrokeThickness)
| [`yAxisMinorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStroke)
[`yAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStrokeThickness)
| +| Axis Main Line | [`xAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStroke)
[`xAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrokeThickness)
| [`yAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStroke)
[`yAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrokeThickness)
| +| Axis Titles | [`xAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitle)
[`xAxisTitleAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitleAngle)
| [`yAxisTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle)
[`yAxisTitleAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitleAngle)
| +| Axis Strips | [`xAxisStrip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrip)
| [`yAxisStrip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrip)
| Or changing properties of an [`IgxAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html) in the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control: | Axis Visual | Axis Properties | -| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | All Axis Visuals | `Interval`, `MinorInterval` | | Axis Tickmarks | `TickStroke` , `TickStrokeThickness`, `TickLength` | | Axis Major Gridlines | `MajorStroke`, `MajorStrokeThickness` | @@ -335,7 +351,7 @@ Adding too many axis to the `Axes` collection of the [`IgxDataChartComponent`]({ Also, adding a lot of series to the [`IgxSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) collection of the Angular [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control will add overhead to rendering because each series has its own rendering canvas. This is especially important if you have more than 10 series in the Data Chart. We recommend combining multiple data sources into flatten data source (see [Data Structure](#data-structure) section) and then using conditional styling feature of the following series: | Slower Performance Scenario | Faster Scenario with Conditional Styling | -| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 10+ of [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) | Single [`IgxScatterLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html) | | 20+ of [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) | Single [`IgxScatterPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html) | | 10+ of [`IgxScatterLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html) | Single [`IgxScatterPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html) | diff --git a/en/components/charts/features/chart-tooltips.md b/en/components/charts/features/chart-tooltips.md index 8261d45777..beaee288b3 100644 --- a/en/components/charts/features/chart-tooltips.md +++ b/en/components/charts/features/chart-tooltips.md @@ -21,16 +21,15 @@ Angular Chart provide three types of tooltips that you can with tooltips enabled github-src="charts/category-chart/column-chart-with-tooltips"> -
The [`toolTipType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType) property is configurable and can be set to one of the following options: | Property Value | Description | -| :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------- | -| [`Default`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.tooltiptype.html#Default) Tooltip | Display a tooltip for a single item when the pointer is positioned over it. | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | +| [`Default`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.tooltiptype.html#Default) Tooltip | Display a tooltip for a single item when the pointer is positioned over it. | | [`Data`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.tooltiptype.html#Data) Tooltip | Display the data tooltips for all series in the chart. | -| [`Item`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.tooltiptype.html#Item) Tooltip | Display a tooltip for each data item in the category that the pointer is positioned over. | +| [`Item`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.tooltiptype.html#Item) Tooltip | Display a tooltip for each data item in the category that the pointer is positioned over. | | [`Category`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.tooltiptype.html#Category) Tooltip | Display a grouped tooltip for all data points in the category that the pointer is positioned over. |
@@ -49,7 +48,6 @@ This example shows how to create custom tooltips for all series in Angular [`Igx github-src="charts/category-chart/tooltip-template"> -
## Custom Tooltips in Data Chart @@ -62,7 +60,6 @@ This example shows how to create custom tooltips for each series in Angular Data github-src="charts/data-chart/tooltip-template"> -
## Additional Resources diff --git a/en/components/charts/features/chart-user-annotations.md b/en/components/charts/features/chart-user-annotations.md index 3e017673a5..7828e26816 100644 --- a/en/components/charts/features/chart-user-annotations.md +++ b/en/components/charts/features/chart-user-annotations.md @@ -18,7 +18,6 @@ This is directly integrated with the available tools of the [`IgxToolbarComponen github-src="charts/data-chart/user-annotation-layer"> - > [!Note] > This feature is designed to support X and Y axes and does not currently support radial or angular axes. @@ -41,7 +40,7 @@ When adding one of these user annotations via the `XamToolbar`, the [`IgxDataCha The table below details the different configurable properties on [`IgxUserAnnotationInformation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html): | Property | Type | Description | -| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`annotationData`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#annotationData) | `string` | This property allows additional information for the user annotation. This property is designed to be utilized with the `UserAnnotationToolTipContentUpdating` event to show additional information in the annotation's tooltip. | | [`annotationId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#annotationId) | `string` | This read-only property returns the unique string ID of the user annotation. | | [`badgeColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#badgeColor) | `string` | This property gets or sets the color to use for the badge in the user annotation. | diff --git a/en/components/charts/types/area-chart.md b/en/components/charts/types/area-chart.md index 12a1db7d82..547a6600ce 100644 --- a/en/components/charts/types/area-chart.md +++ b/en/components/charts/types/area-chart.md @@ -21,7 +21,6 @@ You can create Angular Category Area Chart in the [`IgxCategoryChartComponent`]( github-src="charts/category-chart/area-chart-multiple-sources"> -
## Area Chart Recommendations @@ -66,7 +65,6 @@ Angular Area Chart is often used to show the change of value over time such as t github-src="charts/category-chart/area-chart-single-source"> -
## Angular Area Chart with Multiple Series @@ -79,7 +77,6 @@ Similarly to how you can show multiple [Line Chart](line-chart.md) and [Spline C github-src="charts/category-chart/area-chart-multiple-sources"> -
## Angular Area Chart Styling @@ -92,7 +89,6 @@ Area charts often have semi-transparent fill for their areas, thicker li github-src="charts/category-chart/area-chart-styling"> -
## Advanced Types of Area Charts @@ -109,7 +105,6 @@ The Angular Step Area Chart belongs to a group of category charts and it is rend github-src="charts/category-chart/step-area-multiple-sources"> -
The following sections explain more advanced types of Angular Area Charts that can be created using the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control instead of [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control with simplified API. @@ -124,7 +119,6 @@ The Angular Range Area Chart allows you show the area as a range between two v github-src="charts/data-chart/range-area-chart"> -
## Angular Stacked Area Chart @@ -137,7 +131,6 @@ The Angular Stacked Area Chars is rendered using a collection of points connecte github-src="charts/data-chart/stacked-area-chart"> -
## Angular Stacked 100% Area Chart @@ -150,7 +143,6 @@ The Angular Stacked 100% Area Chart allows you represent your data as part of a github-src="charts/data-chart/stacked-100-area-chart"> -
## Angular Stacked Spline Area Chart @@ -163,7 +155,6 @@ The Angular Stacked Spline Area Chart is rendered using a collection of points c github-src="charts/data-chart/stacked-spline-area-chart"> -
## Angular Stacked 100% Spline Area Chart @@ -176,7 +167,6 @@ The Angular Stacked 100% Spline Area Chart is identical to the Stacked Spline Ar github-src="charts/data-chart/stacked-100-spline-area-chart"> -
## Angular Radial Area Chart @@ -189,7 +179,6 @@ The Angular Radial Area Chart belongs to a group of [Radial Chart](radial-chart. github-src="charts/data-chart/radial-area-chart"> -
## Angular Polar Area Chart @@ -202,7 +191,6 @@ The Angular Polar Area Chart belongs to a group of [Polar Chart](polar-chart.md) github-src="charts/data-chart/polar-area-chart"> -
## Angular Polar Spline Area Chart @@ -215,7 +203,6 @@ The Angular Polar Spline Area Chart belongs to a group of [Polar Chart](polar-ch github-src="charts/data-chart/polar-spline-area-chart"> -
## Additional Resources @@ -234,7 +221,7 @@ You can find more information about related chart types in these topics: The following table lists API members mentioned in above sections: | Chart Type | Control Name | API Members | -| :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Area | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = [`Area`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Area) | | Step Area | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = [`StepArea`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#StepArea) | | Range Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html) | diff --git a/en/components/charts/types/column-chart.md b/en/components/charts/types/column-chart.md index ff7288d5aa..25fcda618c 100644 --- a/en/components/charts/types/column-chart.md +++ b/en/components/charts/types/column-chart.md @@ -21,7 +21,6 @@ You can create Angular Column Chart in the [`IgxCategoryChartComponent`]({enviro github-src="charts/category-chart/column-chart-multiple-sources"> -
## Column Charts Recommendations @@ -62,7 +61,6 @@ You can create this type of chart in the [`IgxCategoryChartComponent`]({environm github-src="charts/category-chart/column-chart-single-source"> -
## Angular Column Chart with Multiple Series @@ -75,7 +73,6 @@ The Column Chart is able to render multiple columns per category for comparison github-src="charts/category-chart/column-chart-multiple-sources"> -
## Angular Column Chart Styling @@ -90,7 +87,6 @@ You can create this type of chart in the [`IgxCategoryChartComponent`]({environm github-src="charts/category-chart/column-chart-styling"> -
## Advanced Types of Column Charts @@ -109,7 +105,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/waterfall-chart"> -
## Angular Stacked Column Chart @@ -124,7 +119,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-column-chart"> -
## Angular Stacked 100% Column Chart @@ -139,7 +133,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-100-column-chart"> -
## Angular Range Column Chart @@ -156,7 +149,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/range-column-chart"> -
## Angular Radial Column Chart @@ -171,7 +163,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/radial-column-chart"> -
## Additional Resources @@ -188,7 +179,7 @@ You can find more information about related chart types in these topics: The following table lists API members mentioned in the above sections: | Chart Type | Control Name | API Members | -| :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Column | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = **Column** | | Radial Column | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRadialColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialcolumnseriescomponent.html) | | Range Column | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRangeColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html) | diff --git a/en/components/charts/types/data-pie-chart.md b/en/components/charts/types/data-pie-chart.md index e48aff8952..9e1c72f598 100644 --- a/en/components/charts/types/data-pie-chart.md +++ b/en/components/charts/types/data-pie-chart.md @@ -21,7 +21,6 @@ You can create the Angular Pie Chart in the [`IgxDataPieChartComponent`]({enviro github-src="charts/data-pie-chart/overview"> -
## Angular Data Pie Chart Recommendations @@ -73,7 +72,6 @@ Below is an example that demonstrates usage of the ItemLegend with the [`IgxData github-src="charts/data-pie-chart/legend"> -
## Angular Pie Chart Others Category @@ -113,7 +111,6 @@ The following sample demonstrates usage of the Others slice in the [`IgxDataPieC github-src="charts/data-pie-chart/others"> -
## Angular Data Pie Chart Selection @@ -146,7 +143,6 @@ The following sample demonstrates the selection feature of the [`IgxDataPieChart github-src="charts/data-pie-chart/selection"> -
## Angular Data Pie Chart Highlighting @@ -176,7 +172,6 @@ The following example demonstrates the mouse highlighting behaviors of the [`Igx github-src="charts/data-pie-chart/highlighting"> - In addition to the mouse highlighting, the [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a `HighlightedDataSource` for the control and by setting the [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) property to `Overlay`. The `HighlightedDataSource` expects a subset of the data assigned to the `DataSource` property of the [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html). When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control. @@ -189,7 +184,6 @@ The following example demonstrates highlight filtering. github-src="charts/data-pie-chart/highlight-filter"> -
## Angular Data Pie Chart Animation @@ -208,7 +202,6 @@ The following sample demonstrates the usage of animation in the [`IgxDataPieChar github-src="charts/data-pie-chart/animation-replay"> -
## Additional Resources @@ -228,6 +221,6 @@ The following table lists API members mentioned in the above sections: - [`selectionBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionBehavior) | Chart Type | Control Name | API Members | -| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Data Pie Chart | [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) | [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) | | Item Legend | [`IgxItemLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxitemlegendcomponent.html) | [`IgxItemLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxitemlegendcomponent.html) | diff --git a/en/components/charts/types/line-chart.md b/en/components/charts/types/line-chart.md index 1b2b8c40f9..88a786e629 100644 --- a/en/components/charts/types/line-chart.md +++ b/en/components/charts/types/line-chart.md @@ -21,7 +21,6 @@ You can create the Angular Line Chart in the [`IgxCategoryChartComponent`]({envi github-src="charts/category-chart/line-chart-multiple-sources"> -
## Line Chart Recommendations @@ -53,7 +52,7 @@ There are several common use cases for choosing a Line Chart: ### Line Chart Best Practices - Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. -- Order time-series data from left to right. +- Order time-series data from left to right. - Use visual attributes like solid lines to show a series of data. ### When Not to Use Line Chart @@ -81,7 +80,6 @@ You can create this type of chart in the [`IgxCategoryChartComponent`]({environm github-src="charts/category-chart/line-chart-single-source"> -
## Angular Line Chart with Multiple Series @@ -96,7 +94,6 @@ You can create this type of chart in the [`IgxCategoryChartComponent`]({environm github-src="charts/category-chart/line-chart-multiple-sources"> -
## Angular Line Chart with Live Data @@ -113,7 +110,6 @@ You can create this type of chart in the [`IgxCategoryChartComponent`]({environm github-src="charts/category-chart/high-frequency"> -
## Angular Styling Line Chart @@ -128,7 +124,6 @@ You can create this type of chart in the [`IgxCategoryChartComponent`]({environm github-src="charts/category-chart/line-chart-styling"> - You can also create a dashed line within the [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) by using the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) and setting the [`dashArray`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dashArray) property on the series. This property takes an array of numbers that will describe the length of the resulting dashes in the line. The following example demonstrates usage of the [`dashArray`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dashArray) in a [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) in [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html): @@ -139,7 +134,6 @@ The following example demonstrates usage of the [`dashArray`]({environment:dvApi github-src="charts/data-chart/dash-array-series"> -
## Advanced Types of Line Charts @@ -156,7 +150,6 @@ The Stacked Line Chart is often used to show the change of value over time such github-src="charts/data-chart/stacked-line-chart"> -
## Angular Stacked 100% Line Chart @@ -171,7 +164,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-100-line-chart"> -
## Angular Radial Line Chart @@ -186,7 +178,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/radial-line-chart"> -
## Angular Polar Line Chart @@ -201,7 +192,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/polar-line-chart"> -
## Additional Resources @@ -220,7 +210,7 @@ You can find more information about related chart types in these topics: The following table lists API members mentioned in the above sections: | Chart Type | Control Name | API Members | -| :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Line | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Line) | | Polar Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxPolarLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarlineseriescomponent.html) | | Radial Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRadialLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradiallineseriescomponent.html) | diff --git a/en/components/charts/types/pie-chart.md b/en/components/charts/types/pie-chart.md index ee72d949fc..827f9b6945 100644 --- a/en/components/charts/types/pie-chart.md +++ b/en/components/charts/types/pie-chart.md @@ -21,7 +21,6 @@ You can create the Angular Pie Chart in the [`IgxPieChartComponent`]({environmen github-src="charts/pie-chart/overview"> -
## Angular Pie Chart Recommendations @@ -79,7 +78,6 @@ Additionally you can use the [`legendItemTemplate`]({environment:dvApiBaseUrl}/p github-src="charts/pie-chart/legend"> -
## Angular Pie Chart Others Category @@ -96,7 +94,6 @@ If you set [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui- github-src="charts/pie-chart/others"> -
## Angular Pie Chart Explosion @@ -109,7 +106,6 @@ The pie chart supports explosion of individual pie slices as well as a `SliceCli github-src="charts/pie-chart/explosion"> -
## Angular Pie Chart Selection @@ -141,7 +137,6 @@ For scenarios where you click on the Others slice, the pie chart will return an github-src="charts/pie-chart/selection"> -
## Angular Pie Chart Animation @@ -156,7 +151,6 @@ In the code below, the radiusFactor is increasing the chart by 0.25% of the size github-src="charts/pie-chart/animation"> -
## Angular Pie Chart Styling @@ -169,7 +163,6 @@ Once our pie chart is created, we may want to make some further styling customiz github-src="charts/pie-chart/styling"> -
## Angular Radial Pie Chart @@ -182,7 +175,6 @@ The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a g github-src="charts/data-chart/radial-pie-chart"> -
## Additional Resources @@ -203,6 +195,6 @@ The following table lists API members mentioned in the above sections: - [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#selectionMode) | Chart Type | Control Name | API Members | -| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Pie Chart | [`IgxPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html) | `PieChart` | | Radial Pie Chart | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRadialPieSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html) | diff --git a/en/components/charts/types/scatter-chart.md b/en/components/charts/types/scatter-chart.md index 2516214e09..d0a09ff66b 100644 --- a/en/components/charts/types/scatter-chart.md +++ b/en/components/charts/types/scatter-chart.md @@ -21,7 +21,6 @@ Angular Scatter Marker Chart renders as a collection of markers, each having a p github-src="charts/data-chart/scatter-point-chart"> -
## Angular Scatter Line Chart @@ -34,7 +33,6 @@ Angular Scatter Line Chart renders as a collection of markers connected by a str github-src="charts/data-chart/scatter-line-chart"> -
## Angular Scatter Spline Chart @@ -47,7 +45,6 @@ Angular Scatter Spline Chart renders as a collection of markers connected by a c github-src="charts/data-chart/scatter-spline-chart"> -
## Angular Scatter High Density Chart @@ -60,7 +57,6 @@ Use the Angular Scatter High Density (HD) Chart to bind and show scatter data ra github-src="charts/data-chart/type-scatter-hd-series"> -
## Angular Scatter Area Chart @@ -73,7 +69,6 @@ Angular Scatter Area Chart draws a colored surface based on a triangulation of X github-src="charts/data-chart/type-scatter-area-series"> -
## Angular Scatter Contour Chart @@ -86,7 +81,6 @@ Angular Scatter Contour Chart draws colored contour lines based on a triangulati github-src="charts/data-chart/type-scatter-contour-series"> -
## Additional Resources @@ -104,7 +98,7 @@ You can find more information about related chart types in these topics: The following table lists API members mentioned in the above sections: | Chart Type | Control Name | API Members | -| :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Scatter Marker | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) | | Scatter Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html) | | Scatter Spline | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html) | diff --git a/en/components/charts/types/spline-chart.md b/en/components/charts/types/spline-chart.md index 9e4084daa7..3e5d952747 100644 --- a/en/components/charts/types/spline-chart.md +++ b/en/components/charts/types/spline-chart.md @@ -20,7 +20,6 @@ The following example shows how to create Angular Spline Chart in the [`IgxCateg github-src="charts/category-chart/spline-multiple-sources"> -
## Angular Spline Chart with Single Series @@ -35,7 +34,6 @@ You can create this type of chart in the [`IgxCategoryChartComponent`]({environm github-src="charts/category-chart/spline-single-source"> -
## Angular Spline Chart with Multiple Series @@ -50,7 +48,6 @@ You can create this type of chart in the [`IgxCategoryChartComponent`]({environm github-src="charts/category-chart/spline-multiple-sources"> -
## Angular Spline Chart Styling @@ -65,7 +62,6 @@ You can create this type of chart in the [`IgxCategoryChartComponent`]({environm github-src="charts/category-chart/spline-styling"> -
## Advanced Types of Spline Charts @@ -84,7 +80,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-spline-chart"> -
## Angular Stacked 100% Spline Chart @@ -99,7 +94,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-100-spline-chart"> -
## Additional Resources @@ -117,7 +111,7 @@ You can find more information about related chart types in these topics: The following table lists API members mentioned in the above sections: | Chart Type | Control Name | API Members | -| :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Spline | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = [`Spline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Spline) | | Stacked Spline | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html) | | Stacked 100% Spline | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100SplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html) | diff --git a/en/components/charts/types/stacked-chart.md b/en/components/charts/types/stacked-chart.md index e4a97151d8..018527fb1e 100644 --- a/en/components/charts/types/stacked-chart.md +++ b/en/components/charts/types/stacked-chart.md @@ -21,7 +21,6 @@ The following example, you can use the drop-down to switch between all of the di github-src="charts/data-chart/stacked-chart-types"> -
The following sections demonstrate individual types of Ignite UI for Angular Stacked Charts. @@ -38,7 +37,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-area-chart"> -
## Angular Stacked 100 Area Chart @@ -53,7 +51,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-100-area-chart"> -
## Angular Stacked Bar Chart @@ -70,7 +67,6 @@ In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels github-src="charts/data-chart/stacked-bar-chart"> -
## Angular Stacked 100% Bar Chart @@ -85,7 +81,6 @@ In this example of a Stacked 100% Bar Chart, the Energy Product values are shown github-src="charts/data-chart/stacked-100-bar-chart"> -
## Angular Stacked Column Chart @@ -100,7 +95,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-column-chart"> -
## Angular Stacked 100% Column Chart @@ -115,7 +109,6 @@ The example below shows a study made for online shopping traffic by departments github-src="charts/data-chart/stacked-100-column-chart"> -
## Angular Stacked Line Chart @@ -128,7 +121,6 @@ The Stacked Line Chart is often used to show the change of value over time such github-src="charts/data-chart/stacked-line-chart"> -
## Angular Stacked 100% Line Chart @@ -143,7 +135,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-100-line-chart"> -
## Angular Stacked Spline Area Chart @@ -158,7 +149,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-spline-area-chart"> -
## Angular Stacked 100% Spline Area Chart @@ -173,7 +163,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-100-spline-area-chart"> -
## Angular Stacked Spline Chart @@ -186,7 +175,6 @@ The Stacked Spline Chart is often used to show the change of value over time suc github-src="charts/data-chart/stacked-spline-chart"> -
## Angular Stacked 100% Spline Chart @@ -201,7 +189,6 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: github-src="charts/data-chart/stacked-100-spline-chart"> -
## Additional Resources @@ -219,7 +206,7 @@ You can find more information about related chart types in these topics: The following table lists API members mentioned in the above sections: | Chart Type | Control Name | API Members | -| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Stacked Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html) | | Stacked Bar | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html) | | Stacked Column | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html) | diff --git a/en/components/excel-library-using-worksheets.md b/en/components/excel-library-using-worksheets.md index e48d7f084e..d8b4b4129e 100644 --- a/en/components/excel-library-using-worksheets.md +++ b/en/components/excel-library-using-worksheets.md @@ -18,7 +18,6 @@ The Infragistics Angular Excel Engine's [`worksheet`]({environment:dvApiBaseUrl} github-src="excel/excel-library/operations-on-worksheets"> -
The following code shows the imports needed to use the code-snippets below: @@ -109,7 +108,7 @@ You can specify the region to apply the filter by using the [`setRegion`]({envir Below is a list of methods and their descriptions that you can use to add a filter to a worksheet: | Method | Description | -| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`applyAverageFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyAverageFilter) | Represents a filter which can filter data based on whether the data is below or above the average of the entire data range. | | [`applyDatePeriodFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyDatePeriodFilter) | Represents a filter which can filter dates in a Month, or quarter of any year. | | [`applyFillFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyFillFilter) | Represents a filter which will filter cells based on their background fills. This filter specifies a single CellFill. Cells of with this fill will be visible in the data range. All other cells will be hidden. | @@ -181,7 +180,12 @@ The following code snippet demonstrates how to apply a sort to a region of cells var workbook = new Workbook(WorkbookFormat.Excel2007); var worksheet = workbook.worksheets().add("Sheet1"); -worksheet.sortSettings.sortConditions().addItem(new RelativeIndex(0), new OrderedSortCondition(SortDirection.Ascending)); +worksheet.sortSettings + .sortConditions() + .addItem( + new RelativeIndex(0), + new OrderedSortCondition(SortDirection.Ascending), + ); ``` ## Worksheet Protection @@ -229,7 +233,9 @@ var worksheet = workbook.worksheets().add("Sheet1"); var color = new Color(); color.colorString = "Red"; -var format = worksheet.conditionalFormats().addAverageCondition("A1:A10", FormatConditionAboveBelow.AboveAverage); +var format = worksheet + .conditionalFormats() + .addAverageCondition("A1:A10", FormatConditionAboveBelow.AboveAverage); format.cellFormat.font.colorInfo = new WorkbookColorInfo(color); ``` diff --git a/en/components/general-changelog-dv.md b/en/components/general-changelog-dv.md index 3417f27aee..8e6cd37fa1 100644 --- a/en/components/general-changelog-dv.md +++ b/en/components/general-changelog-dv.md @@ -21,7 +21,7 @@ All notable changes for each version of Ignite UI for Angular are documented on ### Bug Fixes | Bug Number | Control | Description | -| :--------- | :------------------ | :-------------------------------------------------------------------------------------------------- | +| ---------- | ------------------- | --------------------------------------------------------------------------------------------------- | | 2189 | IgxDataChart | DataChart skips rendering axis when there are no labels | | 3055 | IgxDataPieChart | added missing styling properties for the Others Slice | | 38668 | IgxDataTooltipLayer | TitleTextColor is overridden when chart's TitleTextColor is used | @@ -47,7 +47,7 @@ Added OthersCategoryBrush and OthersCategoryOutline to DataPieChart and Proporti ### Bug Fixes | Bug Number | Control | Description | -| :--------- | :----------- | :------------------------------------------------------------------------ | +| ---------- | ------------ | ------------------------------------------------------------------------- | | 33808 | IgxDataChart | The scale set for IntervalType Ticks in TimeAxisInterval is not displayed | | 34255 | IgxDataChart | 0.00001 scale tick marks are displayed overlapping each other | | 38510 | IgxDataChart | AssigningCategoryStyle event support for Stacked Series | @@ -87,7 +87,7 @@ Ability for axis annotations to automatically detect collisions and truncate to ### Bug Fixes | Bug Number | Control | Description | -| :--------- | :------------- | :--------------------------------------------------------------------------------------------------------- | +| ---------- | -------------- | ---------------------------------------------------------------------------------------------------------- | | 40136 | Excel Library | FormulaParseException exception when loading an Excel workbook | | 40262 | IgxSpreadsheet | #Circularity! is displayed when there are warnings. Request to match Excel - display a value eg. 0 instead | | 40458 | IgxSpreadsheet | When using Arial font, the igx-spreadsheet cuts off text in the cells | @@ -155,7 +155,7 @@ There is a new property called [`useInsetOutlines`]({environment:dvApiBaseUrl}/p ### Bug Fixes | Bug Number | Control | Description | -| :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 31624 | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | Resizing the containing window of the [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) causes the chart to fail to render the series | | 27304 | `DataChart` | Zoom rectangle is not positioned the same as the background rectangle | | 37930 | `DataChart` | Data Annotation Overlay Text Color not working | @@ -168,7 +168,7 @@ There is a new property called [`useInsetOutlines`]({environment:dvApiBaseUrl}/p ### Bug Fixes | Bug Number | Control | Description | -| :--------- | :------------ | :----------------------------------------------------------------- | +| ---------- | ------------- | ------------------------------------------------------------------ | | 36448 | `RadialGauge` | Radial label format properties do not work. (eg. Title, SubTitles) | ### igniteui-angular-charts (Charts) @@ -230,7 +230,7 @@ There is a new property called [`useInsetOutlines`]({environment:dvApiBaseUrl}/p ### Bug Fixes | Bug Number | Control | Description | -| :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------- | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | | 37023 | `DataChart` | Tooltips are cut-off/offscreen if overflow hidden is set. | | 37685 | [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) | Poor rendering of numbers formatted with Arial font. | | 37244 | Excel Library | Custom Data Validation is not working. | @@ -250,7 +250,7 @@ There is a new property called [`useInsetOutlines`]({environment:dvApiBaseUrl}/p The following table lists the bug fixes made for the Ignite UI for Angular toolset for this release: | Bug Number | Control | Description | -| :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------- | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | 30286 | `DataChart` | Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble | | 32906 | `DataChart` | `DataChart` is showing two xAxis on the top | | 33605 | `DataChart` | ScatterLineSeries is not showing the color of the line correctly in the legend | @@ -285,17 +285,16 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools - [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html), to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph. - [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) - - New ToolActionCheckboxList - A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed. - Requires IgxCheckboxListModule to be registered. + A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed. + Requires IgxCheckboxListModule to be registered. - New Filtering Support - Axis Field Changes - New default IconMenu in Toolbar when targeting CategoryChart. - Label fields are mapped to the X-axis and Value fields are mapped to the Y-axis. - Target chart reacts in realtime to changes made. IconMenu is hidden when chart has no ItemsSource set. + New default IconMenu in Toolbar when targeting CategoryChart. + Label fields are mapped to the X-axis and Value fields are mapped to the Y-axis. + Target chart reacts in realtime to changes made. IconMenu is hidden when chart has no ItemsSource set. ## **18.0.0 (June 2024)** @@ -305,7 +304,7 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools - [Data Legend Grouping](charts/features/chart-data-legend.md#angular-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#angular-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the [`dataLegendGroup`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dataLegendGroup) property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. -- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and [`selectedSeriesItems`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectedSeriesItems) are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. +- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and [`selectedSeriesItems`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectedSeriesItems) are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. - [Treemap Highlighting](charts/types/treemap-chart.md#angular-treemap-highlighting) - Now exposes a [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingMode) property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the [`highlightingTransitionDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingTransitionDuration) property. @@ -326,7 +325,7 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools - `XamRadialChart` - New Label Mode - The [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) for the now exposes a [`labelMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html#labelMode) property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. + The [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) for the now exposes a [`labelMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html#labelMode) property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. ### igniteui-angular-gauges @@ -459,7 +458,7 @@ This release introduces a few improvements and simplifications to visual design - Changed color palette of series and markers displayed in all charts to improve accessibility | Old brushes/outlines | New outline/brushes | -| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | #8BDC5C
#8B5BB1
#6DB1FF
#F8A15F
#EE5879
#735656
#F7D262
#8CE7D9
#E051A9
#A8A8B7 | #8BDC5C
#8961A9
#6DB1FF
#82E9D9
#EA3C63
#735656
#F8CE4F
#A8A8B7
#E051A9
#FF903B
|
@@ -502,13 +501,13 @@ This release introduces several new and improved visual design and configuration - Redesigned color palette of series and markers: | Old brushes/outlines | New outline/brushes | -| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | #7446B9
#9FB328
#F96232
#2E9CA6
#DC3F76
#FF9800
#3F51B5
#439C47
#795548
#9A9A9A | #8bdc5c
#8b5bb1
#6db1ff
#f8a15f
#ee5879
#735656
#f7d262
#8ce7d9
#e051a9
#a8a8b7
| for example: | | | -| :------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | +| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | | chartDefaults1 | chartDefaults2 | | chartDefaults3 | chartDefaults4 | @@ -539,11 +538,11 @@ Import statements have been simplified to use just package names instead of full > These breaking changes were introduce in these packages and components only: | Affected Packages | Affected Components | -| :----------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------- | +| ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | | igniteui-angular-excel | [Excel Library](excel-library.md) | | igniteui-angular-spreadsheet | [Spreadsheet](spreadsheet-overview.md) | | igniteui-angular-maps | [Geo Map](geo-map.md), [Treemap](charts/types/treemap-chart.md) | -| igniteui-angular-gauges | [Bullet Graph](bullet-graph.md), [Linear Gauge](linear-gauge.md), [Radial Gauge](radial-gauge.md) | +| igniteui-angular-gauges | [Bullet Graph](bullet-graph.md), [Linear Gauge](linear-gauge.md), [Radial Gauge](radial-gauge.md) | | igniteui-angular-charts | Category Chart, Data Chart, Donut Chart, Financial Chart, Pie Chart, [Zoom Slider](zoomslider-overview.md) | | igniteui-angular-core | all classes and enums | @@ -558,10 +557,10 @@ Please also note that the name of the Data Grid component and its corresponding import { IgxLinearGauge } from "igniteui-angular-gauges"; import { IgxLinearGaugeModule } from "igniteui-angular-gauges"; import { IgxLinearGraphRange } from "igniteui-angular-gauges"; -import { IgxRadialGauge } from 'igniteui-angular-gauges}'; -import { IgxRadialGaugeModule } from 'igniteui-angular-gauges'; -import { IgxRadialGaugeRange } from 'igniteui-angular-gauges'; -import { SweepDirection } from 'igniteui-angular-core'; +import { IgxRadialGauge } from "igniteui-angular-gauges}"; +import { IgxRadialGaugeModule } from "igniteui-angular-gauges"; +import { IgxRadialGaugeRange } from "igniteui-angular-gauges"; +import { SweepDirection } from "igniteui-angular-core"; // charts: import { IgxFinancialChartComponent } from "igniteui-angular-charts"; import { IgxFinancialChartModule } from "igniteui-angular-charts"; @@ -578,9 +577,9 @@ Before, you had to import using full paths to API classes and enums: ```ts // gauges: -import { IgxLinearGaugeComponent } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-component'; -import { IgxLinearGaugeModule } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-module'; -import { IgxLinearGraphRange } from 'igniteui-angular-gauges/ES5/igx-linear-graph-range'; +import { IgxLinearGaugeComponent } from "igniteui-angular-gauges/ES5/igx-linear-gauge-component"; +import { IgxLinearGaugeModule } from "igniteui-angular-gauges/ES5/igx-linear-gauge-module"; +import { IgxLinearGraphRange } from "igniteui-angular-gauges/ES5/igx-linear-graph-range"; import { IgxRadialGaugeComponent } from "igniteui-angular-gauges/ES5/igx-radial-gauge-component"; import { IgxRadialGaugeModule } from "igniteui-angular-gauges/ES5/igx-radial-gauge-module"; diff --git a/en/components/geo-map-binding-data-model.md b/en/components/geo-map-binding-data-model.md index aaab385118..883d5cb48b 100644 --- a/en/components/geo-map-binding-data-model.md +++ b/en/components/geo-map-binding-data-model.md @@ -19,13 +19,12 @@ The Ignite UI for Angular map component is designed to display geo-spatial data github-src="maps/geo-map/binding-data-model"> -
The following table summarized data structures required for each type of geographic series: | Geographic Series | Properties | Description | -| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) | [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates | | [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) | [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates | | [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) | [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#latitudeMemberPath), [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols | @@ -39,129 +38,190 @@ The following table summarized data structures required for each type of geograp The following code shows how to bind the [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) to a custom data model that contains geographic locations of some cities of the world stored using longitude and latitude coordinates. Also, we use the [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) to plot shortest geographic path between these locations using the [WorldUtility](geo-map-resources-world-util.md) ```html -
- - +
+ +
-
- - {{item.country}} - -
+
+ {{item.country}} +
-
- - Departure: {{item.origin.country}} - -
- - Arrival: {{item.dest.country}} - -
+
+ + Departure: {{item.origin.country}} + +
+ Arrival: {{item.dest.country}} +
``` ```ts -import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; -import { MarkerType } from 'igniteui-angular-charts'; -import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { + AfterViewInit, + Component, + TemplateRef, + ViewChild, +} from "@angular/core"; +import { MarkerType } from "igniteui-angular-charts"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps"; -import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps'; +import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps"; import { WorldUtils } from "../../utilities/WorldUtils"; @Component({ selector: "app-map-binding-geographic-data-models", styleUrls: ["./map-binding-geographic-data-models.component.scss"], - templateUrl: "./map-binding-geographic-data-models.component.html" + templateUrl: "./map-binding-geographic-data-models.component.html", }) - export class MapBindingDataModelComponent implements AfterViewInit { - - @ViewChild ("map") - public map: IgxGeographicMapComponent; - @ViewChild("pointSeriesTemplate") - public pointSeriesTemplate: TemplateRef; - @ViewChild("polylineSeriesTooltipTemplate") - public polylineSeriesTooltipTemplate: TemplateRef; - public flights: any[]; - constructor() { - } - - public ngAfterViewInit(): void { - const cityDAL = { lat: 32.763, lon: -96.663, country: "US", name: "Dallas" }; - const citySYD = { lat: -33.889, lon: 151.028, country: "Australia", name: "Sydney" }; - const cityNZL = { lat: -36.848, lon: 174.763, country: "New Zealand", name: "Auckland" }; - const cityQTR = { lat: 25.285, lon: 51.531, country: "Qatar", name: "Doha" }; - const cityPAN = { lat: 8.949, lon: -79.400, country: "Panama", name: "Panama" }; - const cityCHL = { lat: -33.475, lon: -70.647, country: "Chile", name: "Santiago" }; - const cityJAP = { lat: 35.683, lon: 139.809, country: "Japan", name: "Tokyo" }; - const cityALT = { lat: 33.795, lon: -84.349, country: "US", name: "Atlanta" }; - const cityJOH = { lat: -26.178, lon: 28.004, country: "South Africa", name: "Johannesburg" }; - const cityNYC = { lat: 40.750, lon: -74.0999, country: "US", name: "New York" }; - const citySNG = { lat: 1.229, lon: 104.177, country: "Singapore", name: "Singapore" }; - const cityMOS = { lat: 55.750, lon: 37.700, country: "Russia", name: "Moscow" }; - const cityROM = { lat: 41.880, lon: 12.520, country: "Italy", name: "Roma" }; - const cityLAX = { lat: 34.000, lon: -118.25, country: "US", name: "Los Angeles" }; - - this.flights = [ - { origin: cityDAL, dest: citySNG, color: "Green" }, - { origin: cityMOS, dest: cityNZL, color: "Red" }, - { origin: cityCHL, dest: cityJAP, color: "Blue" }, - { origin: cityPAN, dest: cityROM, color: "Orange" }, - { origin: cityALT, dest: cityJOH, color: "Black" }, - { origin: cityNYC, dest: cityQTR, color: "Purple" }, - { origin: cityLAX, dest: citySYD, color: "Gray" } - ]; - - for (const flight of this.flights) { - this.createPolylineSeries(flight); - this.createSymbolSeries(flight); - } - } - - public createSymbolSeries(flight: any) { - const geoLocations = [flight.origin, flight.dest ]; - const symbolSeries = new IgxGeographicSymbolSeriesComponent (); - symbolSeries.dataSource = geoLocations; - symbolSeries.markerType = MarkerType.Circle; - symbolSeries.latitudeMemberPath = "lat"; - symbolSeries.longitudeMemberPath = "lon"; - symbolSeries.markerBrush = "White"; - symbolSeries.markerOutline = flight.color; - symbolSeries.thickness = 1; - symbolSeries.tooltipTemplate = this.pointSeriesTemplate; - - this.map.series.add(symbolSeries); - } - - public createPolylineSeries(flight: any) { - const geoPath = WorldUtils.calcPaths(flight.origin, flight.dest); - const geoDistance = WorldUtils.calcDistance(flight.origin, flight.dest); - const geoRoutes = [ - { - dest: flight.dest, - distance: geoDistance, - origin: flight.origin, - points: geoPath, - time: geoDistance / 850 - }]; - - const lineSeries = new IgxGeographicPolylineSeriesComponent (); - lineSeries.dataSource = geoRoutes; - lineSeries.shapeMemberPath = "points"; - lineSeries.shapeStrokeThickness = 9; - lineSeries.shapeOpacity = 0.5; - lineSeries.shapeStroke = flight.color; - lineSeries.tooltipTemplate = this.polylineSeriesTooltipTemplate; - this.map.series.add(lineSeries); + @ViewChild("map") + public map: IgxGeographicMapComponent; + @ViewChild("pointSeriesTemplate") + public pointSeriesTemplate: TemplateRef; + @ViewChild("polylineSeriesTooltipTemplate") + public polylineSeriesTooltipTemplate: TemplateRef; + public flights: any[]; + constructor() {} + + public ngAfterViewInit(): void { + const cityDAL = { + lat: 32.763, + lon: -96.663, + country: "US", + name: "Dallas", + }; + const citySYD = { + lat: -33.889, + lon: 151.028, + country: "Australia", + name: "Sydney", + }; + const cityNZL = { + lat: -36.848, + lon: 174.763, + country: "New Zealand", + name: "Auckland", + }; + const cityQTR = { + lat: 25.285, + lon: 51.531, + country: "Qatar", + name: "Doha", + }; + const cityPAN = { + lat: 8.949, + lon: -79.4, + country: "Panama", + name: "Panama", + }; + const cityCHL = { + lat: -33.475, + lon: -70.647, + country: "Chile", + name: "Santiago", + }; + const cityJAP = { + lat: 35.683, + lon: 139.809, + country: "Japan", + name: "Tokyo", + }; + const cityALT = { + lat: 33.795, + lon: -84.349, + country: "US", + name: "Atlanta", + }; + const cityJOH = { + lat: -26.178, + lon: 28.004, + country: "South Africa", + name: "Johannesburg", + }; + const cityNYC = { + lat: 40.75, + lon: -74.0999, + country: "US", + name: "New York", + }; + const citySNG = { + lat: 1.229, + lon: 104.177, + country: "Singapore", + name: "Singapore", + }; + const cityMOS = { + lat: 55.75, + lon: 37.7, + country: "Russia", + name: "Moscow", + }; + const cityROM = { lat: 41.88, lon: 12.52, country: "Italy", name: "Roma" }; + const cityLAX = { + lat: 34.0, + lon: -118.25, + country: "US", + name: "Los Angeles", + }; + + this.flights = [ + { origin: cityDAL, dest: citySNG, color: "Green" }, + { origin: cityMOS, dest: cityNZL, color: "Red" }, + { origin: cityCHL, dest: cityJAP, color: "Blue" }, + { origin: cityPAN, dest: cityROM, color: "Orange" }, + { origin: cityALT, dest: cityJOH, color: "Black" }, + { origin: cityNYC, dest: cityQTR, color: "Purple" }, + { origin: cityLAX, dest: citySYD, color: "Gray" }, + ]; + + for (const flight of this.flights) { + this.createPolylineSeries(flight); + this.createSymbolSeries(flight); } + } + + public createSymbolSeries(flight: any) { + const geoLocations = [flight.origin, flight.dest]; + const symbolSeries = new IgxGeographicSymbolSeriesComponent(); + symbolSeries.dataSource = geoLocations; + symbolSeries.markerType = MarkerType.Circle; + symbolSeries.latitudeMemberPath = "lat"; + symbolSeries.longitudeMemberPath = "lon"; + symbolSeries.markerBrush = "White"; + symbolSeries.markerOutline = flight.color; + symbolSeries.thickness = 1; + symbolSeries.tooltipTemplate = this.pointSeriesTemplate; + + this.map.series.add(symbolSeries); + } + + public createPolylineSeries(flight: any) { + const geoPath = WorldUtils.calcPaths(flight.origin, flight.dest); + const geoDistance = WorldUtils.calcDistance(flight.origin, flight.dest); + const geoRoutes = [ + { + dest: flight.dest, + distance: geoDistance, + origin: flight.origin, + points: geoPath, + time: geoDistance / 850, + }, + ]; + + const lineSeries = new IgxGeographicPolylineSeriesComponent(); + lineSeries.dataSource = geoRoutes; + lineSeries.shapeMemberPath = "points"; + lineSeries.shapeStrokeThickness = 9; + lineSeries.shapeOpacity = 0.5; + lineSeries.shapeStroke = flight.color; + lineSeries.tooltipTemplate = this.polylineSeriesTooltipTemplate; + this.map.series.add(lineSeries); + } } ``` diff --git a/en/components/geo-map-binding-shp-file.md b/en/components/geo-map-binding-shp-file.md index 6ba7eb57df..02e37cbdad 100644 --- a/en/components/geo-map-binding-shp-file.md +++ b/en/components/geo-map-binding-shp-file.md @@ -18,13 +18,12 @@ The Ignite UI for Angular map component, the [`IgxShapeDataSource`]({environment github-src="maps/geo-map/binding-shp-polylines"> -
The following table explains properties of the [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) class for loading shape files. | Property | Type | Description | -| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----- | :------------------------------------------------------------------------------------------------------- | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------- | | [`shapefileSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html#shapefileSource) | string | Specifies the Uri to a shape file (.shp) that contains geo-spatial data items. | | [`databaseSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html#databaseSource) | string | Specifies the Uri to a shape database file (.dbf) that contains a data table for geo-spatial data items. | @@ -45,7 +44,7 @@ In the map component, Geographic Series are used for displaying geo-spatial data The [`IgxShapefileRecord`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapefilerecord.html) class provides properties for storing geo-spatial data, listed in the following table. | Property | Description | -| :------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `Points` | Contains all the points in one geo-spatial shape loaded from a shape file (.shp). For example, the country of Japan in shape file would be represented as a list of a list of points object, where:
  • The first list of points describes shape of Hokkaido island
  • The second list of points describes shape of Honshu island
  • The third list of points describes shape of Kyushu island
  • The fourth list of points describes shape of Shikoku island
| | `Fields` | Contains a row of data from the shape database file (.dbf) keyed by a column name. For example, a data about county of Japan which includes population, area, name of a capital, etc. | @@ -57,83 +56,80 @@ This code example assumes that shape files were loaded using the [`IgxShapeDataS The following code binds [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) in the map component to the [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) and maps the `Points` property of all [`IgxShapefileRecord`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapefilerecord.html) objects. ```html -
- - +
+ +
-
- - Airline: {{item.name}} - -
- - Length: {{item.distance}} miles - -
+
+ Airline: {{item.name}} +
+ Length: {{item.distance}} miles +
``` ```ts -import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; -import { IgxShapeDataSource } from 'igniteui-angular-core'; -import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; -import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; +import { + AfterViewInit, + Component, + TemplateRef, + ViewChild, +} from "@angular/core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps"; @Component({ selector: "app-map-binding-shape-files", styleUrls: ["./map-binding-shape-files.component.scss"], - templateUrl: "./map-binding-shape-files.component.html" + templateUrl: "./map-binding-shape-files.component.html", }) export class MapBindingShapefilePolylinesComponent implements AfterViewInit { + @ViewChild("map") + public map: IgxGeographicMapComponent; - @ViewChild ("map") - public map: IgxGeographicMapComponent; - - @ViewChild("template") - public tooltipTemplate: TemplateRef; - constructor() { } + @ViewChild("template") + public tooltipTemplate: TemplateRef; + constructor() {} - public ngAfterViewInit() { + public ngAfterViewInit() { // loading a shapefile with geographic polygons const sds = new IgxShapeDataSource(); sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); sds.shapefileSource = "assets/Shapes/WorldCableRoutes.shp"; - sds.databaseSource = "assets/Shapes/WorldCableRoutes.dbf"; + sds.databaseSource = "assets/Shapes/WorldCableRoutes.dbf"; sds.dataBind(); + } + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + const geoPolylines: any[] = []; + // parsing shapefile data and creating geo-polygons + for (const record of shapeRecords) { + // using field/column names from .DBF file + const route = { + capacity: record.fieldValues["CapacityG"], + distance: record.fieldValues["DistanceKM"], + isActive: record.fieldValues["NotLive"] !== 0, + isOverLand: record.fieldValues["OverLand"] === 0, + name: record.fieldValues["Name"], + points: record.points, + service: record.fieldValues["InService"], + }; + geoPolylines.push(route); } - public onDataLoaded(sds: IgxShapeDataSource, e: any) { - const shapeRecords = sds.getPointData(); - const geoPolylines: any[] = []; - // parsing shapefile data and creating geo-polygons - for (const record of shapeRecords) { - // using field/column names from .DBF file - const route = { - capacity: record.fieldValues["CapacityG"], - distance: record.fieldValues["DistanceKM"], - isActive: record.fieldValues["NotLive"] !== 0, - isOverLand: record.fieldValues["OverLand"] === 0, - name: record.fieldValues["Name"], - points: record.points, - service: record.fieldValues["InService"] - }; - geoPolylines.push(route); - } - - const geoSeries = new IgxGeographicPolylineSeriesComponent(); - geoSeries.dataSource = geoPolylines; - geoSeries.shapeMemberPath = "points"; - geoSeries.shapeFilterResolution = 0.0; - geoSeries.shapeStrokeThickness = 3; - geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)"; - geoSeries.tooltipTemplate = this.tooltipTemplate; - - this.map.series.add(geoSeries); - } + + const geoSeries = new IgxGeographicPolylineSeriesComponent(); + geoSeries.dataSource = geoPolylines; + geoSeries.shapeMemberPath = "points"; + geoSeries.shapeFilterResolution = 0.0; + geoSeries.shapeStrokeThickness = 3; + geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)"; + geoSeries.tooltipTemplate = this.tooltipTemplate; + + this.map.series.add(geoSeries); + } } ``` diff --git a/en/components/geo-map-display-azure-imagery.md b/en/components/geo-map-display-azure-imagery.md index afe3150f4f..ce8dcd6095 100644 --- a/en/components/geo-map-display-azure-imagery.md +++ b/en/components/geo-map-display-azure-imagery.md @@ -22,22 +22,18 @@ The Angular [`IgxAzureMapsImagery`]({environment:dvApiBaseUrl}/products/ignite-u github-src="maps/geo-map/display-azure-imagery"> - ## Angular Displaying Imagery from Azure Maps - Code Example The following code snippet shows how to display geographic imagery tiles from Azure Maps in Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using [`IgxAzureMapsImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) class. ```html - + ``` ```ts -import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; -import { IgxAzureMapsImagery } from 'igniteui-angular-maps'; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxAzureMapsImagery } from "igniteui-angular-maps"; // ... const tileSource = new IgxAzureMapsImagery(); tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY"; @@ -78,8 +74,9 @@ The following code snippet shows how to display geographic imagery tiles on top ```ts export class AppComponent implements AfterViewInit { - @ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent; - @ViewChild('tileSeries', { static: true }) public tileSeries!: IgxGeographicTileSeriesComponent; + @ViewChild("map", { static: true }) public map!: IgxGeographicMapComponent; + @ViewChild("tileSeries", { static: true }) + public tileSeries!: IgxGeographicTileSeriesComponent; public azureImagery!: IgxAzureMapsImagery; public azureKey: string = ""; @@ -105,7 +102,7 @@ export class AppComponent implements AfterViewInit { The following table summarizes properties of the [`IgxAzureMapsImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) class: | Property Name | Property Type | Description | -| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`apiKey`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#apiKey) | string | Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website. | | [`imageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#imageryStyle) | [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) | Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) enumeration values:
  • Satellite - Specifies the Satellite map style without road or labels overlay
  • Road - Specifies the Aerial map style with road and labels overlay
  • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
  • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
  • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
  • HybridRoadOverlay - Satellite background combined with road and label overlays
  • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
  • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
  • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
  • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
  • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
  • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
  • TrafficRelativeDarkOverlay - Displays traffic speeds relative to normal conditions over a dark basemap for enhanced contrast
  • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
  • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
| diff --git a/en/components/geo-map-display-bing-imagery.md b/en/components/geo-map-display-bing-imagery.md index 7c1c064cc3..0fa9822779 100644 --- a/en/components/geo-map-display-bing-imagery.md +++ b/en/components/geo-map-display-bing-imagery.md @@ -29,16 +29,13 @@ The Angular [`IgxBingMapsMapImagery`]({environment:dvApiBaseUrl}/products/ignite The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using [`IgxBingMapsMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) class. ```html - + ``` ```ts -import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; -import { IgxBingMapsMapImagery } from 'igniteui-angular-maps'; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxBingMapsMapImagery } from "igniteui-angular-maps"; // ... const tileSource = new IgxBingMapsMapImagery(); tileSource.apiKey = "YOUR_BING_MAPS_API_KEY"; @@ -50,9 +47,9 @@ tileSource.imageryStyle = BingMapsImageryStyle.Road; let tileUri = tileSource.actualBingImageryRestUri; const isHttpSecured = window.location.toString().startsWith("https:"); if (isHttpSecured) { - tileUri = tileUri.replace("http:", "https:"); + tileUri = tileUri.replace("http:", "https:"); } else { - tileUri = tileUri.replace("https:", "http:"); + tileUri = tileUri.replace("https:", "http:"); } tileSource.bingImageryRestUri = tileUri; @@ -64,7 +61,7 @@ this.map.backgroundContent = tileSource; The following table summarized properties of the [`IgxBingMapsMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) class: | Property Name | Property Type | Description | -| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`apiKey`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#apiKey) | string | Represents the property for setting an API key required for the Bing Maps imagery service. You must obtain this key from the www.bingmapsportal.com website. | | [`imageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#imageryStyle) | [`BingMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.bingmapsimagerystyle.html) | Represents the property for setting the Bing Maps imagery tiles map style. This property can be set to the following [`BingMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.bingmapsimagerystyle.html) enumeration values:
  • Aerial - Specifies the Aerial map style without road or labels overlay
  • AerialWithLabels - Specifies the Aerial map style with road and labels overlay
  • Road - Specifies the Roads map style without Aerial overlay
| | [`bingImageryRestUri`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#bingImageryRestUri) | string | Represents the property for setting the Bing Imagery REST URI specifying where the TilePath and SubDomains will come from. This is an optional property, and if not specified it will use the default REST URI. | diff --git a/en/components/geo-map-navigation.md b/en/components/geo-map-navigation.md index 51f759a258..e67e4aae76 100644 --- a/en/components/geo-map-navigation.md +++ b/en/components/geo-map-navigation.md @@ -18,7 +18,6 @@ Navigation in the [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/produ github-src="maps/geo-map/navigation"> -
## Geographic Coordinates @@ -44,7 +43,7 @@ This code snippet shows how navigate the map using relative window coordinates: The following table summarizes properties that can be used in navigation of the [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) control: | Property Name | Property Type | Description | -| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [`windowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) | Rect | Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window. | | [`windowScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#windowScale) | number | Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the [`windowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) property | | [`windowPositionHorizontal`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowPositionHorizontal) | number | Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`windowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) property. | diff --git a/en/components/geo-map-shape-files-reference.md b/en/components/geo-map-shape-files-reference.md index b3f1f58d23..25cf4d321b 100644 --- a/en/components/geo-map-shape-files-reference.md +++ b/en/components/geo-map-shape-files-reference.md @@ -34,12 +34,12 @@ Before plotting geo-spatial data in the control, one should get familiar with th ## Shape Files Format -The Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) control uses popular [Shape Files](http://en.wikipedia.org/wiki/Shapefile#Overview) format as one of the sources for geo-spatial data. Shape files are usually shipped with other file types, generally files with **.shp**, **.shx**, and **.dbf** extensions. +The Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) control uses popular [Shape Files](http://en.wikipedia.org/wiki/Shapefile#Overview) format as one of the sources for geo-spatial data. Shape files are usually shipped with other file types, generally files with **.shp**, **.shx**, and **.dbf** extensions. The following table provides basic information and purpose for each type of shape files. | File Extension | Description | -| :------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `.shp` | A shape file contains geo-spatial vector data items that describe points, polylines, and polygons. In this file, points may describe cities, polylines may describe roads, and polygons may describe shapes/borders of countries in geographic context. | | `.shx` | A shape index file contains an index for a quick lookup of a geo-spatial vector data items. | | `.dbf` | A shape database file contains a table in which a row corresponds to each geo-spatial data item from a shape (.shp) file. In the shape database file, string columns may describe attributes for geo-spatial data item such as strings (names of countries, regions, cities) and numeric columns (population of countries, location of cities). | diff --git a/en/components/geo-map-type-scatter-area-series.md b/en/components/geo-map-type-scatter-area-series.md index b7108ebcbd..17a200270b 100644 --- a/en/components/geo-map-type-scatter-area-series.md +++ b/en/components/geo-map-type-scatter-area-series.md @@ -18,7 +18,6 @@ In Angular map component, you can use the [`IgxGeographicScatterAreaSeriesCompon github-src="maps/geo-map/type-scatter-area-series"> -
The [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) works a lot like the [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values. @@ -33,7 +32,7 @@ The [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/produ The following table summarizes properties of GeographicScatterAreaSeries used for data binding. | Property Name | Property Type | Description | -| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `ItemsSource` | any | The source of data items to perform triangulation on if the [`trianglesSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) property provides no triangulation data. | | [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath) | string | The name of the property containing the Longitude for all items bound to the `ItemsSource`. | | [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath) | string | The name of the property containing the Latitude for all items bound to the `ItemsSource`. | @@ -51,7 +50,7 @@ The provided [`IgxCustomPaletteColorScaleComponent`]({environment:dvApiBaseUrl}/ The following table list properties of the [`IgxCustomPaletteColorScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html) affecting surface coloring of the GeographicScatterAreaSeries. | Property Name | Property Type | Description | -| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------ | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | [`palette`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html#palette) | ObservableCollection | Gets or sets the collection of colors to select from or to interpolate between. | | [`interpolationMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html#interpolationMode) | [`ColorScaleInterpolationMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.colorscaleinterpolationmode.html) | Gets or sets the method getting a color from the Palette. | | [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html#maximumValue) | double | The highest value to assign a color. Any given value greater than this value will be Transparent. | @@ -64,87 +63,81 @@ The following code shows how to bind the [`IgxGeographicScatterAreaSeriesCompone ```html -
- - +
+ +
-
- - Degrees: {{item.value}} "°F" - -
- - Longitude: {{item.lon}} - -
- - Latitude: {{item.lat}} - -
+
+ Degrees: {{item.value}} "°F" +
+ Longitude: {{item.lon}} +
+ Latitude: {{item.lat}} +
``` ```ts -import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; -import { IgxCustomPaletteColorScaleComponent } from 'igniteui-angular-charts'; -import { IgxShapeDataSource } from 'igniteui-angular-core'; -import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; -import { IgxGeographicScatterAreaSeriesComponent } from 'igniteui-angular-maps'; +import { + AfterViewInit, + Component, + TemplateRef, + ViewChild, +} from "@angular/core"; +import { IgxCustomPaletteColorScaleComponent } from "igniteui-angular-charts"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicScatterAreaSeriesComponent } from "igniteui-angular-maps"; @Component({ selector: "app-map-geographic-scatter-area-series", styleUrls: ["./map-geographic-scatter-area-series.component.scss"], - templateUrl: "./map-geographic-scatter-area-series.component.html" + templateUrl: "./map-geographic-scatter-area-series.component.html", }) export class MapTypeScatterAreaSeriesComponent implements AfterViewInit { + @ViewChild("map") + public map: IgxGeographicMapComponent; + @ViewChild("template") + public tooltipTemplate: TemplateRef; + constructor() {} - @ViewChild ("map") - public map: IgxGeographicMapComponent; - @ViewChild ("template") - public tooltipTemplate: TemplateRef; - constructor() { - } - - public ngAfterViewInit(): void { + public ngAfterViewInit(): void { const sds = new IgxShapeDataSource(); sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp"; - sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf"; + sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf"; sds.dataBind(); sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); -} + } - public onDataLoaded(sds: IgxShapeDataSource, e: any) { + public onDataLoaded(sds: IgxShapeDataSource, e: any) { const shapeRecords = sds.getPointData(); const contourPoints: any[] = []; for (const record of shapeRecords) { - const temp = record.fieldValues.Contour; - // using only major contours (every 10th degrees Celsius) - if (temp % 10 === 0 && temp >= 0) { - for (const shapes of record.points) { - for (let i = 0; i < shapes.length; i++) { - if (i % 5 === 0) { - const p = shapes[i]; - const item = { lon: p.x, lat: p.y, value: temp}; - contourPoints.push(item); - } - } + const temp = record.fieldValues.Contour; + // using only major contours (every 10th degrees Celsius) + if (temp % 10 === 0 && temp >= 0) { + for (const shapes of record.points) { + for (let i = 0; i < shapes.length; i++) { + if (i % 5 === 0) { + const p = shapes[i]; + const item = { lon: p.x, lat: p.y, value: temp }; + contourPoints.push(item); } + } } + } } this.createContourSeries(contourPoints); -} + } - public createContourSeries(data: any[]) { + public createContourSeries(data: any[]) { const brushes = [ - "rgba(32, 146, 252, 0.5)", // semi-transparent blue - "rgba(14, 194, 14, 0.5)", // semi-transparent green - "rgba(252, 120, 32, 0.5)", // semi-transparent orange - "rgba(252, 32, 32, 0.5)" // semi-transparent red + "rgba(32, 146, 252, 0.5)", // semi-transparent blue + "rgba(14, 194, 14, 0.5)", // semi-transparent green + "rgba(252, 120, 32, 0.5)", // semi-transparent orange + "rgba(252, 32, 32, 0.5)", // semi-transparent red ]; const colorScale = new IgxCustomPaletteColorScaleComponent(); @@ -162,7 +155,7 @@ export class MapTypeScatterAreaSeriesComponent implements AfterViewInit { areaSeries.thickness = 4; this.map.series.add(areaSeries); -} + } } ``` diff --git a/en/components/geo-map-type-scatter-bubble-series.md b/en/components/geo-map-type-scatter-bubble-series.md index e1823a9e23..008b36a353 100644 --- a/en/components/geo-map-type-scatter-bubble-series.md +++ b/en/components/geo-map-type-scatter-bubble-series.md @@ -18,7 +18,6 @@ In Angular map component, you can use the [`IgxGeographicProportionalSymbolSerie github-src="maps/geo-map/type-scatter-bubble-series"> -
The demo above shows the [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too. @@ -30,7 +29,7 @@ Similar to other types of scatter series in the map control, the [`IgxGeographic The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding. | Property | Type | Description | -| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------- | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | `ItemsSource` | any | Gets or sets the items source | | [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#longitudeMemberPath) | string | Uses the ItemsSource property to determine the location of the longitude values on the assigned items | | [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#latitudeMemberPath) | string | Uses the ItemsSource property to determine the location of the latitude values on the assigned items | @@ -44,111 +43,113 @@ The following table summarizes the GeographicHighDensityScatterSeries series pro ```html -
- - +
+ +
-
- - {{item.name}} - -
+
+ {{item.name}} +
``` ```ts -import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; -import { IgxSizeScaleComponent } from 'igniteui-angular-charts'; -import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts'; -import { IgxDataContext } from 'igniteui-angular-core'; -import { IgxShapeDataSource } from 'igniteui-angular-core'; -import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; -import { IgxGeographicProportionalSymbolSeriesComponent } from 'igniteui-angular-maps'; -import { MarkerType } from 'igniteui-angular-charts'; +import { + AfterViewInit, + Component, + TemplateRef, + ViewChild, +} from "@angular/core"; +import { IgxSizeScaleComponent } from "igniteui-angular-charts"; +import { IgxValueBrushScaleComponent } from "igniteui-angular-charts"; +import { IgxDataContext } from "igniteui-angular-core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicProportionalSymbolSeriesComponent } from "igniteui-angular-maps"; +import { MarkerType } from "igniteui-angular-charts"; import { WorldLocations } from "../../utilities/WorldLocations"; @Component({ selector: "app-map-geographic-scatter-proportional-series", styleUrls: ["./map-geographic-scatter-proportional-series.component.scss"], - templateUrl: "./map-geographic-scatter-proportional-series.component.html" + templateUrl: "./map-geographic-scatter-proportional-series.component.html", }) export class MapTypeScatterBubbleSeriesComponent implements AfterViewInit { + @ViewChild("map") + public map: IgxGeographicMapComponent; + @ViewChild("template") + public tooltipTemplate: TemplateRef; + constructor() {} - @ViewChild ("map") - public map: IgxGeographicMapComponent; - @ViewChild ("template") - public tooltipTemplate: TemplateRef; - constructor() { - } - - public ngAfterViewInit(): void { + public ngAfterViewInit(): void { const sds = new IgxShapeDataSource(); sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp"; - sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf"; + sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf"; sds.dataBind(); sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); -} + } - public onDataLoaded(sds: IgxShapeDataSource, e: any) { + public onDataLoaded(sds: IgxShapeDataSource, e: any) { const shapeRecords = sds.getPointData(); - console.log("loaded contour shapes: " + shapeRecords.length + " from /Shapes/WorldTemperatures.shp"); + console.log( + "loaded contour shapes: " + + shapeRecords.length + + " from /Shapes/WorldTemperatures.shp", + ); const contourPoints: any[] = []; for (const record of shapeRecords) { - const temp = record.fieldValues.Contour; - // using only major contours (every 10th degrees Celsius) - if (temp % 10 === 0 && temp >= 0) { - for (const shapes of record.points) { - for (let i = 0; i < shapes.length; i++) { - if (i % 5 === 0) { - const p = shapes[i]; - const item = { lon: p.x, lat: p.y, value: temp}; - contourPoints.push(item); - } - } + const temp = record.fieldValues.Contour; + // using only major contours (every 10th degrees Celsius) + if (temp % 10 === 0 && temp >= 0) { + for (const shapes of record.points) { + for (let i = 0; i < shapes.length; i++) { + if (i % 5 === 0) { + const p = shapes[i]; + const item = { lon: p.x, lat: p.y, value: temp }; + contourPoints.push(item); } + } } + } } console.log("loaded contour points: " + contourPoints.length); this.addSeriesWith(WorldLocations.getAll()); -} - - public addSeriesWith(locations: any[]) { - const sizeScale = new IgxSizeScaleComponent(); - sizeScale.minimumValue = 4; - sizeScale.maximumValue = 60; - - const brushes = [ - "rgba(14, 194, 14, 0.4)", // semi-transparent green - "rgba(252, 170, 32, 0.4)", // semi-transparent orange - "rgba(252, 32, 32, 0.4)" // semi-transparent red - ]; - - const brushScale = new IgxValueBrushScaleComponent(); - brushScale.brushes = brushes; - brushScale.minimumValue = 0; - brushScale.maximumValue = 30; - - const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent(); - symbolSeries.dataSource = locations; - symbolSeries.markerType = MarkerType.Circle; - symbolSeries.radiusScale = sizeScale; - symbolSeries.fillScale = brushScale; - symbolSeries.fillMemberPath = "pop"; - symbolSeries.radiusMemberPath = "pop"; - symbolSeries.latitudeMemberPath = "lat"; - symbolSeries.longitudeMemberPath = "lon"; - symbolSeries.markerOutline = "rgba(0,0,0,0.3)"; - symbolSeries.tooltipTemplate = this.tooltipTemplate; - - this.map.series.add(symbolSeries); - } + } + + public addSeriesWith(locations: any[]) { + const sizeScale = new IgxSizeScaleComponent(); + sizeScale.minimumValue = 4; + sizeScale.maximumValue = 60; + + const brushes = [ + "rgba(14, 194, 14, 0.4)", // semi-transparent green + "rgba(252, 170, 32, 0.4)", // semi-transparent orange + "rgba(252, 32, 32, 0.4)", // semi-transparent red + ]; + + const brushScale = new IgxValueBrushScaleComponent(); + brushScale.brushes = brushes; + brushScale.minimumValue = 0; + brushScale.maximumValue = 30; + + const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent(); + symbolSeries.dataSource = locations; + symbolSeries.markerType = MarkerType.Circle; + symbolSeries.radiusScale = sizeScale; + symbolSeries.fillScale = brushScale; + symbolSeries.fillMemberPath = "pop"; + symbolSeries.radiusMemberPath = "pop"; + symbolSeries.latitudeMemberPath = "lat"; + symbolSeries.longitudeMemberPath = "lon"; + symbolSeries.markerOutline = "rgba(0,0,0,0.3)"; + symbolSeries.tooltipTemplate = this.tooltipTemplate; + + this.map.series.add(symbolSeries); + } } ``` diff --git a/en/components/geo-map-type-scatter-contour-series.md b/en/components/geo-map-type-scatter-contour-series.md index 1546a4f035..121428c6df 100644 --- a/en/components/geo-map-type-scatter-contour-series.md +++ b/en/components/geo-map-type-scatter-contour-series.md @@ -18,7 +18,6 @@ In Angular map component, you can use the [`IgxGeographicContourLineSeriesCompon github-src="maps/geo-map/type-scatter-contour-series"> -
The [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) works a lot like the [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale. @@ -33,7 +32,7 @@ The [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/produ The following table summarizes properties of [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) used for data binding. | Property Name | Property Type | Description | -| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `ItemsSource` | any | The source of data items to perform triangulation on if the [`trianglesSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) property provides no triangulation data. | | [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath) | string | The name of the property containing the Longitude for all items bound to the `ItemsSource`. | | [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath) | string | The name of the property containing the Latitude for all items bound to to the `ItemsSource`. | @@ -50,7 +49,7 @@ The provided \`ValueBrushScale class should satisfy most of your coloring needs, The following table list properties of the CustomPaletteColorScale affecting the surface coloring of the GeographicContourLineSeries. | Property Name | Property Type | Description | -| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`brushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#brushes) | BrushCollection | Gets or sets the collection of brushes for filling contours of the [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) | | [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html#maximumValue) | double | The highest value to assign a brush in a fill scale. | | [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html#minimumValue) | double | The lowest value to assign a brush in a fill scale. | @@ -62,99 +61,96 @@ The following code shows how to bind the [`IgxGeographicContourLineSeriesCompone ```html -
- - +
+ +
- - {{item | number: 2}} "°C" - + {{item | number: 2}} "°C" ``` ```ts -import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; -import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts'; -import { IgxShapeDataSource } from 'igniteui-angular-core'; -import { IgxGeographicContourLineSeriesComponent } from 'igniteui-angular-maps'; -import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { + AfterViewInit, + Component, + TemplateRef, + ViewChild, +} from "@angular/core"; +import { IgxValueBrushScaleComponent } from "igniteui-angular-charts"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicContourLineSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; @Component({ selector: "app-map-geographic-scatter-contour-series", styleUrls: ["./map-geographic-scatter-contour-series.component.scss"], - templateUrl: "./map-geographic-scatter-contour-series.component.html" + templateUrl: "./map-geographic-scatter-contour-series.component.html", }) - export class MapTypeScatterContourSeriesComponent implements AfterViewInit { - - @ViewChild ("map") - public map: IgxGeographicMapComponent; - - @ViewChild ("template") - public tooltip: TemplateRef; - constructor() { - } - - public ngAfterViewInit(): void { - const sds = new IgxShapeDataSource(); - sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp"; - sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf"; - sds.dataBind(); - sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); - } - - public onDataLoaded(sds: IgxShapeDataSource, e: any) { - const shapeRecords = sds.getPointData(); - - const contourPoints: any[] = []; - for (const record of shapeRecords) { - const temp = record.fieldValues.Contour; - // using only major contours (every 10th degrees Celsius) - if (temp % 10 === 0 && temp >= 0) { - for (const shapes of record.points) { - for (let i = 0; i < shapes.length; i++) { - if (i % 5 === 0) { - const p = shapes[i]; - const item = { lon: p.x, lat: p.y, value: temp}; - contourPoints.push(item); - } - } - } + @ViewChild("map") + public map: IgxGeographicMapComponent; + + @ViewChild("template") + public tooltip: TemplateRef; + constructor() {} + + public ngAfterViewInit(): void { + const sds = new IgxShapeDataSource(); + sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp"; + sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf"; + sds.dataBind(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + + const contourPoints: any[] = []; + for (const record of shapeRecords) { + const temp = record.fieldValues.Contour; + // using only major contours (every 10th degrees Celsius) + if (temp % 10 === 0 && temp >= 0) { + for (const shapes of record.points) { + for (let i = 0; i < shapes.length; i++) { + if (i % 5 === 0) { + const p = shapes[i]; + const item = { lon: p.x, lat: p.y, value: temp }; + contourPoints.push(item); } + } } - - this.createContourSeries(contourPoints); + } } - public createContourSeries(data: any[]) { - const brushes = [ - "rgba(32, 146, 252, 0.5)", // semi-transparent blue - "rgba(14, 194, 14, 0.5)", // semi-transparent green - "rgba(252, 120, 32, 0.5)", // semi-transparent orange - "rgba(252, 32, 32, 0.5)" // semi-transparent red - ]; - - const brushScale = new IgxValueBrushScaleComponent(); - brushScale.brushes = brushes; - brushScale.minimumValue = 0; - brushScale.maximumValue = 30; - - const contourSeries = new IgxGeographicContourLineSeriesComponent(); - contourSeries.dataSource = data; - contourSeries.longitudeMemberPath = "lon"; - contourSeries.latitudeMemberPath = "lat"; - contourSeries.valueMemberPath = "value"; - contourSeries.fillScale = brushScale; - contourSeries.tooltipTemplate = this.tooltip; - contourSeries.thickness = 4; - - this.map.series.add(contourSeries); - } + this.createContourSeries(contourPoints); + } + + public createContourSeries(data: any[]) { + const brushes = [ + "rgba(32, 146, 252, 0.5)", // semi-transparent blue + "rgba(14, 194, 14, 0.5)", // semi-transparent green + "rgba(252, 120, 32, 0.5)", // semi-transparent orange + "rgba(252, 32, 32, 0.5)", // semi-transparent red + ]; + + const brushScale = new IgxValueBrushScaleComponent(); + brushScale.brushes = brushes; + brushScale.minimumValue = 0; + brushScale.maximumValue = 30; + + const contourSeries = new IgxGeographicContourLineSeriesComponent(); + contourSeries.dataSource = data; + contourSeries.longitudeMemberPath = "lon"; + contourSeries.latitudeMemberPath = "lat"; + contourSeries.valueMemberPath = "value"; + contourSeries.fillScale = brushScale; + contourSeries.tooltipTemplate = this.tooltip; + contourSeries.thickness = 4; + + this.map.series.add(contourSeries); + } } ``` diff --git a/en/components/geo-map-type-scatter-density-series.md b/en/components/geo-map-type-scatter-density-series.md index 0d6746893c..08f6f07ce6 100644 --- a/en/components/geo-map-type-scatter-density-series.md +++ b/en/components/geo-map-type-scatter-density-series.md @@ -18,7 +18,6 @@ In Angular map component, you can use the [`IgxGeographicHighDensityScatterSerie github-src="maps/geo-map/type-scatter-density-series"> -
The demo above shows the [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels. @@ -34,7 +33,7 @@ Similar to other types of scatter series in the map control, the [`IgxGeographic The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding. | Property | Type | Description | -| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----- | :---------------------------------------------------------------------------------------------------- | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------- | | `ItemsSource` | any | Gets or sets the items source | | [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath) | string | Uses the ItemsSource property to determine the location of the longitude values on the assigned items | | [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) | string | Uses the ItemsSource property to determine the location of the latitude values on the assigned items | @@ -44,7 +43,7 @@ The following table summarizes the GeographicHighDensityScatterSeries series pro The Heat Color Scale, an optional feature, determines the color pattern within the series. The following table summarizes the properties used for determining the color scale. | Property | Type | Description | -| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----- | :------------------------------------------------------------------------ | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------- | | [`heatMinimum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimum) | Double | Defines the double value representing the minimum end of the color scale | | [`heatMaximum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximum) | Double | Defines the double value representing the maximum end of the color scale | | [`heatMinimumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimumColor) | Color | Defines the point density color used at the bottom end of the color scale | @@ -57,78 +56,75 @@ The following code demonstrates how set the [`heatMinimumColor`]({environment:dv ```html -
- - +
+ +
-
- - {{item.n}} - -
+
+ {{item.n}} +
``` ```ts -import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; -import { IgxShapeDataSource } from 'igniteui-angular-core'; -import { IgxGeographicHighDensityScatterSeriesComponent } from 'igniteui-angular-maps'; -import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { + AfterViewInit, + Component, + TemplateRef, + ViewChild, +} from "@angular/core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicHighDensityScatterSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; import { WorldUtils } from "../../utilities/WorldUtils"; @Component({ selector: "app-map-geographic-scatter-density-series", styleUrls: ["./map-geographic-scatter-density-series.component.scss"], - templateUrl: ".map-geographic-scatter-density-series.component.html" + templateUrl: ".map-geographic-scatter-density-series.component.html", }) - export class MapTypeScatterDensitySeriesComponent implements AfterViewInit { - - @ViewChild ("map") - public map: IgxGeographicMapComponent; - @ViewChild("template") - public tooltip: TemplateRef; - - public geoLocations; - constructor() { - } - - public ngAfterViewInit(): void { - // fetching geographic locations from public JSON folder - fetch("assets/Data/AusPlaces.json") - .then((response) => response.json()) - .then((data) => this.onDataLoaded(data, "")); - } - - public onDataLoaded(sds: IgxShapeDataSource, e: any) { - this.geoLocations = sds; - // creating HD series with loaded data - const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent(); - geoSeries.dataSource = sds; - geoSeries.longitudeMemberPath = "x"; - geoSeries.latitudeMemberPath = "y"; - geoSeries.heatMaximumColor = "Red"; - geoSeries.heatMinimumColor = "Black"; - geoSeries.heatMinimum = 0; - geoSeries.heatMaximum = 5; - geoSeries.pointExtent = 1; - geoSeries.tooltipTemplate = this.tooltip; - geoSeries.mouseOverEnabled = true; - - // adding HD series to the geographic amp - this.map.series.add(geoSeries); - - // zooming to bound of all geographic locations - const geoBounds = WorldUtils.getBounds(this.geoLocations); - geoBounds.top = 0; - geoBounds.height = -50; - this.map.zoomToGeographic(geoBounds); - } + @ViewChild("map") + public map: IgxGeographicMapComponent; + @ViewChild("template") + public tooltip: TemplateRef; + + public geoLocations; + constructor() {} + + public ngAfterViewInit(): void { + // fetching geographic locations from public JSON folder + fetch("assets/Data/AusPlaces.json") + .then((response) => response.json()) + .then((data) => this.onDataLoaded(data, "")); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + this.geoLocations = sds; + // creating HD series with loaded data + const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent(); + geoSeries.dataSource = sds; + geoSeries.longitudeMemberPath = "x"; + geoSeries.latitudeMemberPath = "y"; + geoSeries.heatMaximumColor = "Red"; + geoSeries.heatMinimumColor = "Black"; + geoSeries.heatMinimum = 0; + geoSeries.heatMaximum = 5; + geoSeries.pointExtent = 1; + geoSeries.tooltipTemplate = this.tooltip; + geoSeries.mouseOverEnabled = true; + + // adding HD series to the geographic amp + this.map.series.add(geoSeries); + + // zooming to bound of all geographic locations + const geoBounds = WorldUtils.getBounds(this.geoLocations); + geoBounds.top = 0; + geoBounds.height = -50; + this.map.zoomToGeographic(geoBounds); + } } ``` diff --git a/en/components/interactivity/accessibility-compliance.md b/en/components/interactivity/accessibility-compliance.md index ca5fdfd444..238fc2db24 100644 --- a/en/components/interactivity/accessibility-compliance.md +++ b/en/components/interactivity/accessibility-compliance.md @@ -35,49 +35,49 @@ The matrix below provides a high-level outline of the accessibility support prov | **Component/Principle** | (a)
| (b)
| (c)
| (d)
| (e)
| (f)
| (g)
| (h)
| (i)
| (j)
| (k)
| (l)
| (m)
| (n)
| (o)
| (p)
| | :---------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- | | **Grids** | | | | | | | | | | | | | | | | | -| - Grid | | | | | | | | | | * | | | | | | | -| - HierarchicalGrid | | | | | | | | | | * | | | | | | | -| - TreeGrid | | | | | | | | | | * | | | | | | | -| **Other** | | | | | | | | | | * | | | | | | | +| - Grid | | | | | | | | | | \_ | | | | | | | +| - HierarchicalGrid | | | | | | | | | | \_ | | | | | | | +| - TreeGrid | | | | | | | | | | \_ | | | | | | | +| **Other** | | | | | | | | | | \_ | | | | | | | | - Avatar | | | | | | | | | | | | | | | | | | - Badge | | | | | | | | | | | | | | | | | -| - Bottom navigation | | | | | | | | | | * | | | | | | | -| - Button | | | | | | | | | | * | | | | | | | -| - Button group | | | | | | | | | | * | | | | | | | -| - Calendar | | | | | | | | | | * | | | | | | | +| - Bottom navigation | | | | | | | | | | \_ | | | | | | | +| - Button | | | | | | | | | | \_ | | | | | | | +| - Button group | | | | | | | | | | \_ | | | | | | | +| - Calendar | | | | | | | | | | \_ | | | | | | | | - Card | | | | | | | | | | | | | | | | | -| - Carousel | | | | | | | | | | * | | | | | | | +| - Carousel | | | | | | | | | | \_ | | | | | | | | - Checkbox | | | | | | | | | | | | | | | | | -| - Chip | | | | | | | | | | * | | | | | | | -| - Circular progress | | | | | | | | | | * | | | | | | | -| - Combo | | | | | | | | | | * | | | | | | | -| - Date time input | | | | | | | | | | * | | | | | | | -| - Date picker | | | | | | | | | | * | | | | | | | +| - Chip | | | | | | | | | | \_ | | | | | | | +| - Circular progress | | | | | | | | | | \_ | | | | | | | +| - Combo | | | | | | | | | | \_ | | | | | | | +| - Date time input | | | | | | | | | | \_ | | | | | | | +| - Date picker | | | | | | | | | | \_ | | | | | | | | - Divider | | | | | | | | | | | | | | | | | -| - Dialog | | | | | | | | | | * | | | | | | | -| - Drop down | | | | | | | | | | * | | | | | | | -| - Expansion panel | | | | | | | | | | * | | | | | | | +| - Dialog | | | | | | | | | | \_ | | | | | | | +| - Drop down | | | | | | | | | | \_ | | | | | | | +| - Expansion panel | | | | | | | | | | \_ | | | | | | | | - Icon | | | | | | | | | | | | | | | | | | - Input | | | | | | | | | | | | | | | | | -| - Input group | | | | | | | | | | * | | | | | | | -| - Linear progress | | | | | | | | | | * | | | | | | | +| - Input group | | | | | | | | | | \_ | | | | | | | +| - Linear progress | | | | | | | | | | \_ | | | | | | | | - List | | | | | | | | | | | | | | | | | -| - Navbar | | | | | | | | | | * | | | | | | | -| - Navigation drawer | | | | | | | | | | * | | | | | | | +| - Navbar | | | | | | | | | | \_ | | | | | | | +| - Navigation drawer | | | | | | | | | | \_ | | | | | | | | - Radio group | | | | | | | | | | | | | | | | | | - Radio | | | | | | | | | | | | | | | | | -| - Select | | | | | | | | | | * | | | | | | | -| - Slider | | | | | | | | | | * | | | | | | | -| - Snackbar | | | | | | | | | | * | | | | | | | -| - Switch | | | | | | | | | | * | | | | | | | -| - Tabs | | | | | | | | | | * | | | | | | | -| - Time picker | | | | | | | | | | * | | | | | | | -| - Toast | | | | | | | | | | * | | | | | | | +| - Select | | | | | | | | | | \_ | | | | | | | +| - Slider | | | | | | | | | | \_ | | | | | | | +| - Snackbar | | | | | | | | | | \_ | | | | | | | +| - Switch | | | | | | | | | | \_ | | | | | | | +| - Tabs | | | | | | | | | | \_ | | | | | | | +| - Time picker | | | | | | | | | | \_ | | | | | | | +| - Toast | | | | | | | | | | \_ | | | | | | | **LEGEND** | | | | -| :---------------------------- | :---------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------- | +| ----------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | | | The control/component is completely accessible in this particular area. | | | \* | The control/component is accessible in this particular area after implementing certain configurations | Example: Use **NoopAnimationsModule**utility module to allow disabling of animations | | | The control/component is not entirely accessible unless you perform some sort of action. | | @@ -112,53 +112,53 @@ The matrix below provides a high-level outline of the accessibility support prov | **Component/Guideline** | 1.1
| 1.2
| 1.3
| 1.4
| 2.1
| 2.2
| 2.3
| 2.4
| 2.5
| 3.1
| 3.2
| 3.3
| 4.1
| | :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------- | | **Grids** | | | | | | | | | | | | | | -| - Grid | | | | | | | * | | | | * | | | -| - HierarchicalGrid | | | | | | | * | | | | * | | | -| - TreeGrid | | | | | | | * | | | | * | | | -| **Other** | | | | | | | * | | | | | | | -| - Avatar | | | | | | | | | | | * | | | -| - Badge | | | | | | | | | | | * | | | -| - Banner | | | | | | * | * | | | | * | | | -| - Bottom navigation | | | | | | | * | | | | * | | | -| - Button | | | | | | | * | | | | * | | | -| - Button group | | | | | | | * | | | | * | | | -| - Calendar | | | | | | * | * | | | | * | | | -| - Card | | | | | | | | | | | * | | | -| - Carousel | | | | | | * | * | | | | * | | | -| - Checkbox | | | | | | | | | | | * | | | -| - Chip | | | | | | | * | | | | * | | | -| - Circular progress | | | | | | * | * | | | | * | | | -| - Combo | | | | | | * | * | | | | * | | | -| - Date time editor | | | | | | * | * | | | | * | | | -| - Date picker | | | | | | * | * | | | | * | | | -| - Divider | | | | | | | | | | | * | | | -| - Dialog | | | | | | * | * | | | | * | | | -| - Drop down | | | | | | * | * | | | | * | | | -| - Expansion panel | | | | | | * | * | | | | * | | | -| - Icon | | | | | | | | | | | * | | | -| - Input | | | | | | | | | | | * | | | -| - Input group | | | | | | | * | | | | * | | | -| - Label | | | | | | | | | | | * | | | -| - Linear progress | | | | | | * | * | | | | * | | | -| - List | | | | | | | | | | | * | | | -| - Month picker | | | | | | * | * | | | | * | | | -| - Navbar | | | | | | | * | | | | * | | | -| - Navigation drawer | | | | | | * | * | | | | * | | | -| - Radio group | | | | | | | | | | | * | | | -| - Radio | | | | | | | | | | | * | | | -| - Select | | | | | | * | * | | | | * | | | -| - Slider | | | | | | | * | | | | * | | | -| - Snackbar | | | | | | * | * | | | | * | | | -| - Switch | | | | | | | * | | | | * | | | -| - Tabs | | | | | | | * | | | | * | | | -| - Time picker | | | | | | * | * | | | | * | | | -| - Toast | | | | | | * | * | | | | * | | | -| - Tooltip | | | | | | * | * | | | | * | | | +| - Grid | | | | | | | \_ | | | | \_ | | | +| - HierarchicalGrid | | | | | | | \_ | | | | \_ | | | +| - TreeGrid | | | | | | | \_ | | | | \_ | | | +| **Other** | | | | | | | \_ | | | | | | | +| - Avatar | | | | | | | | | | | \_ | | | +| - Badge | | | | | | | | | | | \_ | | | +| - Banner | | | | | | \_ | \_ | | | | \_ | | | +| - Bottom navigation | | | | | | | \_ | | | | \_ | | | +| - Button | | | | | | | \_ | | | | \_ | | | +| - Button group | | | | | | | \_ | | | | \_ | | | +| - Calendar | | | | | | \_ | \_ | | | | \_ | | | +| - Card | | | | | | | | | | | \_ | | | +| - Carousel | | | | | | \_ | \_ | | | | \_ | | | +| - Checkbox | | | | | | | | | | | \_ | | | +| - Chip | | | | | | | \_ | | | | \_ | | | +| - Circular progress | | | | | | \_ | \_ | | | | \_ | | | +| - Combo | | | | | | \_ | \_ | | | | \_ | | | +| - Date time editor | | | | | | \_ | \_ | | | | \_ | | | +| - Date picker | | | | | | \_ | \_ | | | | \_ | | | +| - Divider | | | | | | | | | | | \_ | | | +| - Dialog | | | | | | \_ | \_ | | | | \_ | | | +| - Drop down | | | | | | \_ | \_ | | | | \_ | | | +| - Expansion panel | | | | | | \_ | \_ | | | | \_ | | | +| - Icon | | | | | | | | | | | \_ | | | +| - Input | | | | | | | | | | | \_ | | | +| - Input group | | | | | | | \_ | | | | \_ | | | +| - Label | | | | | | | | | | | \_ | | | +| - Linear progress | | | | | | \_ | \_ | | | | \_ | | | +| - List | | | | | | | | | | | \_ | | | +| - Month picker | | | | | | \_ | \_ | | | | \_ | | | +| - Navbar | | | | | | | \_ | | | | \_ | | | +| - Navigation drawer | | | | | | \_ | \_ | | | | \_ | | | +| - Radio group | | | | | | | | | | | \_ | | | +| - Radio | | | | | | | | | | | \_ | | | +| - Select | | | | | | \_ | \_ | | | | \_ | | | +| - Slider | | | | | | | \_ | | | | \_ | | | +| - Snackbar | | | | | | \_ | \_ | | | | \_ | | | +| - Switch | | | | | | | \_ | | | | \_ | | | +| - Tabs | | | | | | | \_ | | | | \_ | | | +| - Time picker | | | | | | \_ | \_ | | | | \_ | | | +| - Toast | | | | | | \_ | \_ | | | | \_ | | | +| - Tooltip | | | | | | \_ | \_ | | | | \_ | | | **Legend** | | | | -| :---------------------------- | :---------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| ----------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | The control/component is completely accessible in this particular area. | | | \* | The control/component is accessible in this particular area after implementing certain configurations | Example 1: Guideline 2.2. For certain components additional actions and time parameters should be set; Example 2: Guideline 2.3. Use **NoopAnimationsModule**utility module to allow disabling of animations; | | | The control/component is not entirely accessible unless you perform some sort of action. | | diff --git a/en/components/zoomslider-overview.md b/en/components/zoomslider-overview.md index d6ffd76237..6743c467c1 100644 --- a/en/components/zoomslider-overview.md +++ b/en/components/zoomslider-overview.md @@ -20,17 +20,16 @@ The following sample demonstrates how to use [`IgxZoomSliderComponent`]({environ github-src="charts/zoomslider/overview"> -
## Usage | Feature Name | Description | -| :-------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Scrollbar navigation | Users can change scale and scroll through ranges of data using the built-in capabilities of the ZoomSlider scrollbar. | | Panning and zooming | Users can adjust the display scale by dragging the edges of the thumb pad to either make the current display cover a larger range (zoom out) or a smaller range (zoom in). | | Multiple user interaction options | All mouse user interactions are redundantly supported through touch and most of them – through the keyboard. For details, see User Interactions and Usability. | -| Touch support | On touch-enabled devices, users can enjoy the full ZoomSlider functionality. All mouse interactions are supported in touch environment. | +| Touch support | On touch-enabled devices, users can enjoy the full ZoomSlider functionality. All mouse interactions are supported in touch environment. | | Extensibility | The ZoomSlider control supports DataChart control out-of the box. | | Configurable zoom-range window | The initial zoom-range window width and position, as well as its minimum size, are configurable. | @@ -48,15 +47,15 @@ npm install --save igniteui-angular-charts The [`IgxZoomSliderComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxzoomslidercomponent.html) requires the following modules: ```ts -import { IgxZoomSliderModule } from 'igniteui-angular-charts'; -import { IgxZoomSliderComponent } from 'igniteui-angular-charts'; +import { IgxZoomSliderModule } from "igniteui-angular-charts"; +import { IgxZoomSliderComponent } from "igniteui-angular-charts"; @NgModule({ - imports: [ - // ... - IgxZoomSliderModule, - // ... - ] + imports: [ + // ... + IgxZoomSliderModule, + // ... + ], }) export class AppModule {} ``` @@ -66,10 +65,7 @@ export class AppModule {} The following code demonstrates how to setup the ZoomSlider. ```html - - + ```