diff --git a/.markdownlint.json b/.markdownlint.json index f9238857cb..bfef2af4f9 100644 --- a/.markdownlint.json +++ b/.markdownlint.json @@ -43,5 +43,6 @@ "MD051": false, "MD055": false, "MD058": true, - "MD059": false + "MD059": false, + "MD060": { "style": "aligned" } } diff --git a/en/components/ai/skills.md b/en/components/ai/skills.md index 148ec1dba8..20d04c278e 100644 --- a/en/components/ai/skills.md +++ b/en/components/ai/skills.md @@ -12,11 +12,11 @@ Ignite UI for Angular ships with **Agent Skills** — structured knowledge files The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-angular/tree/master/skills) directory of the Ignite UI for Angular repository: -| Skill | Path | Description | -|:------|:-----|:------------| -| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout | -| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data | -| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | +| Skill | Path | Description | +| :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------ | +| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout | +| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data | +| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | > **Note:** Starting with Ignite UI for Angular **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional `ng update` migration to add these skills to your project automatically when updating to `igniteui-angular` 21.1.0 or later. @@ -240,14 +240,14 @@ Once complete, the skills are ready to use — no manual file copying required. Once you have the files, open them and load them into your AI assistant: -| IDE / Tool | How to load | -|:-----------|:------------| -| **VS Code + GitHub Copilot** | Use `#file:path/to/SKILL.md` in the Copilot Chat input to attach it as context for that session. | -| **Cursor** | Drag the `SKILL.md` file into the chat window, or type `@file` and select it. | -| **Windsurf** | Attach the file using the **+** button in the Cascade chat panel. | -| **JetBrains AI Assistant** | Click the paperclip icon in the AI chat to attach the file as context. | -| **Claude Desktop** | Drag the file into the chat or add it to the project knowledge base via **Project → Add Content**. | -| **Other assistants** | Open the `SKILL.md` file, copy its full contents, and paste them into the system prompt or at the top of your first message. | +| IDE / Tool | How to load | +| :--------------------------- | :--------------------------------------------------------------------------------------------------------------------------- | +| **VS Code + GitHub Copilot** | Use `#file:path/to/SKILL.md` in the Copilot Chat input to attach it as context for that session. | +| **Cursor** | Drag the `SKILL.md` file into the chat window, or type `@file` and select it. | +| **Windsurf** | Attach the file using the **+** button in the Cascade chat panel. | +| **JetBrains AI Assistant** | Click the paperclip icon in the AI chat to attach the file as context. | +| **Claude Desktop** | Drag the file into the chat or add it to the project knowledge base via **Project → Add Content**. | +| **Other assistants** | Open the `SKILL.md` file, copy its full contents, and paste them into the system prompt or at the top of your first message. | --- diff --git a/en/components/ai/theming-mcp.md b/en/components/ai/theming-mcp.md index 021440d451..b59d7e92e7 100644 --- a/en/components/ai/theming-mcp.md +++ b/en/components/ai/theming-mcp.md @@ -232,21 +232,21 @@ 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. | -| `create_typography` | Sets up a font family and type scale for a given design system. | -| `create_elevations` | Configures box-shadow elevation levels (0–24) for Material or Indigo design systems. | -| `create_theme` | One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). | -| `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). | -| `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. | -| `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. | -| `get_component_design_tokens` | Returns all available design tokens for a component — always call this before `create_component_theme`. | -| `create_component_theme` | Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema. | -| `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | -| `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | +| 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. | +| `create_typography` | Sets up a font family and type scale for a given design system. | +| `create_elevations` | Configures box-shadow elevation levels (0–24) for Material or Indigo design systems. | +| `create_theme` | One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). | +| `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). | +| `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. | +| `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. | +| `get_component_design_tokens` | Returns all available design tokens for a component — always call this before `create_component_theme`. | +| `create_component_theme` | Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema. | +| `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | +| `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | > [!NOTE] > For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. diff --git a/en/components/charts/chart-api.md b/en/components/charts/chart-api.md index 73695436d9..dcdbd9ebfb 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 | -|------------------|-----------------|-------------------| +| 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 | -|------------------|-----------------|-------------------| +| 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 | -|------------------|--------------| +| 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 | -|------------------|----------------| +| 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 | -|----------------|------------------| +| 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 | -|---------------|--------------| +| 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 abd1b41a88..e94c3dd810 100644 --- a/en/components/charts/features/chart-axis-gridlines.md +++ b/en/components/charts/features/chart-axis-gridlines.md @@ -39,16 +39,16 @@ 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. | -| Minor Stroke Thickness | number | [`xAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStrokeThickness)
[`yAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStrokeThickness) | These properties set the thickness in pixels of the axis minor gridlines. | -| Major Interval | number | [`xAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
[`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisInterval) | These properties set interval between axis major gridlines and labels. | -| Minor Interval | number | [`xAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinorInterval)
[`yAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMinorInterval) | These properties set interval between axis minor gridlines, if used. | -| Axis Line Stroke Color | string | [`xAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStroke)
[`yAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStroke) | These properties set the color of an axis line. | -| Axis Stroke Thickness | number | [`xAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrokeThickness)
[`yAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrokeThickness) | These properties set the thickness in pixels of an axis line. | +| 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. | +| Minor Stroke Thickness | number | [`xAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStrokeThickness)
[`yAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStrokeThickness) | These properties set the thickness in pixels of the axis minor gridlines. | +| Major Interval | number | [`xAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
[`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisInterval) | These properties set interval between axis major gridlines and labels. | +| Minor Interval | number | [`xAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinorInterval)
[`yAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMinorInterval) | These properties set interval between axis minor gridlines, if used. | +| Axis Line Stroke Color | string | [`xAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStroke)
[`yAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStroke) | These properties set the color of an axis line. | +| Axis Stroke Thickness | number | [`xAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrokeThickness)
[`yAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrokeThickness) | These properties set the thickness in pixels of an axis line. | Regarding the Major and Minor Interval in the table above, it is important to note that the major interval for axis labels will also be set by this value, displaying one label at the point on the axis associated with the interval. The minor interval gridlines are always rendered between the major gridlines, and as such, the minor interval properties should always be set to something much smaller (usually 2-5 times smaller) than the value of the major Interval properties. @@ -101,11 +101,11 @@ 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. | +| 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. | ## Additional Resources @@ -118,25 +118,25 @@ 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) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`minorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#minorInterval) | [`yAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinorInterval) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`majorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStroke) | [`xAxisMajorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStroke) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`majorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStroke) | [`yAxisMajorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStroke) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`majorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStrokeThickness) | [`xAxisMajorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStrokeThickness) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`majorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStrokeThickness) | [`yAxisMajorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStrokeThickness) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`minorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#minorStrokeThickness) | [`xAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStrokeThickness) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`minorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#minorStrokeThickness) | [`yAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStrokeThickness) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`strokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strokeThickness) | [`xAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrokeThickness) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`strokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strokeThickness) | [`yAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrokeThickness) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`stroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#stroke) | [`xAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStroke) (Axis Line Color) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`stroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#stroke) | [`yAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStroke) (Axis Line Color) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`tickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickLength) | [`xAxisTickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickLength) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`tickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickLength) | [`yAxisTickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickLength) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`tickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickStroke) | [`xAxisTickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStroke) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`tickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickStroke) | [`yAxisTickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStroke) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`strip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strip) | [`xAxisStrip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrip) (Space between Major Gridlines) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`strip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strip) | [`yAxisStrip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrip) (Space between Major Gridlines) | +| [`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) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`minorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#minorInterval) | [`yAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinorInterval) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`majorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStroke) | [`xAxisMajorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStroke) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`majorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStroke) | [`yAxisMajorStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStroke) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`majorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStrokeThickness) | [`xAxisMajorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStrokeThickness) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`majorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStrokeThickness) | [`yAxisMajorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStrokeThickness) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`minorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#minorStrokeThickness) | [`xAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStrokeThickness) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`minorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#minorStrokeThickness) | [`yAxisMinorStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStrokeThickness) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`strokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strokeThickness) | [`xAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrokeThickness) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`strokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strokeThickness) | [`yAxisStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrokeThickness) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`stroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#stroke) | [`xAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStroke) (Axis Line Color) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`stroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#stroke) | [`yAxisStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStroke) (Axis Line Color) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`tickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickLength) | [`xAxisTickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickLength) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`tickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickLength) | [`yAxisTickLength`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickLength) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`tickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickStroke) | [`xAxisTickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStroke) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`tickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickStroke) | [`yAxisTickStroke`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStroke) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`strip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strip) | [`xAxisStrip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrip) (Space between Major Gridlines) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`strip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strip) | [`yAxisStrip`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrip) (Space between Major Gridlines) | diff --git a/en/components/charts/features/chart-axis-layouts.md b/en/components/charts/features/chart-axis-layouts.md index 41289c899a..80c80ee120 100644 --- a/en/components/charts/features/chart-axis-layouts.md +++ b/en/components/charts/features/chart-axis-layouts.md @@ -78,25 +78,25 @@ 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: d 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) | -| ------------------------------------------------------ | ------------------------------- | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`crossingAxis`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#crossingAxis) | None | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`crossingValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#crossingValue) | None | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`isInverted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#isInverted) | [`xAxisInverted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisInverted) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`isInverted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#isInverted) | [`yAxisInverted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisInverted) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `LabelLocation` | [`yAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `LabelLocation` | [`xAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `LabelHorizontalAlignment` | [`yAxisLabelHorizontalAlignment`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelHorizontalAlignment) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `LabelVerticalAlignment` | [`xAxisLabelVerticalAlignment`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVerticalAlignment) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `LabelVisibility` | [`yAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `LabelVisibility` | [`xAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) | +| [`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) | +| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`crossingAxis`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#crossingAxis) | None | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`crossingValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#crossingValue) | None | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`isInverted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#isInverted) | [`xAxisInverted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisInverted) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`isInverted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#isInverted) | [`yAxisInverted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisInverted) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `LabelLocation` | [`yAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `LabelLocation` | [`xAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `LabelHorizontalAlignment` | [`yAxisLabelHorizontalAlignment`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelHorizontalAlignment) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `LabelVerticalAlignment` | [`xAxisLabelVerticalAlignment`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVerticalAlignment) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `LabelVisibility` | [`yAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `LabelVisibility` | [`xAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) | +| `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 e9bad3ff3c..c3e3a9e8ac 100644 --- a/en/components/charts/features/chart-axis-options.md +++ b/en/components/charts/features/chart-axis-options.md @@ -137,19 +137,19 @@ 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) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`logarithmBase`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#logarithmBase) | [`yAxisLogarithmBase`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisLogarithmBase) | [`yAxisLogarithmBase`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisLogarithmBase) | -| `Axes` ➔ [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) ➔ [`gap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryaxisbasecomponent.html#gap) | None | [`xAxisGap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap) | -| `Axes` ➔ [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) ➔ [`overlap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryaxisbasecomponent.html#overlap) | None | [`xAxisOverlap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisOverlap) | -| `Axes` ➔ [`IgxTimeXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) | [`xAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) | None | -| `Axes` ➔ [`IgxPercentChangeYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpercentchangeyaxiscomponent.html) | [`yAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode) | None | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `labelSettings.angle` | [`yAxisLabelAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelAngle) | [`yAxisLabelAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelAngle) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `labelSettings.angle` | [`xAxisLabelAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelAngle) | [`xAxisLabelAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelAngle) | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `labelSettings.textColor` | `YAxisLabelForeground` | `YAxisLabelForeground` | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `labelSettings.textColor` | `XAxisLabelForeground` | `XAxisLabelForeground` | -| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `labelSettings.visibility` | [`yAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) | [`yAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) | -| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `labelSettings.visibility` | [`xAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) | [`xAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) | +| [`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) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`logarithmBase`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#logarithmBase) | [`yAxisLogarithmBase`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisLogarithmBase) | [`yAxisLogarithmBase`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisLogarithmBase) | +| `Axes` ➔ [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) ➔ [`gap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryaxisbasecomponent.html#gap) | None | [`xAxisGap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap) | +| `Axes` ➔ [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) ➔ [`overlap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryaxisbasecomponent.html#overlap) | None | [`xAxisOverlap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisOverlap) | +| `Axes` ➔ [`IgxTimeXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) | [`xAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) | None | +| `Axes` ➔ [`IgxPercentChangeYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpercentchangeyaxiscomponent.html) | [`yAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode) | None | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `labelSettings.angle` | [`yAxisLabelAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelAngle) | [`yAxisLabelAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelAngle) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `labelSettings.angle` | [`xAxisLabelAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelAngle) | [`xAxisLabelAngle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelAngle) | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `labelSettings.textColor` | `YAxisLabelForeground` | `YAxisLabelForeground` | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `labelSettings.textColor` | `XAxisLabelForeground` | `XAxisLabelForeground` | +| `Axes` ➔ [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `labelSettings.visibility` | [`yAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) | [`yAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) | +| `Axes` ➔ [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `labelSettings.visibility` | [`xAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) | [`xAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) | diff --git a/en/components/charts/features/chart-axis-types.md b/en/components/charts/features/chart-axis-types.md index 72985876d8..d877ebbeea 100644 --- a/en/components/charts/features/chart-axis-types.md +++ b/en/components/charts/features/chart-axis-types.md @@ -22,8 +22,8 @@ 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 | -|------------------|----------------|--------------------| +| 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: @@ -86,8 +86,8 @@ The [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-a 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 | -|------------------|----------------|------------------|----------------| +| 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): diff --git a/en/components/charts/features/chart-data-legend.md b/en/components/charts/features/chart-data-legend.md index b4aceaf5a3..438e94cea3 100644 --- a/en/components/charts/features/chart-data-legend.md +++ b/en/components/charts/features/chart-data-legend.md @@ -47,14 +47,14 @@ The columns of the [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/product 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 | -| -----------------|-------------- | -| Category Series | Value | -| Radial Series | Value | -| Polar Series | Radius, Angle | -| Bubble Series | X, Y, Radius | -| Scatter Series | X, Y | -| Range Series | High, Low | +| Type of Series | Column Names | +| :--------------- | :--------------------------------------------------- | +| Category Series | Value | +| Radial Series | Value | +| Polar Series | Radius, Angle | +| Bubble Series | X, Y, Radius | +| Scatter Series | X, Y | +| Range Series | High, Low | | Financial Series | High, Low, Open, Close, Change, TypicalPrice, Volume | Where the **TypicalPrice** and percentage **Change** of OHLC prices are automatically calculated by financial series so you do not need to include them in your data sources. @@ -79,12 +79,12 @@ The unit column displays an abbreviation symbol on the right side of value colum 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 | -| ------|---- | -| Category Series | ValueMemberAsLegendLabel="$"
ValueMemberAsLegendUnit="M" | -| Radial Series | ValueMemberAsLegendLabel="Distance:"
ValueMemberAsLegendUnit="KM" | -| Polar Series | RadiusMemberAsLegendLabel="Radius:"
RadiusMemberAsLegendUnit="KM"
AngleMemberAsLegendLabel="Angle:"
AngleMemberAsLegendUnit="°" | -| Range Series | HighMemberAsLegendLabel="H:"
HighMemberAsLegendUnit="K"
LowMemberAsLegendLabel="L:"
LowMemberAsLegendUnit="K" | +| 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="°" | +| Range Series | HighMemberAsLegendLabel="H:"
HighMemberAsLegendUnit="K"
LowMemberAsLegendLabel="L:"
LowMemberAsLegendUnit="K" | | Financial Series | OpenMemberAsLegendLabel="O:"
OpenMemberAsLegendUnit="K"
HighMemberAsLegendLabel="H:"
HighMemberAsLegendUnit="K"
LowMemberAsLegendLabel="L:"
LowMemberAsLegendUnit="K"
CloseMemberAsLegendLabel="C:"
CloseMemberAsLegendUnit="K"
| Also, you can use the `UnitText` property on the [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) to change text displayed in all Unit columns. diff --git a/en/components/charts/features/chart-data-selection.md b/en/components/charts/features/chart-data-selection.md index 3e2c62b056..13ac7ce96b 100644 --- a/en/components/charts/features/chart-data-selection.md +++ b/en/components/charts/features/chart-data-selection.md @@ -101,6 +101,6 @@ For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar 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 | -| ----------------------------------------------|---------------------------| -| | | +| [`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 0e4070c18c..9d000f3d93 100644 --- a/en/components/charts/features/chart-highlight-filter.md +++ b/en/components/charts/features/chart-highlight-filter.md @@ -94,13 +94,13 @@ 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` | -| [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) | [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesDisplayMode) | -| [`highlightedValuesFadeOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesFadeOpacity) | [`highlightedValuesFadeOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesFadeOpacity) | -| [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) | [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesDisplayMode) | -| [`initialHighlightFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialHighlightFilter) | | -| [`initialGroups`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialGroups) | | +| [`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` | +| [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) | [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesDisplayMode) | +| [`highlightedValuesFadeOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesFadeOpacity) | [`highlightedValuesFadeOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesFadeOpacity) | +| [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) | [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesDisplayMode) | +| [`initialHighlightFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialHighlightFilter) | | +| [`initialGroups`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialGroups) | | diff --git a/en/components/charts/features/chart-navigation.md b/en/components/charts/features/chart-navigation.md index 03e05e13bf..9c417c31d0 100644 --- a/en/components/charts/features/chart-navigation.md +++ b/en/components/charts/features/chart-navigation.md @@ -45,12 +45,12 @@ 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 | -| `Apple` | APPLE | -| `None` | no keys | +| :------------- | :---------------- | +| `Shift` | SHIFT | +| `Control` | CTRL | +| `Windows` | WIN | +| `Apple` | APPLE | +| `None` | no keys | ## Chart Navigation with Scrollbars diff --git a/en/components/charts/features/chart-performance.md b/en/components/charts/features/chart-performance.md index f31b8762e5..3193342562 100644 --- a/en/components/charts/features/chart-performance.md +++ b/en/components/charts/features/chart-performance.md @@ -103,18 +103,18 @@ 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)
| -| 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)
| -| 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)
| -| Polar Charts | - [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart)
- [Polar Spline Area Chart](../types/polar-chart.md#angular-polar-spline-area-chart)
| +| 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)
| +| 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)
| +| 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)
| +| Polar Charts | - [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart)
- [Polar Spline Area Chart](../types/polar-chart.md#angular-polar-spline-area-chart)
| | Stacked Charts | - [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart)
- [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-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)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart)
| \* Note that the [Scatter Polygon Chart](../types/shape-chart.md) and [Scatter Polyline Chart](../types/shape-chart.md) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster. @@ -275,27 +275,27 @@ 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` | -| Axis Minor Gridlines | `MinorStroke`, `MinorStrokeThickness` | -| Axis Main Line | `Stroke`, `StrokeThickness` | +| Axis Visual | Axis Properties | +| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| All Axis Visuals | `Interval`, `MinorInterval` | +| Axis Tickmarks | `TickStroke` , `TickStrokeThickness`, `TickLength` | +| Axis Major Gridlines | `MajorStroke`, `MajorStrokeThickness` | +| Axis Minor Gridlines | `MinorStroke`, `MinorStrokeThickness` | +| Axis Main Line | `Stroke`, `StrokeThickness` | | Axis Titles | [`chartTitle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#chartTitle), `TitleAngle` | -| Axis Strips | `Strip` | +| Axis Strips | `Strip` | ## Performance in Financial Chart @@ -334,16 +334,16 @@ 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) | -| 10+ of [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html) | Single [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) | -| 20+ of [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html) | Single [`IgxHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) | -| 20+ of [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) | Single [`IgxHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) | -| 10+ of [`IgxAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html) | Single [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) | -| 10+ of [`IgxColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html) | Single [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) | +| 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) | +| 10+ of [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html) | Single [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) | +| 20+ of [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html) | Single [`IgxHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) | +| 20+ of [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) | Single [`IgxHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) | +| 10+ of [`IgxAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html) | Single [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) | +| 10+ of [`IgxColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html) | Single [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) | ## Additional Resources diff --git a/en/components/charts/features/chart-tooltips.md b/en/components/charts/features/chart-tooltips.md index c0716b50e4..8261d45777 100644 --- a/en/components/charts/features/chart-tooltips.md +++ b/en/components/charts/features/chart-tooltips.md @@ -26,11 +26,11 @@ Angular Chart provide three types of tooltips that you can with tooltips enabled 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. | -| [`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. | +| 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. | +| [`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. | | [`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. |
diff --git a/en/components/charts/features/chart-user-annotations.md b/en/components/charts/features/chart-user-annotations.md index c9cd94f24c..a8e3ead628 100644 --- a/en/components/charts/features/chart-user-annotations.md +++ b/en/components/charts/features/chart-user-annotations.md @@ -40,16 +40,16 @@ 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.| -|[`badgeImageUri`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#badgeImageUri)|`string`|This property gets or sets a path to an image to use for the badge in the user annotation.| -|[`dialogSuggestedXLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#dialogSuggestedXLocation)|`double`|This property gets a recommended X location to show a dialog based on the location that the user annotation was added.| -|[`dialogSuggestedYLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#dialogSuggestedYLocation)|`double`|This property gets a recommended Y location to show a dialog based on the location that the user annotation was added.| -|[`label`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#label)|`string`|This property gets or sets the label to be shown in the user annotation.| -|[`mainColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#mainColor)|`string`|This property gets or sets the color to be used to fill the background of the user annotation.| +| 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. | +| [`badgeImageUri`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#badgeImageUri) | `string` | This property gets or sets a path to an image to use for the badge in the user annotation. | +| [`dialogSuggestedXLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#dialogSuggestedXLocation) | `double` | This property gets a recommended X location to show a dialog based on the location that the user annotation was added. | +| [`dialogSuggestedYLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#dialogSuggestedYLocation) | `double` | This property gets a recommended Y location to show a dialog based on the location that the user annotation was added. | +| [`label`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#label) | `string` | This property gets or sets the label to be shown in the user annotation. | +| [`mainColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#mainColor) | `string` | This property gets or sets the color to be used to fill the background of the user annotation. | After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the [`finishAnnotationFlow`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationlayercomponent.html#finishAnnotationFlow) method on the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling [`cancelAnnotationFlow`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationlayercomponent.html#cancelAnnotationFlow) and passing the [`annotationId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#annotationId) of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area. diff --git a/en/components/charts/types/area-chart.md b/en/components/charts/types/area-chart.md index 82ebc1d991..12a1db7d82 100644 --- a/en/components/charts/types/area-chart.md +++ b/en/components/charts/types/area-chart.md @@ -233,15 +233,15 @@ 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) | -| Radial Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRadialAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialareaseriescomponent.html) | -| Polar Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxPolarAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html) | -| Polar Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxPolarSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineareaseriescomponent.html) | -| 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 Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineareaseriescomponent.html) | -| Stacked 100% Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html) | -| Stacked 100% Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100SplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineareaseriescomponent.html) | +| 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) | +| Radial Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRadialAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialareaseriescomponent.html) | +| Polar Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxPolarAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html) | +| Polar Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxPolarSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineareaseriescomponent.html) | +| 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 Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineareaseriescomponent.html) | +| Stacked 100% Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html) | +| Stacked 100% Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100SplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineareaseriescomponent.html) | diff --git a/en/components/charts/types/column-chart.md b/en/components/charts/types/column-chart.md index 82613372cb..ff7288d5aa 100644 --- a/en/components/charts/types/column-chart.md +++ b/en/components/charts/types/column-chart.md @@ -187,11 +187,11 @@ 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) | -| 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) | -| Stacked 100% Column | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100ColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html) | -| Waterfall | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxWaterfallSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html) | +| 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) | +| 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) | +| Stacked 100% Column | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100ColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html) | +| Waterfall | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxWaterfallSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html) | diff --git a/en/components/charts/types/data-pie-chart.md b/en/components/charts/types/data-pie-chart.md index 1d38f2bcc2..8733bea437 100644 --- a/en/components/charts/types/data-pie-chart.md +++ b/en/components/charts/types/data-pie-chart.md @@ -227,7 +227,7 @@ 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.igxdomainchartcomponent.html#selectionMode) - [`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) | +| 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 f4e4987364..1b2b8c40f9 100644 --- a/en/components/charts/types/line-chart.md +++ b/en/components/charts/types/line-chart.md @@ -219,10 +219,10 @@ 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) | -| Stacked Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html) | -| Stacked 100% Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100LineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html) | +| 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) | +| Stacked Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html) | +| Stacked 100% Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100LineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html) | diff --git a/en/components/charts/types/pie-chart.md b/en/components/charts/types/pie-chart.md index b310b34316..ee72d949fc 100644 --- a/en/components/charts/types/pie-chart.md +++ b/en/components/charts/types/pie-chart.md @@ -202,7 +202,7 @@ The following table lists API members mentioned in the above sections: - [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) - [`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) | +| 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 bd60a394ec..2516214e09 100644 --- a/en/components/charts/types/scatter-chart.md +++ b/en/components/charts/types/scatter-chart.md @@ -103,11 +103,11 @@ 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) | -|High Density Scatter | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) | -|Scatter Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html) | -|Scatter Contour | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html) | +| 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) | +| High Density Scatter | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) | +| Scatter Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html) | +| Scatter Contour | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html) | diff --git a/en/components/charts/types/spline-chart.md b/en/components/charts/types/spline-chart.md index 362d4f47bb..9e4084daa7 100644 --- a/en/components/charts/types/spline-chart.md +++ b/en/components/charts/types/spline-chart.md @@ -116,8 +116,8 @@ 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 | -| --------------------|--------------------|-------------------------- | +| 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) | +| 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 a8019d8920..e4a97151d8 100644 --- a/en/components/charts/types/stacked-chart.md +++ b/en/components/charts/types/stacked-chart.md @@ -218,17 +218,17 @@ 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) | -| Stacked Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html) | -| 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 Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineareaseriescomponent.html) | -| Stacked 100% Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html) | -| Stacked 100% Bar | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100BarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html) | -| Stacked 100% Column | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100ColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html) | -| Stacked 100% Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100LineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.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) | +| 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) | +| Stacked Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html) | +| 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 Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineareaseriescomponent.html) | +| Stacked 100% Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html) | +| Stacked 100% Bar | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100BarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html) | +| Stacked 100% Column | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100ColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html) | +| Stacked 100% Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100LineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.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) | | Stacked 100% Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100SplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineareaseriescomponent.html) | diff --git a/en/components/chat.md b/en/components/chat.md index 4556ff59a9..0045c43f64 100644 --- a/en/components/chat.md +++ b/en/components/chat.md @@ -81,12 +81,12 @@ This approach makes it easy to plug the Chat into your own data source, such as ### Inputs The Chat component exposes several key properties that let you control its state and configuration: -| Name | Description | -| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `messages` | Array of messages (`IgcChatMessage[]`) displayed in the chat. You can bind to this to control which messages are shown. | -| `draftMessage` | The current unsent message, represented as an object containing `text` and optional `attachments`. This is useful for saving or restoring message drafts. | -| `options` | Chat configuration ([`IgxChatOptions`]({environment:angularApiUrl}/types/igxchatoptions.html)) such as current user ID, input placeholders, accepted file types, quick reply suggestions and typing behavior. | -| `templates` | Custom Angular templates ([`IgxChatTemplates`]({environment:angularApiUrl}/types/igxchattemplates.html)) for message content, input, attachments, and other parts of the chat UI. | +| Name | Description | +| :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `messages` | Array of messages (`IgcChatMessage[]`) displayed in the chat. You can bind to this to control which messages are shown. | +| `draftMessage` | The current unsent message, represented as an object containing `text` and optional `attachments`. This is useful for saving or restoring message drafts. | +| `options` | Chat configuration ([`IgxChatOptions`]({environment:angularApiUrl}/types/igxchatoptions.html)) such as current user ID, input placeholders, accepted file types, quick reply suggestions and typing behavior. | +| `templates` | Custom Angular templates ([`IgxChatTemplates`]({environment:angularApiUrl}/types/igxchattemplates.html)) for message content, input, attachments, and other parts of the chat UI. | These properties make it straightforward to synchronize the Chat’s UI with your application’s state and backend. @@ -294,7 +294,7 @@ The Chat component exposes both **CSS parts** and **slots** for fine-grained cus ### CSS Parts | Part name | Description | -| ------------------------------- | ------------------------------------------------------------------------------------ | +| :------------------------------ | :----------------------------------------------------------------------------------- | | `chat-container` | Styles the main chat container. | | `header` | Styles the chat header container. | | `prefix` | Styles the element before the chat title (e.g., avatar). | @@ -360,7 +360,7 @@ This allows you to style the `Chat` to match your brand without replacing its fu ### Slots | Slot name | Description | -| --------------------- | ------------------------------------------------------------------------ | +| :-------------------- | :----------------------------------------------------------------------- | | `prefix` | Slot for injecting content (e.g., avatar or icon) before the chat title. | | `title` | Slot for overriding the chat title content. | | `actions` | Slot for injecting header actions (e.g., buttons, menus). | @@ -384,8 +384,8 @@ These slots allow injecting custom UI into the header or suggestions area: The Chat component's options include a special flag for advanced styling scenarios: -| Option | Type | Default | Description | -| ----------------- | --------- | ------- | ------------------ | +| Option | Type | Default | Description | +| :---------------- | :-------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `adoptRootStyles` | `boolean` | false | When `true`, the component allows content rendered inside its Shadow DOM (e.g., from custom renderers) to inherit styles from the document's root. This provides a quick workaround for styling but is **not recommended** for production use. | This property can be useful if you prefer not to deal with Shadow DOM encapsulation when applying global CSS to custom-rendered templates. diff --git a/en/components/date-picker.md b/en/components/date-picker.md index a75d643ab8..051f51bc74 100644 --- a/en/components/date-picker.md +++ b/en/components/date-picker.md @@ -199,13 +199,13 @@ With it you gain access to the date picker's [`calendar`](calendar.md) and all o Opening and closing the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)'s calendar UI with the keyboard is available only for `dropdown` mode and can be triggered via the key combinations below: -|Keys|Description| -|----|-----------| -| Space | Displays the calendar pop-up and focuses it | -| Alt + | Displays the calendar pop-up and focuses it | -| Esc | Closes the calendar pop-up and focuses the input field | -| Enter | Closes the calendar pop-up, selecting the focused date and moves the focus to the input field | -| Alt + | Closes the calendar pop-up and focuses the input field | +| Keys | Description | +| :--------------------------------- | :-------------------------------------------------------------------------------------------- | +| Space | Displays the calendar pop-up and focuses it | +| Alt + | Displays the calendar pop-up and focuses it | +| Esc | Closes the calendar pop-up and focuses the input field | +| Enter | Closes the calendar pop-up, selecting the focused date and moves the focus to the input field | +| Alt + | Closes the calendar pop-up and focuses the input field | Since the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) uses the [`IgxDateTimeEditorDirective`](date-time-editor.md) it inherits its keyboard navigation. diff --git a/en/components/date-range-picker.md b/en/components/date-range-picker.md index ff67bc65ef..5a4034dbeb 100644 --- a/en/components/date-range-picker.md +++ b/en/components/date-range-picker.md @@ -193,24 +193,24 @@ The available keyboard navigation options vary depending on whether the componen **Two Inputs Mode:** -|Keys|Description| -|----|-----------| -| | Moves the caret one character to the left | -| | Moves the caret one character to the right | -| Ctrl + ArrowLeft | Moves the caret to the beginning of the current input mask section or to the start of the previous one if it's already at the beginning | -| Ctrl + ArrowRight | Moves the caret to the end of the current input mask section or to the end of the next one if it's already at the end | -| ArrowUp | Increments the currently "focused" part of the input mask by one step | -| ArrowDown | Decrements the currently "focused" part of the input mask by one step | -| Home | Moves the caret to the beginning of the input mask | -| End | Moves the caret to the end of the input mask | -| Ctrl + ; | Sets the current date as the value of the component | +| Keys | Description | +| :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- | +| | Moves the caret one character to the left | +| | Moves the caret one character to the right | +| Ctrl + ArrowLeft | Moves the caret to the beginning of the current input mask section or to the start of the previous one if it's already at the beginning | +| Ctrl + ArrowRight | Moves the caret to the end of the current input mask section or to the end of the next one if it's already at the end | +| ArrowUp | Increments the currently "focused" part of the input mask by one step | +| ArrowDown | Decrements the currently "focused" part of the input mask by one step | +| Home | Moves the caret to the beginning of the input mask | +| End | Moves the caret to the end of the input mask | +| Ctrl + ; | Sets the current date as the value of the component | **Both Single and Two Inputs Modes:** -|Keys|Description| -|----|-----------| -| Alt + ArrowDown | Opens the calendar dropdown | -| Alt + ArrowUp | Closes the calendar dropdown | +| Keys | Description | +| :------------------------- | :--------------------------- | +| Alt + ArrowDown | Opens the calendar dropdown | +| Alt + ArrowUp | Closes the calendar dropdown | The [calendar keyboard navigation](calendar.md#keyboard-navigation) section contains all keyboard combinations that can be used in the calendar. @@ -517,16 +517,16 @@ When two editors are used, the default separator can be replaced using the [`igx You can further customize the pop-up calendar using various properties. More information on how these affect the calendar can be found in the [**IgxCalendarComponent**](calendar.md) topic. -|Name|Type|Description| -|--|--|--| -| `orientation` | 'vertical' or 'horizontal' | Allows you to set whether the calendar should be displayed vertically or horizontally. | -| `displayMonthsCount` | string | Controls how many months are visible at a time, with a value of either 1 or 2. | -| `showWeekNumbers` | string | Enables or disables the week number column in the calendar. | -| `weekStart` | string | Sets the start day of the week. | -| `hideOutsideDays` | boolean | Hides days that fall outside the current month view. | -| `hideHeader` | boolean | Hides the calendar header (applicable only in dialog mode). | -| `headerOrientation` | 'vertical' or 'horizontal' | Aligns the calendar header vertically or horizontally (dialog mode only). | -| `activeDate` | Date | Sets the date that is initially highlighted in the calendar. If not set, the current date becomes the active date. | +| Name | Type | Description | +| :------------------- | :------------------------- | :----------------------------------------------------------------------------------------------------------------- | +| `orientation` | 'vertical' or 'horizontal' | Allows you to set whether the calendar should be displayed vertically or horizontally. | +| `displayMonthsCount` | string | Controls how many months are visible at a time, with a value of either 1 or 2. | +| `showWeekNumbers` | string | Enables or disables the week number column in the calendar. | +| `weekStart` | string | Sets the start day of the week. | +| `hideOutsideDays` | boolean | Hides days that fall outside the current month view. | +| `hideHeader` | boolean | Hides the calendar header (applicable only in dialog mode). | +| `headerOrientation` | 'vertical' or 'horizontal' | Aligns the calendar header vertically or horizontally (dialog mode only). | +| `activeDate` | Date | Sets the date that is initially highlighted in the calendar. If not set, the current date becomes the active date. | ```html [!NOTE] > The `IgxDateTimeEditorDirective` directive supports IME input. When typing in an Asian language input, the control will display input method compositions and candidate lists directly in the control’s editing area, and immediately re-flow surrounding text as the composition ends. diff --git a/en/components/excel-library-using-worksheets.md b/en/components/excel-library-using-worksheets.md index 877bfca28d..035c9b41e9 100644 --- a/en/components/excel-library-using-worksheets.md +++ b/en/components/excel-library-using-worksheets.md @@ -112,18 +112,18 @@ 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.| -|`ApplyFixedValuesFilter`|Represents a filter which can filter cells based on specific, fixed values, which are allowed to display.| -|[`applyFontColorFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyFontColorFilter)|Represents a filter which will filter cells based on their font colors. This filter specifies a single color. Cells with this color font will be visible in the data range. All other cells will be hidden.| -|[`applyIconFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyIconFilter)|Represents a filter which can filter cells based on their conditional formatting icon.| -|[`applyRelativeDateRangeFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyRelativeDateRangeFilter)|Represents a filter which can filter date cells based on dates relative to the when the filter was applied.| -|[`applyTopOrBottomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyTopOrBottomFilter)|Represents a filter which can filter in cells in the upper or lower portion of the sorted values.| -|[`applyYearToDateFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyYearToDateFilter)|Represents a filter which can filter in date cells if the dates occur between the start of the current year and the time when the filter is evaluated.| -|[`applyCustomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyCustomFilter)|Represents a filter which can filter data based on one or two custom conditions. These two filter conditions can be combined with a logical "and" or a logical "or" operation.| +| 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. | +| `ApplyFixedValuesFilter` | Represents a filter which can filter cells based on specific, fixed values, which are allowed to display. | +| [`applyFontColorFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyFontColorFilter) | Represents a filter which will filter cells based on their font colors. This filter specifies a single color. Cells with this color font will be visible in the data range. All other cells will be hidden. | +| [`applyIconFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyIconFilter) | Represents a filter which can filter cells based on their conditional formatting icon. | +| [`applyRelativeDateRangeFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyRelativeDateRangeFilter) | Represents a filter which can filter date cells based on dates relative to the when the filter was applied. | +| [`applyTopOrBottomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyTopOrBottomFilter) | Represents a filter which can filter in cells in the upper or lower portion of the sorted values. | +| [`applyYearToDateFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyYearToDateFilter) | Represents a filter which can filter in date cells if the dates occur between the start of the current year and the time when the filter is evaluated. | +| [`applyCustomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyCustomFilter) | Represents a filter which can filter data based on one or two custom conditions. These two filter conditions can be combined with a logical "and" or a logical "or" operation. | You can use the following code snippet as an example to add a filter to a worksheet region: diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md index 77ed5ff353..d776155bfa 100644 --- a/en/components/expansion-panel.md +++ b/en/components/expansion-panel.md @@ -92,14 +92,14 @@ Now that you have the Ignite UI for Angular Expansion Panel module or directives The table below shows all the available markup parts for the Angular Expansion Panel. -| Tag Name | Description | -| :-------------------------------: | :--------------------------------------------------------------------------------------------------------------------: | -| `igx-expansion-panel` | The component host - stores header and body. | -| `igx-expansion-panel-header` | Stores the component header. This is always visible. Stores title and description as well as any additional content | -| `igx-expansion-panel-title` | Use it to set expansion panel title. | -| `igx-expansion-panel-description` | It can be used to provide a short summary. The description will always appear after the title (if the title is set). | -| `igx-expansion-panel-icon` | Use it to change the default expand/collapse icon. | -| `igx-expansion-panel-body` | This is the expandable container and it's only visible when the panel is expanded. | +| Tag Name | Description | +| :-------------------------------: | :-------------------------------------------------------------------------------------------------------------------: | +| `igx-expansion-panel` | The component host - stores header and body. | +| `igx-expansion-panel-header` | Stores the component header. This is always visible. Stores title and description as well as any additional content | +| `igx-expansion-panel-title` | Use it to set expansion panel title. | +| `igx-expansion-panel-description` | It can be used to provide a short summary. The description will always appear after the title (if the title is set). | +| `igx-expansion-panel-icon` | Use it to change the default expand/collapse icon. | +| `igx-expansion-panel-body` | This is the expandable container and it's only visible when the panel is expanded. | ## Properties Binding and Events diff --git a/en/components/exporter-csv.md b/en/components/exporter-csv.md index fe710129da..e1c8e51907 100644 --- a/en/components/exporter-csv.md +++ b/en/components/exporter-csv.md @@ -135,11 +135,11 @@ The CSV Exporter supports several types of exporting formats. The export format Different export formats have different file extensions and value delimiters. The following table maps the export formats and their respective file extensions and delimiters: -| Format | File Extension | Default Delimiter | -| :--- | :--- | :--- | -| [`CsvFileTypes.CSV`]({environment:angularApiUrl}/enums/csvfiletypes.html#csv) | .csv | Comma | -| [`CsvFileTypes.TAB`]({environment:angularApiUrl}/enums/csvfiletypes.html#tab) | .tab | Tab | -| [`CsvFileTypes.TSV`]({environment:angularApiUrl}/enums/csvfiletypes.html#tsv) | .tsv | Tab | +| Format | File Extension | Default Delimiter | +| :---------------------------------------------------------------------------- | :------------- | :---------------- | +| [`CsvFileTypes.CSV`]({environment:angularApiUrl}/enums/csvfiletypes.html#csv) | .csv | Comma | +| [`CsvFileTypes.TAB`]({environment:angularApiUrl}/enums/csvfiletypes.html#tab) | .tab | Tab | +| [`CsvFileTypes.TSV`]({environment:angularApiUrl}/enums/csvfiletypes.html#tsv) | .tsv | Tab |
diff --git a/en/components/exporter-pdf.md b/en/components/exporter-pdf.md index e9f2e52c3d..a23f3b88ba 100644 --- a/en/components/exporter-pdf.md +++ b/en/components/exporter-pdf.md @@ -202,8 +202,8 @@ The following fonts provide excellent Unicode coverage: ## Known Limitations -| Limitation | Description | -|---|---| +| Limitation | Description | +| :--------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Wide PDF layouts | Very wide grids can force PDF columns to shrink to fit the page. Apply explicit column widths or hide low‑priority fields before exporting to keep the document legible. | ## API References diff --git a/en/components/for-of.md b/en/components/for-of.md index a507fe9414..eb72cd0e2f 100644 --- a/en/components/for-of.md +++ b/en/components/for-of.md @@ -270,8 +270,8 @@ The `igxFor` directive includes the following helper properties in its context: ## Known Limitations -|Limitation|Description| -|--- |--- | +| Limitation | Description | +| :-------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `scrollTo` method does not work correctly when the content size of the rendered templates changes post initialization | When the elements inside the template have a size, that changes runtime after initialization (for example as a result of content projection, remote request resolution etc.), then the `scrollTo` method will not be able to scroll to the correct index. The method will scroll to the position of the index before the runtime size change occurs, hence the location will not be correct after the size is changed later. A possible workaround is to use templates that do not change their size based on their content if the content is loaded later. | ## API References diff --git a/en/components/general-breaking-changes-dv.md b/en/components/general-breaking-changes-dv.md index 545cbd796b..7dfe385348 100644 --- a/en/components/general-breaking-changes-dv.md +++ b/en/components/general-breaking-changes-dv.md @@ -16,7 +16,7 @@ This topic provides information about breaking changes in Ignite UI for Angular - All types of charts/series have new colors for brush/fill and outlines | Old series brushes outlines | New series outline brushes | -| --------------------------- | -------------------------- | +| :-------------------------- | :------------------------- | | `Color_001=#7446B9` | `Color_001=#8bdc5c` | | `Color_002=#9FB328` | `Color_002=#8b5bb1` | | `Color_003=#F96232` | `Color_003=#6db1ff` | @@ -40,19 +40,19 @@ This topic provides information about breaking changes in Ignite UI for Angular - Scatter High Density series has new colors for min/max heat properties - | Old heat min color | New heat min color | - | ------------------ | ------------------ | - | `#FF7446B9` | `#ff8b5bb1` | +| Old heat min color | New heat min color | +| :----------------- | :----------------- | +| `#FF7446B9` | `#ff8b5bb1` | - | Old heat max color | New heat max color | - | ------------------ | ------------------ | - | `#FFC62828` | `#ffee5879` | +| Old heat max color | New heat max color | +| :----------------- | :----------------- | +| `#FFC62828` | `#ffee5879` | - Financial/Waterfall series have new colors for negative fill of their visuals - | Old negative brush | new negative brush | - | ------------------ | ------------------ | - | `#FFC62828` | `#ffee5879` | +| Old negative brush | new negative brush | +| :----------------- | :----------------- | +| `#FFC62828` | `#ffee5879` |
@@ -68,10 +68,10 @@ Import statements have been simplified to use just package names instead of full > These breaking changes were introduce in version **8.2.12** of these packages and components: | 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-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-charts | Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, [Zoom Slider](zoomslider-overview.md) | | igniteui-angular-core | all classes and enums | diff --git a/en/components/general-changelog-dv.md b/en/components/general-changelog-dv.md index d6526e0bc6..c9398a8b07 100644 --- a/en/components/general-changelog-dv.md +++ b/en/components/general-changelog-dv.md @@ -20,15 +20,15 @@ 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 | -| 40238 | Excel | fixed Excel Formula parser - Workbook.Load() throwing a Excel.FormulaParseException| -| 41167 | Excel | Object's Formulas are not round-tripped - Added Excel support for round tripping the camera tool | -| 41419 | Excel | Saving a VBA Signed Excel file does not keep a signature/certificate. | -| 41594 | IgxDataChart | AssigningCategoryStyle args.GetItems is null or not working to update items in the fragment series. | +| 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 | +| 40238 | Excel | fixed Excel Formula parser - Workbook.Load() throwing a Excel.FormulaParseException | +| 41167 | Excel | Object's Formulas are not round-tripped - Added Excel support for round tripping the camera tool | +| 41419 | Excel | Saving a VBA Signed Excel file does not keep a signature/certificate. | +| 41594 | IgxDataChart | AssigningCategoryStyle args.GetItems is null or not working to update items in the fragment series. | ## **21.0.0 (January 2026)** @@ -46,11 +46,11 @@ 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| +| 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 | ### Enhancements @@ -86,12 +86,12 @@ 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| -|40490|IgxDatePicker|Inputs by Autofill won't give any effects for a date picker| +| 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 | +| 40490 | IgxDatePicker | Inputs by Autofill won't give any effects for a date picker | ## **20.1.0 (September 2025)** @@ -154,22 +154,22 @@ 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| -|30600 | `DoughnutChart` | No textStyle property for either the chart or series (pie chart has this)| -|38231 | `Grid` | Unpinned column does not return to the original position if hidden columns exist| -|33861 | Excel Library | Adding line chart corrupts excel File for German culture| +| 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 | +| 30600 | `DoughnutChart` | No textStyle property for either the chart or series (pie chart has this) | +| 38231 | `Grid` | Unpinned column does not return to the original position if hidden columns exist | +| 33861 | Excel Library | Adding line chart corrupts excel File for German culture | ## **20.0.1 (August 2025)** ### Bug Fixes -| Bug Number | Control | Description | -|------------|---------|------------------| -|36448 | `RadialGauge` | Radial label format properties do not work. (eg. Title, SubTitles)| +| Bug Number | Control | Description | +| :--------- | :------------ | :----------------------------------------------------------------- | +| 36448 | `RadialGauge` | Radial label format properties do not work. (eg. Title, SubTitles) | ### igniteui-angular-charts (Charts) @@ -229,11 +229,11 @@ 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.| +| 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. | ## **19.0.1 (February 2025)** @@ -249,20 +249,20 @@ 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| -|35498 | `DataChart` | Tooltips for the series specified in IncludedSeries are not displayed| -|34776 | `DataChart` | Repeatedly showing and hiding the `DataChart` causes memory leakage in JS Heap| -|34053 | `RadialGauge` | The position of the scale label is shifted| -|35496 | [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) | Error when setting styles in Excel with images| -|36176 | Excel Library | Exception occurs when loading an Excel workbook that has a LET function| -|36379 | Excel Library | Colors with any alpha channel in an excel workbook fail to load| -|26218 | Excel Library | Chart's plot area right margin becomes narrower and fill pattern and fill foreground are gone just by loading an Excel file| -|35495 | Excel Library | Pictures in cells are lost when a template file is loaded| -|34083 | Excel Library | TextOperatorConditionalFormat's is not loaded/saved properly if the text contains = in a template Excel file| +| 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 | +| 35498 | `DataChart` | Tooltips for the series specified in IncludedSeries are not displayed | +| 34776 | `DataChart` | Repeatedly showing and hiding the `DataChart` causes memory leakage in JS Heap | +| 34053 | `RadialGauge` | The position of the scale label is shifted | +| 35496 | [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) | Error when setting styles in Excel with images | +| 36176 | Excel Library | Exception occurs when loading an Excel workbook that has a LET function | +| 36379 | Excel Library | Colors with any alpha channel in an excel workbook fail to load | +| 26218 | Excel Library | Chart's plot area right margin becomes narrower and fill pattern and fill foreground are gone just by loading an Excel file | +| 35495 | Excel Library | Pictures in cells are lost when a template file is loaded | +| 34083 | Excel Library | TextOperatorConditionalFormat's is not loaded/saved properly if the text contains = in a template Excel file | ## **19.0.0 (January 2025)** @@ -458,8 +458,8 @@ This release introduces a few improvements and simplifications to visual design - Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's [`legendItemBadgeMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeMode) property to `MatchSeries` enum value - Changed color palette of series and markers displayed in all charts to improve accessibility -| Old brushes/outlines | New outline/brushes | -| -------------------- | ------------------- | +| 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
|
@@ -501,14 +501,14 @@ This release introduces several new and improved visual design and configuration - Added support to automatically expanding the horizontal margins of the chart based on the initial labels displayed - Redesigned color palette of series and markers: -| Old brushes/outlines | New outline/brushes | -| -------------------- | ------------------- | +| 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 | @@ -538,14 +538,14 @@ Import statements have been simplified to use just package names instead of full > \[!Note] > 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-charts| Category Chart, Data Chart, Donut Chart, Financial Chart, Pie Chart, [Zoom Slider](zoomslider-overview.md) | -| igniteui-angular-core | all classes and enums | +| 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-charts | Category Chart, Data Chart, Donut Chart, Financial Chart, Pie Chart, [Zoom Slider](zoomslider-overview.md) | +| igniteui-angular-core | all classes and enums | - Code After Changes diff --git a/en/components/general-cli-overview.md b/en/components/general-cli-overview.md index 551a99d0bd..cac256e7f7 100644 --- a/en/components/general-cli-overview.md +++ b/en/components/general-cli-overview.md @@ -64,7 +64,7 @@ ig run A full list of the available Ignite UI CLI commands and their usage (like passing flags, etc.), can be found at the [Ignite UI CLI wiki pages](https://github.com/IgniteUI/igniteui-cli/wiki): | Command | Alias | Description | -| --------------------------------------------------------------------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| :-------------------------------------------------------------------- | :---- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser. | | [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory | | [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types | diff --git a/en/components/general-whats-new-dv.md b/en/components/general-whats-new-dv.md index 46ebbab838..7a2d879b44 100644 --- a/en/components/general-whats-new-dv.md +++ b/en/components/general-whats-new-dv.md @@ -19,8 +19,8 @@ This release introduces several new and improved visual design and configuration eg. | Chart Defaults 1 | Chart Defaults 2 | -| ----------------------------------------------------------------- | ----------------------------------------------------------------- | -| Chart Defaults 3 | Chart Defaults 4 | +| :---------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------- | +| Chart Defaults 3 | Chart Defaults 4 |
diff --git a/en/components/general/cli/auth-template.md b/en/components/general/cli/auth-template.md index ee3ebd2d94..1150e7bfef 100644 --- a/en/components/general/cli/auth-template.md +++ b/en/components/general/cli/auth-template.md @@ -129,11 +129,11 @@ As you enable providers, all buttons will become active: Here are the default providers the project template comes with: -| Provider | Uses | Redirect URL | -|---|---|---| -| Google | OpenID Connect* | `/redirect-google` | -| Microsoft | OpenID Connect* | `/redirect-microsoft` | -| Facebook | Facebook Connect** | `/redirect-facebook` | +| Provider | Uses | Redirect URL | +| :-------- | :----------------- | :------------------------------ | +| Google | OpenID Connect* | `/redirect-google` | +| Microsoft | OpenID Connect* | `/redirect-microsoft` | +| Facebook | Facebook Connect** | `/redirect-facebook` | Where the app is hosted will determine the root URL, for example by default on the first app run that will be `http://localhost:4200`. diff --git a/en/components/general/cli/component-templates.md b/en/components/general/cli/component-templates.md index 6f7828244f..246a4509c2 100644 --- a/en/components/general/cli/component-templates.md +++ b/en/components/general/cli/component-templates.md @@ -8,52 +8,52 @@ _keywords: igniteui for angular | angular schematics | templates | infragistics The following table provides a list of the Ignite UI Angular components that can be generated using the Ignite UI Angular Schematics or Ignite UI CLI commands. In addition you can find links to the available demos in our documentation, but note that those are not exactly identical to the ones generated by the CLI. -| Template | Code and description | Demo | -| ----------------- | -------------------------------------------------------------------------------------------------------------------|------------------- | -|Grids & Lists| | | -|grid |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid newGrid
Ignite UI CLI:
ig add grid newGrid
Basic template for IgxGrid.
|[IgxGrid](../../grid/grid.md) component with auto generated columns | -|grid-batch-editing |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
Ignite UI CLI:
ig add grid-batch-editing newGridBatchEditing
Sample IgxGrid with batch editing.
|[IgxGrid](../../grid/grid.md) that uses Transaction service for [batch editing](../../grid/batch-editing.md) | -|custom-grid |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
Ignite UI CLI:
ig add custom-grid newCustomGrid
IgxGrid with optional features like sorting, filtering, editing, etc.
| [IgxGrid](../../grid/grid.md) with optional features like [Sorting](../../grid/sorting.md), [Filtering](../../grid/filtering.md), [Cell Editing](../../grid/editing.md), [Row Editing](../../grid/row-editing.md), [Group By](../../grid/groupby.md), [Resizing](../../grid/column-resizing.md), [Selection](../../grid/selection.md), [Paging](../../grid/paging.md), [Column Pinning](../../grid/column-pinning.md), [Column Moving](../../grid/column-moving.md), [Column Hiding](../../grid/column-hiding.md) | -|grid-summaries |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
Ignite UI CLI:
ig add grid-summaries newGridSummaries
IgxGrid with summaries feature.
| [IgxGrid](../../grid/grid.md) with [summaries](../../grid/summaries.md) feature.| -|grid-multi-column-headers|Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders
Ignite UI CLI:
ig add grid-multi-column-headers newGridMultiColumnHeaders
IgxGrid with multiple header columns.
|[IgxGrid](../../grid/grid.md) with [multi-column headers](../../grid/multi-column-headers.md) | -|tree grid |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
Ignite UI CLI:
ig add custom-tree-grid newCustomTreeGrid
IgxTreeGrid with optional features like sorting, filtering, row editing, etc.
|[IgxTreeGrid](../../treegrid/tree-grid.md) with optional features like [Sorting](../../treegrid/sorting.md), [Filtering](../../treegrid/filtering.md), [Cell Editing](../../treegrid/editing.md), [Row Editing](../../treegrid/row-editing.md), [Resizing](../../treegrid/column-resizing.md), [Row Selection](../../treegrid/selection.md), [Paging](../../treegrid/paging.md), [Column Pinning](../../treegrid/column-pinning.md), [Column Moving](../../treegrid/column-moving.md), [Column Hiding](../../treegrid/column-hiding.md) | -|list |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c list newList
Ignite UI CLI:
ig add list newList
Basic IgxList.
|[IgxList](../../list.md) with search and filtering logic. | -|combo |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c combo newCombo
Ignite UI CLI:
ig add combo newCombo
Basic IgxCombo with templating.
|[IgxCombo](../../combo.md) with custom [templating](../../combo-templates.md). | -|Charts | | | -|category chart |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c category-chart newCategoryChart
Ignite UI CLI:
ig add category-chart newCategoryChart
Basic category chart with chart type selector.
|Basic [category chart](../../charts/types/column-chart.md) with chart type selector.| -|financial chart |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
Ignite UI CLI:
ig add financial-chart newFinancialChart
Basic financial chart with automatic toolbar and type selection.
|Basic [financial chart](../../charts/types/stock-chart.md) with automatic toolbar and type selection.| -|Gauges| | | -|bullet graph |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
Ignite UI CLI:
ig add bullet-graph newBulletGraph
IgxBulletGraph with different animations.
|[IgxBulletGraph](../../bullet-graph.md) with different animations.| -|linear gauge |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
Ignite UI CLI:
ig add linear-gauge newLinearGauge
IgxLinearGauge with different animations.
|[IgxLinearGauge](../../linear-gauge.md) with different animations.| -|radial gauge |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
Ignite UI CLI:
ig add radial-gauge newRadialGauge
IgxRadialGauge with different animations.
|[IgxRadialGauge](../../radial-gauge.md) with different animations.| -|Layouts | | | -|dock-manager |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dock-manager newDockManager
Ignite UI CLI:
ig add dock-manager newDockManager
Basic IgcDockManager.
|[IgcDockManager](../../dock-manager.md) with nine content slots. | -|carousel |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarousel
Basic IgxCarousel.
|[IgxCarousel](../../carousel.md) cycling through a series of images. | -|tabs |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabs
Basic IgxTabs.
|[IgxTabs](../../tabs.md) component that includes three customized tab-groups. | -|bottom-nav |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNav
Three item bottom-nav template.
|Three item bottom [navbar](../../navbar.md) template. | -|Data Entry & Display| | | -|chip |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChip
Basic IgxChip.
| [IgxChip](../../chip.md) components inside igx-chips-area. | -|dropdown |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dropdown newDropDown
Ignite UI CLI:
ig add dropdown newDropDown
Basic IgxDropDown.
|Basic [IgxDropDown](../../drop-down.md) that displays a list of items. | -|select (v4.1.0) |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select newSelect
Ignite UI CLI:
ig add select newSelect
Basic IgxSelect.
|Simple [IgxSelect](../../select.md) that displays a list of items..| -|select (v4.1.0) |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
Ignite UI CLI:
ig add select-groups newGroupsSelect
Select With Groups.
|[IgxSelect](../../select.md) displaying grouped items. | -|select (v4.1.0) |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-in-form newFormSelect
Ignite UI CLI:
ig add select-in-form newFormSelect
IgxSelect in a form.
|[IgxSelect](../../select.md) component usage in a form. | -|input group |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c input-group newInputGroup
Ignite UI CLI:
ig add input-group newInputGroup
Basic IgxInputGroup form view.
|Form view created with [IgxInputGroup](../../input-group.md).| -|Interactions| | | -|dialog |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dialog newDialog
Ignite UI CLI:
ig add dialog newDialog
Basic IgxDialog.
| Sample of the [IgxDialog](../../dialog.md) used as a standard confirmation dialog. | -|tooltip |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tooltip newTooltip
Ignite UI CLI:
ig add tooltip newTooltip
A fully customizable tooltip.
|Basic tooltip created with the [IgxTooltip](../../tooltip.md). | -|Scheduling | | | -|date-picker |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c date-picker newDatePicker
Ignite UI CLI:
ig add date-picker newDatePicker
Basic IgxDatePicker.
|Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. | -|time-picker |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c time-picker newTimePicker
Ignite UI CLI:
ig add time-picker newTimePicker
Basic IgxTimePicker.
|Basic [IgxTimePicker](../../time-picker.md) with initial value set and one-way data binding. | -|calendar |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendar
IgxCalendar with single selection.
|Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. | +| Template | Code and description | Demo | +| :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Grids & Lists | | | +| grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid newGrid
Ignite UI CLI:
ig add grid newGrid
Basic template for IgxGrid.
| [IgxGrid](../../grid/grid.md) component with auto generated columns | +| grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
Ignite UI CLI:
ig add grid-batch-editing newGridBatchEditing
Sample IgxGrid with batch editing.
| [IgxGrid](../../grid/grid.md) that uses Transaction service for [batch editing](../../grid/batch-editing.md) | +| custom-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
Ignite UI CLI:
ig add custom-grid newCustomGrid
IgxGrid with optional features like sorting, filtering, editing, etc.
| [IgxGrid](../../grid/grid.md) with optional features like [Sorting](../../grid/sorting.md), [Filtering](../../grid/filtering.md), [Cell Editing](../../grid/editing.md), [Row Editing](../../grid/row-editing.md), [Group By](../../grid/groupby.md), [Resizing](../../grid/column-resizing.md), [Selection](../../grid/selection.md), [Paging](../../grid/paging.md), [Column Pinning](../../grid/column-pinning.md), [Column Moving](../../grid/column-moving.md), [Column Hiding](../../grid/column-hiding.md) | +| grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
Ignite UI CLI:
ig add grid-summaries newGridSummaries
IgxGrid with summaries feature.
| [IgxGrid](../../grid/grid.md) with [summaries](../../grid/summaries.md) feature. | +| grid-multi-column-headers | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders
Ignite UI CLI:
ig add grid-multi-column-headers newGridMultiColumnHeaders
IgxGrid with multiple header columns.
| [IgxGrid](../../grid/grid.md) with [multi-column headers](../../grid/multi-column-headers.md) | +| tree grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
Ignite UI CLI:
ig add custom-tree-grid newCustomTreeGrid
IgxTreeGrid with optional features like sorting, filtering, row editing, etc.
| [IgxTreeGrid](../../treegrid/tree-grid.md) with optional features like [Sorting](../../treegrid/sorting.md), [Filtering](../../treegrid/filtering.md), [Cell Editing](../../treegrid/editing.md), [Row Editing](../../treegrid/row-editing.md), [Resizing](../../treegrid/column-resizing.md), [Row Selection](../../treegrid/selection.md), [Paging](../../treegrid/paging.md), [Column Pinning](../../treegrid/column-pinning.md), [Column Moving](../../treegrid/column-moving.md), [Column Hiding](../../treegrid/column-hiding.md) | +| list | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c list newList
Ignite UI CLI:
ig add list newList
Basic IgxList.
| [IgxList](../../list.md) with search and filtering logic. | +| combo | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c combo newCombo
Ignite UI CLI:
ig add combo newCombo
Basic IgxCombo with templating.
| [IgxCombo](../../combo.md) with custom [templating](../../combo-templates.md). | +| Charts | | | +| category chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c category-chart newCategoryChart
Ignite UI CLI:
ig add category-chart newCategoryChart
Basic category chart with chart type selector.
| Basic [category chart](../../charts/types/column-chart.md) with chart type selector. | +| financial chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
Ignite UI CLI:
ig add financial-chart newFinancialChart
Basic financial chart with automatic toolbar and type selection.
| Basic [financial chart](../../charts/types/stock-chart.md) with automatic toolbar and type selection. | +| Gauges | | | +| bullet graph | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
Ignite UI CLI:
ig add bullet-graph newBulletGraph
IgxBulletGraph with different animations.
| [IgxBulletGraph](../../bullet-graph.md) with different animations. | +| linear gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
Ignite UI CLI:
ig add linear-gauge newLinearGauge
IgxLinearGauge with different animations.
| [IgxLinearGauge](../../linear-gauge.md) with different animations. | +| radial gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
Ignite UI CLI:
ig add radial-gauge newRadialGauge
IgxRadialGauge with different animations.
| [IgxRadialGauge](../../radial-gauge.md) with different animations. | +| Layouts | | | +| dock-manager | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dock-manager newDockManager
Ignite UI CLI:
ig add dock-manager newDockManager
Basic IgcDockManager.
| [IgcDockManager](../../dock-manager.md) with nine content slots. | +| carousel | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarousel
Basic IgxCarousel.
| [IgxCarousel](../../carousel.md) cycling through a series of images. | +| tabs | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabs
Basic IgxTabs.
| [IgxTabs](../../tabs.md) component that includes three customized tab-groups. | +| bottom-nav | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNav
Three item bottom-nav template.
| Three item bottom [navbar](../../navbar.md) template. | +| Data Entry & Display | | | +| chip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChip
Basic IgxChip.
| [IgxChip](../../chip.md) components inside igx-chips-area. | +| dropdown | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dropdown newDropDown
Ignite UI CLI:
ig add dropdown newDropDown
Basic IgxDropDown.
| Basic [IgxDropDown](../../drop-down.md) that displays a list of items. | +| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select newSelect
Ignite UI CLI:
ig add select newSelect
Basic IgxSelect.
| Simple [IgxSelect](../../select.md) that displays a list of items.. | +| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
Ignite UI CLI:
ig add select-groups newGroupsSelect
Select With Groups.
| [IgxSelect](../../select.md) displaying grouped items. | +| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-in-form newFormSelect
Ignite UI CLI:
ig add select-in-form newFormSelect
IgxSelect in a form.
| [IgxSelect](../../select.md) component usage in a form. | +| input group | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c input-group newInputGroup
Ignite UI CLI:
ig add input-group newInputGroup
Basic IgxInputGroup form view.
| Form view created with [IgxInputGroup](../../input-group.md). | +| Interactions | | | +| dialog | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dialog newDialog
Ignite UI CLI:
ig add dialog newDialog
Basic IgxDialog.
| Sample of the [IgxDialog](../../dialog.md) used as a standard confirmation dialog. | +| tooltip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tooltip newTooltip
Ignite UI CLI:
ig add tooltip newTooltip
A fully customizable tooltip.
| Basic tooltip created with the [IgxTooltip](../../tooltip.md). | +| Scheduling | | | +| date-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c date-picker newDatePicker
Ignite UI CLI:
ig add date-picker newDatePicker
Basic IgxDatePicker.
| Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. | +| time-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c time-picker newTimePicker
Ignite UI CLI:
ig add time-picker newTimePicker
Basic IgxTimePicker.
| Basic [IgxTimePicker](../../time-picker.md) with initial value set and one-way data binding. | +| calendar | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendar
IgxCalendar with single selection.
| Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. | ## Scenario templates -| Template | Code and description | Demo | -| ----------------- | -------------------------------------------------------------------------------------------------------------------|------------------- | -|awesome-grid |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid
Ignite UI CLI:
ig add awesome-grid newAwesomeGrid
IgxGrid with custom cell templating.
|[IgxGrid](../../grid/grid.md) with cell templating and controls embedded into the cells. | -|crm-grid |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c crm-grid newCrmGrid
Ignite UI CLI:
ig add crm-grid newCrmGrid
IgxGrid with custom search implementation.
|[IgxGrid](../../grid/grid.md) with custom search implementation. | -|fintech-grid |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid
Ignite UI CLI:
ig add fintech-grid newFinTechGrid
IgxGrid handling thousands of live updates per second.
|[IgxGrid](../../grid/live-data.md) Live Updating demo handling thousands of updates per second. | -|fintech-tree-grid |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGrid
Ignite UI CLI:
ig add fintech-tree-grid newFinTechTreeGrid
IgxGrid handling thousands of live updates per second.
|[IgxTreeGrid](../../treegrid/live-data.md) Live Updating demo handling thousands of updates per second. | -|login |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c login newLogin
Ignite UI CLI:
ig add login newLogin
Registration and login forms created with IgxInputGroup.
| Registration and login forms created with [IgxInputGroup](../../input-group.md).. | -|weather-forecast |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast
Ignite UI CLI:
ig add weather-forecast newWeatherForecast
Template with igxExpansionPanel.
|The template uses the [IgxExpansionPanel](../../expansion-panel.md) to display daily weather forecast details. | +| Template | Code and description | Demo | +| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | +| awesome-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid
Ignite UI CLI:
ig add awesome-grid newAwesomeGrid
IgxGrid with custom cell templating.
| [IgxGrid](../../grid/grid.md) with cell templating and controls embedded into the cells. | +| crm-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c crm-grid newCrmGrid
Ignite UI CLI:
ig add crm-grid newCrmGrid
IgxGrid with custom search implementation.
| [IgxGrid](../../grid/grid.md) with custom search implementation. | +| fintech-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid
Ignite UI CLI:
ig add fintech-grid newFinTechGrid
IgxGrid handling thousands of live updates per second.
| [IgxGrid](../../grid/live-data.md) Live Updating demo handling thousands of updates per second. | +| fintech-tree-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGrid
Ignite UI CLI:
ig add fintech-tree-grid newFinTechTreeGrid
IgxGrid handling thousands of live updates per second.
| [IgxTreeGrid](../../treegrid/live-data.md) Live Updating demo handling thousands of updates per second. | +| login | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c login newLogin
Ignite UI CLI:
ig add login newLogin
Registration and login forms created with IgxInputGroup.
| Registration and login forms created with [IgxInputGroup](../../input-group.md).. | +| weather-forecast | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast
Ignite UI CLI:
ig add weather-forecast newWeatherForecast
Template with igxExpansionPanel.
| The template uses the [IgxExpansionPanel](../../expansion-panel.md) to display daily weather forecast details. | diff --git a/en/components/general/cli/getting-started-with-angular-schematics.md b/en/components/general/cli/getting-started-with-angular-schematics.md index b55b470f55..7adc099435 100644 --- a/en/components/general/cli/getting-started-with-angular-schematics.md +++ b/en/components/general/cli/getting-started-with-angular-schematics.md @@ -48,10 +48,10 @@ ng add igniteui-angular The new application is created in a directory with the same name (`newAngularProject`). There are several project templates from which you can choose when creating an Ignite UI for Angular application: -| template id | template description | -| --- | --- | -| empty | Project structure with routing and a home page | -| side-nav | Project structure with side navigation drawer | +| template id | template description | +| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| empty | Project structure with routing and a home page | +| side-nav | Project structure with side navigation drawer | | side-nav-auth | Side navigation project extended with user authentication module.
[Angular Authentication Project Template](auth-template.md) topic covers the project template in detail. | Additionally, you can specify **arguments** to control the theme or skip packages install: diff --git a/en/components/general/cli/getting-started-with-cli.md b/en/components/general/cli/getting-started-with-cli.md index 9fc89c9f4a..bc19bf52fd 100644 --- a/en/components/general/cli/getting-started-with-cli.md +++ b/en/components/general/cli/getting-started-with-cli.md @@ -57,10 +57,10 @@ ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav The new application is created in a directory with the same name (`newAngularProject`). There are several project templates from which you can choose when creating an Ignite UI for Angular application: -| template id | template description | -| --- | --- | -| empty | Project structure with routing and a home page | -| side-nav | Project structure with side navigation drawer | +| template id | template description | +| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| empty | Project structure with routing and a home page | +| side-nav | Project structure with side navigation drawer | | side-nav-auth | Side navigation project extended with user authentication module.
[Angular Authentication Project Template](auth-template.md) topic covers the project template in detail. | Additionally, you can specify **arguments** to control the theme or skip packages install: @@ -185,14 +185,14 @@ ig start A full list of the available Ignite UI CLI commands and their usage (like passing flags, etc.), can be found at the [Ignite UI CLI wiki pages](https://github.com/IgniteUI/igniteui-cli/wiki): -| Command | Alias | Description | -| --- | --- | --- | -| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser. | -| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory | -| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types | -| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists the available commands and provides a brief description of what they do. | -| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Performs read and write operation on the Ignite UI CLI configuration settings. | -| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for information about a given search term | -| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones. | -| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | -| ig version | -v | Shows Ignite UI CLI version installed locally, or globally if local is missing | +| Command | Alias | Description | +| :-------------------------------------------------------------------- | :---- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser. | +| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory | +| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types | +| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists the available commands and provides a brief description of what they do. | +| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Performs read and write operation on the Ignite UI CLI configuration settings. | +| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for information about a given search term | +| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones. | +| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | +| ig version | -v | Shows Ignite UI CLI version installed locally, or globally if local is missing | diff --git a/en/components/general/data-analysis.md b/en/components/general/data-analysis.md index 22386d6fac..cd5e062744 100644 --- a/en/components/general/data-analysis.md +++ b/en/components/general/data-analysis.md @@ -204,37 +204,37 @@ Understanding conditional formatting - it allows for applying formatting such as
-| API | Description | Arguments | -|---------|:-------------:|-----------:| -| `ConditionalFormattingType` | An **enum**, which represents the conditional formatting types | | -| `IFormatColors` | An **interface**, which represents the formatting colors | | -| `formatter`: **string** | An **input** property, which sets/gets the current formatting type | | -| `formatColors` | An **input** property, which sets/gets the current formatting colors | `val`: _IFormatColors_ | -| `onFormattersReady`| An **event**, which emits the applicable `formatting types` for the selected data, when they are determined. | | -| `formatCells` | Applies conditional formatting for the selected cells. Usage:
**this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [GridSelectionRange]({environment:angularApiUrl}/interfaces/gridselectionrange.html) [ ],
`reset`: boolean (**true** by default) | -| `clearFormatting` | Removes the conditional formatting from the selected cells. Usage:
**this.conditionalFormatting.clearFormatting()** | | +| API | Description | Arguments | +| :-------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +| `ConditionalFormattingType` | An **enum**, which represents the conditional formatting types | | +| `IFormatColors` | An **interface**, which represents the formatting colors | | +| `formatter`: **string** | An **input** property, which sets/gets the current formatting type | | +| `formatColors` | An **input** property, which sets/gets the current formatting colors | `val`: _IFormatColors_ | +| `onFormattersReady` | An **event**, which emits the applicable `formatting types` for the selected data, when they are determined. | | +| `formatCells` | Applies conditional formatting for the selected cells. Usage:
**this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [GridSelectionRange]({environment:angularApiUrl}/interfaces/gridselectionrange.html) [ ],
`reset`: boolean (**true** by default) | +| `clearFormatting` | Removes the conditional formatting from the selected cells. Usage:
**this.conditionalFormatting.clearFormatting()** | | ### IgxChartIntegrationDirective
-| API | Description | Arguments | -|---------|-------------|-----------| -| `CHART_TYPE` | An **enum**, representing the supported chart types | | -| `OPTIONS_TYPE` | An **enum**, representing the supported options type, which can be applied to a chart component| | -| `IOptions` | An **interface** for chart property options | | -| `chartFactory`| Creates a chart component, based on the provided chart type. Usage:
**this.chartIntegration.chartFactory(CHART_TYPE.COLUMN_GROUPED, this.viewContainerRef)** | `type`: **any[ ]**, viewContainerRef: [`ViewContainerRef`](https://angular.io/api/core/ViewContainerRef) | -| `setChartComponentOptions` | Sets property options to a chart component. Usage:
**this.chartIntegration.setChartComponentOptions(CHART_TYPE.PIE, OPTIONS_TYPE.CHART, {allowSliceExplosion: true, sliceClick: (evt) => { evt.args.isExploded = !evt.args.isExploded; } })** | `chart`: _CHART_TYPE_, `optionsType`: _OPTIONS_TYPE_, `options`: _IOptions_ | -| `getAvailableCharts` | Returns the enabled chart types | | -| `enableCharts` | Enables the provided chart types. By default all chart types are enabled | `types`: _CHART_TYPE_ [ ] | -| `disableCharts` | Disables the provided chart types | `types`: _CHART_TYPE_ [ ] | -| `onChartTypesDetermined` | An **event**, emitted when the chart types, applicable for the `chartData`, are determined. This event emits an object of type `IDeterminedChartTypesArgs`, which has 2 properties:
`chartsAvailabilty`: _Map_ - the enabled/disabled chart types,
`chartsForCreation`: _CHART_TYPE[]_ - the applicable chart types for the `chartData` | | -| `onChartCreationDone` | An event, emitted when a chart is created. This event emits the chart component, which is created | | -| `chartData`: **any[ ]** | An **input** property, which sets/gets the data for the charts | `selectedData`: **any[ ]** | -| `useLegend`: **boolean** | An **input**, which enables/disables the legend usage for all chart types. By default it is set to **true** | | -| `defaultLabelMemberPath`: **string** | An **input** property, which sets/gets the default label member path for the charts. By default the label member path will be determined, based on the provided data.
( **if the provided data records have properties with string values, the first string property name of the first data record in the `chartData` will be selected as a label member path for the charts, if not, the label member path will have value _'Index'_.** )
| | -| `scatterChartYAxisValueMemberPath`: **string** | An **input** property, which sets/gets the default radius member path for the scatter bubble chart. **If not set, the default Y axis value member path will be the first numeric property name of the first data record in the `chartData`** | `path`: **string** | -| `bubbleChartRadiusMemberPath`: **string** | An **input** property, which sets/gets the default radius member path for the scatter bubble chart. **If not set, the default radius member path will be the second numeric property name of the first data record in the `chartData`** | `path`: **string** | +| API | Description | Arguments | +| :--------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | +| `CHART_TYPE` | An **enum**, representing the supported chart types | | +| `OPTIONS_TYPE` | An **enum**, representing the supported options type, which can be applied to a chart component | | +| `IOptions` | An **interface** for chart property options | | +| `chartFactory` | Creates a chart component, based on the provided chart type. Usage:
**this.chartIntegration.chartFactory(CHART_TYPE.COLUMN_GROUPED, this.viewContainerRef)** | `type`: **any[ ]**, viewContainerRef: [`ViewContainerRef`](https://angular.io/api/core/ViewContainerRef) | +| `setChartComponentOptions` | Sets property options to a chart component. Usage:
**this.chartIntegration.setChartComponentOptions(CHART_TYPE.PIE, OPTIONS_TYPE.CHART, {allowSliceExplosion: true, sliceClick: (evt) => { evt.args.isExploded = !evt.args.isExploded; } })** | `chart`: _CHART_TYPE_, `optionsType`: _OPTIONS_TYPE_, `options`: _IOptions_ | +| `getAvailableCharts` | Returns the enabled chart types | | +| `enableCharts` | Enables the provided chart types. By default all chart types are enabled | `types`: _CHART_TYPE_ [ ] | +| `disableCharts` | Disables the provided chart types | `types`: _CHART_TYPE_ [ ] | +| `onChartTypesDetermined` | An **event**, emitted when the chart types, applicable for the `chartData`, are determined. This event emits an object of type `IDeterminedChartTypesArgs`, which has 2 properties:
`chartsAvailabilty`: _Map_ - the enabled/disabled chart types,
`chartsForCreation`: _CHART_TYPE[]_ - the applicable chart types for the `chartData` | | +| `onChartCreationDone` | An event, emitted when a chart is created. This event emits the chart component, which is created | | +| `chartData`: **any[ ]** | An **input** property, which sets/gets the data for the charts | `selectedData`: **any[ ]** | +| `useLegend`: **boolean** | An **input**, which enables/disables the legend usage for all chart types. By default it is set to **true** | | +| `defaultLabelMemberPath`: **string** | An **input** property, which sets/gets the default label member path for the charts. By default the label member path will be determined, based on the provided data.
( **if the provided data records have properties with string values, the first string property name of the first data record in the `chartData` will be selected as a label member path for the charts, if not, the label member path will have value _'Index'_.** )
| | +| `scatterChartYAxisValueMemberPath`: **string** | An **input** property, which sets/gets the default radius member path for the scatter bubble chart. **If not set, the default Y axis value member path will be the first numeric property name of the first data record in the `chartData`** | `path`: **string** | +| `bubbleChartRadiusMemberPath`: **string** | An **input** property, which sets/gets the default radius member path for the scatter bubble chart. **If not set, the default radius member path will be the second numeric property name of the first data record in the `chartData`** | `path`: **string** | ## Useful resources diff --git a/en/components/general/how-to/how-to-perform-crud.md b/en/components/general/how-to/how-to-perform-crud.md index 62c6b12d3c..884688decf 100644 --- a/en/components/general/how-to/how-to-perform-crud.md +++ b/en/components/general/how-to/how-to-perform-crud.md @@ -12,13 +12,13 @@ CRUD is an acronym in computer programming that stands for the CREATE, READ, UPD While talking about Angular CRUD, or CRUD operations in Angular, it is important to note that the data storage is on a remote server. The Angular application can not directly access the data layer, so it needs to communicate with it through a Web API that provides endpoints for the CRUD operations, i.e.: -| API | Operation | HTTP methods | -|-----|-----------| ----------- | -| "api/entities" | READ all entities | GET | -| "api/entities/id" | READ the entity with corresponding id | GET | -| "api/entities/update" | UPDATE the entity with corresponding id | PUT / PATCH | -| "api/entities/create" | CREATE a new entity | POST | -| "api/entities/delete" | DELETE the entity with corresponding id | DELETE | +| API | Operation | HTTP methods | +| :-------------------- | :-------------------------------------- | :----------- | +| "api/entities" | READ all entities | GET | +| "api/entities/id" | READ the entity with corresponding id | GET | +| "api/entities/update" | UPDATE the entity with corresponding id | PUT / PATCH | +| "api/entities/create" | CREATE a new entity | POST | +| "api/entities/delete" | DELETE the entity with corresponding id | DELETE | Notice that the CRUD operations also map conceptually to the HTTP methods that are used to communicate with APIs over HTTP. @@ -202,16 +202,16 @@ For more information and demos, see the [Cell Editing](../../grid/cell-editing.m The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the [**Row Editing**](../../grid/row-editing.md) and [**Cell Editing**](../../grid/cell-editing.md) lifecycle - when starting, committing or canceling the editing action. - | Event | Description | Arguments | Cancellable | -|-------|-------------|-----------|-------------| -| [`rowEditEnter`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowEditEnter) | If `rowEditing` is enabled, fires when a row enters edit mode | [IGridEditEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `true` | -| [`cellEditEnter`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellEditEnter) | Fires when a cell **enters edit mode** (after `rowEditEnter`) | [IGridEditEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `true` | -| [`cellEdit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellEdit) | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing `Enter`) | [IGridEditEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `true` | -| [`cellEditDone`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellEditDone) | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | [IGridEditDoneEventArgs]({environment:angularApiUrl}/interfaces/igrideditdoneeventargs.html) | `false` | -| [`cellEditExit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellEditExit) | Fires when a cell **exits edit mode** | [IGridEditDoneEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `false` | -| [`rowEdit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowEdit) | If `rowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | [IGridEditEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `true` | -| [`rowEditDone`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowEditDone) | If `rowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | [IGridEditDoneEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `false` | -| [`rowEditExit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowEditExit) | If `rowEditing` is enabled, fires when a row **exits edit mode** | [IGridEditDoneEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `false` | +| Event | Description | Arguments | Cancellable | +| :----------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------- | :---------- | +| [`rowEditEnter`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowEditEnter) | If `rowEditing` is enabled, fires when a row enters edit mode | [IGridEditEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `true` | +| [`cellEditEnter`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellEditEnter) | Fires when a cell **enters edit mode** (after `rowEditEnter`) | [IGridEditEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `true` | +| [`cellEdit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellEdit) | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing `Enter`) | [IGridEditEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `true` | +| [`cellEditDone`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellEditDone) | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | [IGridEditDoneEventArgs]({environment:angularApiUrl}/interfaces/igrideditdoneeventargs.html) | `false` | +| [`cellEditExit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellEditExit) | Fires when a cell **exits edit mode** | [IGridEditDoneEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `false` | +| [`rowEdit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowEdit) | If `rowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | [IGridEditEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `true` | +| [`rowEditDone`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowEditDone) | If `rowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | [IGridEditDoneEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `false` | +| [`rowEditExit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowEditExit) | If `rowEditing` is enabled, fires when a row **exits edit mode** | [IGridEditDoneEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `false` | Go to [Events](../../grid/editing.md#event-arguments-and-sequence) for more details and demo samples. diff --git a/en/components/general/how-to/how-to-use-standalone-components.md b/en/components/general/how-to/how-to-use-standalone-components.md index 627072517a..da05bc89c5 100644 --- a/en/components/general/how-to/how-to-use-standalone-components.md +++ b/en/components/general/how-to/how-to-use-standalone-components.md @@ -54,47 +54,47 @@ import { IgxGridModule } from 'igniteui-angular/grids/grid'; The `IGX_GRID_DIRECTIVES` shown in the previous examples is a utility directive that exports all grid related components and directives. The following table lists all new utility directives that are available in Ignite UI for Angular. -| Directive Collection | Description | -| --- | --- | -| [`IGX_ACCORDION_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/accordion/src/accordion/public_api.ts) | Exports all accordion related components and directives. | -| [`IGX_ACTION_STRIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/action-strip/src/action-strip/public_api.ts) | Exports all action strip related components and directives. | -| [`IGX_BANNER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/banner/src/banner/public_api.ts) | Exports all banner related components and directives. | -| [`IGX_BOTTOM_NAV_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/bottom-nav/src/bottom-nav/public_api.ts) | Exports all bottom navigation related components and directives. | -| [`IGX_BUTTON_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/button-group/src/button-group/public_api.ts) | Exports all button group related components and directives. | -| [`IGX_CALENDAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/calendar/src/calendar/public_api.ts) | Exports all calendar related components and directives. | -| [`IGX_CARD_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/card/src/card/public_api.ts) | Exports all card related components and directives. | -| [`IGX_CAROUSEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/carousel/src/carousel/public_api.ts) | Exports all carousel related components and directives. | -| [`IGX_CHIPS_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/chips/src/chips/public_api.ts) | Exports all chip related components and directives. | -| [`IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/progressbar/src/progressbar/public_api.ts) | Exports all circular progress bar related components and directives. | -| [`IGX_COMBO_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/combo/src/combo/public_api.ts) | Exports all combo related components and directives. | -| [`IGX_DATE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/date-picker/src/date-picker/public_api.ts) | Exports all date-picker related components and directives. | -| [`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/date-picker/src/date-range-picker/public_api.ts) | Exports all date-range picker related components and directives. | -| [`IGX_DIALOG_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/dialog/src/dialog/public_api.ts) | Exports all dialog related components and directives. | -| [`IGX_DRAG_DROP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/directives/src/directives/drag-drop/public_api.ts) | Exports all drag and drop related components and directives. | -| [`IGX_DROP_DOWN_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/drop-down/src/drop-down/public_api.ts) | Exports all drop-down related components and directives. | -| [`IGX_EXPANSION_PANEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/expansion-panel/src/expansion-panel/public_api.ts) | Exports all expansion panel related components and directives. | -| [`IGX_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/grids/grid/src/grid.module.ts) | Exports all grid related components and directives. | -| [`IGX_HIERARCHICAL_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.module.ts) | Exports all hierarchical grid related components and directives. | -| [`IGX_INPUT_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/input-group/src/input-group/public_api.ts) | Exports all input group related components and directives. | -| [`IGX_LINEAR_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/progressbar/src/progressbar/public_api.ts) | Exports all linear progress bar related components and directives. | -| [`IGX_LIST_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/list/src/list/public_api.ts) | Exports all list related components and directives. | -| [`IGX_NAVBAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/navbar/src/navbar/public_api.ts) | Exports all navbar related components and directives. | -| [`IGX_NAVIGATION_DRAWER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/public_api.ts) | Exports all navigation drawer related components and directives. | -| [`IGX_PAGINATOR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/paginator/src/paginator/public_api.ts) | Exports all paginator related components and directives. | -| [`IGX_PIVOT_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.module.ts) | Exports all pivot grid related components and directives. | -| [`IGX_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/progressbar/src/progressbar/public_api.ts) | Exports all linear and circular progress bar related components and directives. | -| [`IGX_QUERY_BUILDER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/query-builder/src/query-builder/public_api.ts) | Exports all query builder related components and directives. | -| [`IGX_RADIO_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/radio/src/radio/radio-group/public_api.ts) | Exports all radio group related components and directives. | -| [`IGX_SELECT_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/select/src/select/public_api.ts) | Exports all select related components and directives. | -| [`IGX_SIMPLE_COMBO_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/simple-combo/src/simple-combo/public_api.ts) | Exports all simple combo related components and directives. | -| [`IGX_SLIDER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/slider/src/slider/public_api.ts) | Exports all slider related components and directives. | -| [`IGX_SPLITTER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/splitter/src/splitter/public_api.ts) | Exports all splitter related components and directives. | -| [`IGX_STEPPER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/stepper/src/stepper/public_api.ts) | Exports all stepper related components and directives. | -| [`IGX_TABS_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/tabs/src/tabs/tabs/public_api.ts) | Exports all tabs related components and directives. | -| [`IGX_TIME_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/time-picker/src/time-picker/public_api.ts) | Exports all time picker related components and directives. | -| [`IGX_TOOLTIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/directives/src/directives/tooltip/public_api.ts) | Exports all tooltip related components and directives. | -| [`IGX_TREE_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/tree/src/tree/public_api.ts) | Exports all tree-view related components and directives. | -| [`IGX_TREE_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/grids/tree-grid/src/tree-grid.module.ts) | Exports all tree grid related components and directives. | +| Directive Collection | Description | +| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------ | +| [`IGX_ACCORDION_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/accordion/src/accordion/public_api.ts) | Exports all accordion related components and directives. | +| [`IGX_ACTION_STRIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/action-strip/src/action-strip/public_api.ts) | Exports all action strip related components and directives. | +| [`IGX_BANNER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/banner/src/banner/public_api.ts) | Exports all banner related components and directives. | +| [`IGX_BOTTOM_NAV_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/bottom-nav/src/bottom-nav/public_api.ts) | Exports all bottom navigation related components and directives. | +| [`IGX_BUTTON_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/button-group/src/button-group/public_api.ts) | Exports all button group related components and directives. | +| [`IGX_CALENDAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/calendar/src/calendar/public_api.ts) | Exports all calendar related components and directives. | +| [`IGX_CARD_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/card/src/card/public_api.ts) | Exports all card related components and directives. | +| [`IGX_CAROUSEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/carousel/src/carousel/public_api.ts) | Exports all carousel related components and directives. | +| [`IGX_CHIPS_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/chips/src/chips/public_api.ts) | Exports all chip related components and directives. | +| [`IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/progressbar/src/progressbar/public_api.ts) | Exports all circular progress bar related components and directives. | +| [`IGX_COMBO_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/combo/src/combo/public_api.ts) | Exports all combo related components and directives. | +| [`IGX_DATE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/date-picker/src/date-picker/public_api.ts) | Exports all date-picker related components and directives. | +| [`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/date-picker/src/date-range-picker/public_api.ts) | Exports all date-range picker related components and directives. | +| [`IGX_DIALOG_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/dialog/src/dialog/public_api.ts) | Exports all dialog related components and directives. | +| [`IGX_DRAG_DROP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/directives/src/directives/drag-drop/public_api.ts) | Exports all drag and drop related components and directives. | +| [`IGX_DROP_DOWN_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/drop-down/src/drop-down/public_api.ts) | Exports all drop-down related components and directives. | +| [`IGX_EXPANSION_PANEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/expansion-panel/src/expansion-panel/public_api.ts) | Exports all expansion panel related components and directives. | +| [`IGX_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/grids/grid/src/grid.module.ts) | Exports all grid related components and directives. | +| [`IGX_HIERARCHICAL_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.module.ts) | Exports all hierarchical grid related components and directives. | +| [`IGX_INPUT_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/input-group/src/input-group/public_api.ts) | Exports all input group related components and directives. | +| [`IGX_LINEAR_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/progressbar/src/progressbar/public_api.ts) | Exports all linear progress bar related components and directives. | +| [`IGX_LIST_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/list/src/list/public_api.ts) | Exports all list related components and directives. | +| [`IGX_NAVBAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/navbar/src/navbar/public_api.ts) | Exports all navbar related components and directives. | +| [`IGX_NAVIGATION_DRAWER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/public_api.ts) | Exports all navigation drawer related components and directives. | +| [`IGX_PAGINATOR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/paginator/src/paginator/public_api.ts) | Exports all paginator related components and directives. | +| [`IGX_PIVOT_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.module.ts) | Exports all pivot grid related components and directives. | +| [`IGX_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/progressbar/src/progressbar/public_api.ts) | Exports all linear and circular progress bar related components and directives. | +| [`IGX_QUERY_BUILDER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/query-builder/src/query-builder/public_api.ts) | Exports all query builder related components and directives. | +| [`IGX_RADIO_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/radio/src/radio/radio-group/public_api.ts) | Exports all radio group related components and directives. | +| [`IGX_SELECT_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/select/src/select/public_api.ts) | Exports all select related components and directives. | +| [`IGX_SIMPLE_COMBO_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/simple-combo/src/simple-combo/public_api.ts) | Exports all simple combo related components and directives. | +| [`IGX_SLIDER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/slider/src/slider/public_api.ts) | Exports all slider related components and directives. | +| [`IGX_SPLITTER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/splitter/src/splitter/public_api.ts) | Exports all splitter related components and directives. | +| [`IGX_STEPPER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/stepper/src/stepper/public_api.ts) | Exports all stepper related components and directives. | +| [`IGX_TABS_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/tabs/src/tabs/tabs/public_api.ts) | Exports all tabs related components and directives. | +| [`IGX_TIME_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/time-picker/src/time-picker/public_api.ts) | Exports all time picker related components and directives. | +| [`IGX_TOOLTIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/directives/src/directives/tooltip/public_api.ts) | Exports all tooltip related components and directives. | +| [`IGX_TREE_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/tree/src/tree/public_api.ts) | Exports all tree-view related components and directives. | +| [`IGX_TREE_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/grids/tree-grid/src/tree-grid.module.ts) | Exports all tree grid related components and directives. | ## Additional Resources diff --git a/en/components/general/localization.md b/en/components/general/localization.md index 92edcdc9fb..c39ffcb8ac 100644 --- a/en/components/general/localization.md +++ b/en/components/general/localization.md @@ -98,64 +98,64 @@ Components like the IgxGrid or IgxDatePicker allow for specifying date format (f Available predefined format options: -| Option | Equivalent to | Examples (given in en-US locale) | -| ------ | --------------| --------------------------------| -| 'short' | 'M/d/yy, h:mm a' | 6/15/15, 9:03 AM | -| 'medium' | 'MMM d, y, h:mm:ss a' | Jun 15, 2015, 9:03:01 AM | -| 'long' | 'MMMM d, y, h:mm:ss a z' | June 15, 2015 at 9:03:01 AM GMT+1 | -| 'full' | 'EEEE, MMMM d, y, h:mm:ss a zzzz' | Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 | -| 'shortDate' | 'M/d/yy' | 6/15/15 | -| 'mediumDate' | 'MMM d, y' | Jun 15, 2015 | -| 'longDate' | 'MMMM d, y' | June 15, 2015 | -| 'fullDate' | 'EEEE, MMMM d, y' | Monday, June 15, 2015 | -| 'shortTime' | 'h:mm a' | 9:03 AM | -| 'mediumTime' | 'h:mm:ss a' | 9:03:01 AM | -| 'longTime' | 'h:mm:ss a z' | 9:03:01 AM GMT+1 | -| 'fullTime' | 'h:mm:ss a zzzz' | 9:03:01 AM GMT+01:00 | +| Option | Equivalent to | Examples (given in en-US locale) | +| :----------- | :-------------------------------- | :-------------------------------------------- | +| 'short' | 'M/d/yy, h:mm a' | 6/15/15, 9:03 AM | +| 'medium' | 'MMM d, y, h:mm:ss a' | Jun 15, 2015, 9:03:01 AM | +| 'long' | 'MMMM d, y, h:mm:ss a z' | June 15, 2015 at 9:03:01 AM GMT+1 | +| 'full' | 'EEEE, MMMM d, y, h:mm:ss a zzzz' | Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 | +| 'shortDate' | 'M/d/yy' | 6/15/15 | +| 'mediumDate' | 'MMM d, y' | Jun 15, 2015 | +| 'longDate' | 'MMMM d, y' | June 15, 2015 | +| 'fullDate' | 'EEEE, MMMM d, y' | Monday, June 15, 2015 | +| 'shortTime' | 'h:mm a' | 9:03 AM | +| 'mediumTime' | 'h:mm:ss a' | 9:03:01 AM | +| 'longTime' | 'h:mm:ss a z' | 9:03:01 AM GMT+1 | +| 'fullTime' | 'h:mm:ss a zzzz' | 9:03:01 AM GMT+01:00 | Custom format options: -| Date field | Value | Description | Example | -|-|-|-|-| -| Weekday | c, cc, ccc, E, EE, EEE | Short version of the weekday | Tue | -| | cccc, EEEE | Long version of the weekday | Tuesday | -| | ccccc, EEEEE | Narrow version of the weekday | T | -| Day| d | Numeric display (single digit when possible) | 1, 10 | -| | dd | 2-digit always (zero padded) | 01, 10 | -| Month | M, L | Numeric display (single digit when possible) | 8, 12 | -| | MM, LL | 2-digit always (zero padded) | 08, 12 | -| | MMM, LLL | Short month name | Oct | -| | MMMM, LLLL | Long month name | October | -| | MMMMM, LLLLL | Narrow month name | O | -| Year | y, yyy, yyyy | Numeric display | 1, 24, 632, 2025 | -| | yy | 2-digit display (zero padded when possible) | 01, 24, 32, 25 | -| ISO 8601 year | Y, YYY, YYYY | Numeric display | 1, 24, 632, 2025 | -| | YY | 2-digit display (zero padded when possible) | 01, 24, 32, 25 | -| Era | G, GG, GGG | Short display | AD, BC | -| | GGGG | Long display | Anno Domini, Before Christ| -| | GGGGG | Narrow display | A, B | -| Minute | m | Numeric (single digit when possible) | 1, 5, 22 | -| | mm | 2-digit display (zero padded)| 01, 05, 22 | -| Hour 1-12 | h | Numeric (single digit when possible) | 8, 12 | -| | hh | 2-digit (zero padded) | 08, 13 | -| Hour 0-23 | H | Numeric (single digit when possible) | 8, 21 | -| | HH | 2-digit (zero padded)| 08, 21 | -| Hour 0-11 | K | Numeric (single digit when possible) | 0, 11 | -| | KK | 2-digit (zero padded) | 00, 11 | -| Second | s | Numeric (single digit when possible) | 0...59 | -| | ss | 2-digit (zero padded) | 00...59 | -| Fractional seconds | S | Numeric for 1 digit | 0...9 | -| | SS | Numeric for 2 digits | 00...99 | -| | SSS | Numeric for 3 digits | 000...999 | -| Period of time - abbreviated | a, t | Lower case always | am, pm | -| | aa, aaa, tt, ttt | Upper case always | AM, PM | -| | aaaa, tttt | Case based on locale | am, pm, AM, PM | -| | aaaaa, ttttt | Narrow lower case always | a, p | -| Period of time - extended | b, bb, bbb, B, BB, BBB | Short display. Based on `Intl` locale | en-GB: at night | -| | bbbb, BBBB | Long display. Based on `Intl` locale| en-GB: at night | -| | bbbbb, BBBBB | Narrow display. Based on `Intl` locale | en-GB: at night | -| Timezone | z, zz, zzz, Z, ZZ, ZZZ, O, OO, OOO | Short display | GMT+4 | -| | zzzz, ZZZZ, OOOO | Long display | GMT+0430 | +| Date field | Value | Description | Example | +| :--------------------------- | :--------------------------------- | :------------------------------------------- | :-------------------------- | +| Weekday | c, cc, ccc, E, EE, EEE | Short version of the weekday | Tue | +| | cccc, EEEE | Long version of the weekday | Tuesday | +| | ccccc, EEEEE | Narrow version of the weekday | T | +| Day | d | Numeric display (single digit when possible) | 1, 10 | +| | dd | 2-digit always (zero padded) | 01, 10 | +| Month | M, L | Numeric display (single digit when possible) | 8, 12 | +| | MM, LL | 2-digit always (zero padded) | 08, 12 | +| | MMM, LLL | Short month name | Oct | +| | MMMM, LLLL | Long month name | October | +| | MMMMM, LLLLL | Narrow month name | O | +| Year | y, yyy, yyyy | Numeric display | 1, 24, 632, 2025 | +| | yy | 2-digit display (zero padded when possible) | 01, 24, 32, 25 | +| ISO 8601 year | Y, YYY, YYYY | Numeric display | 1, 24, 632, 2025 | +| | YY | 2-digit display (zero padded when possible) | 01, 24, 32, 25 | +| Era | G, GG, GGG | Short display | AD, BC | +| | GGGG | Long display | Anno Domini, Before Christ | +| | GGGGG | Narrow display | A, B | +| Minute | m | Numeric (single digit when possible) | 1, 5, 22 | +| | mm | 2-digit display (zero padded) | 01, 05, 22 | +| Hour 1-12 | h | Numeric (single digit when possible) | 8, 12 | +| | hh | 2-digit (zero padded) | 08, 13 | +| Hour 0-23 | H | Numeric (single digit when possible) | 8, 21 | +| | HH | 2-digit (zero padded) | 08, 21 | +| Hour 0-11 | K | Numeric (single digit when possible) | 0, 11 | +| | KK | 2-digit (zero padded) | 00, 11 | +| Second | s | Numeric (single digit when possible) | 0...59 | +| | ss | 2-digit (zero padded) | 00...59 | +| Fractional seconds | S | Numeric for 1 digit | 0...9 | +| | SS | Numeric for 2 digits | 00...99 | +| | SSS | Numeric for 3 digits | 000...999 | +| Period of time - abbreviated | a, t | Lower case always | am, pm | +| | aa, aaa, tt, ttt | Upper case always | AM, PM | +| | aaaa, tttt | Case based on locale | am, pm, AM, PM | +| | aaaaa, ttttt | Narrow lower case always | a, p | +| Period of time - extended | b, bb, bbb, B, BB, BBB | Short display. Based on `Intl` locale | en-GB: at night | +| | bbbb, BBBB | Long display. Based on `Intl` locale | en-GB: at night | +| | bbbbb, BBBBB | Narrow display. Based on `Intl` locale | en-GB: at night | +| Timezone | z, zz, zzz, Z, ZZ, ZZZ, O, OO, OOO | Short display | GMT+4 | +| | zzzz, ZZZZ, OOOO | Long display | GMT+0430 | ### Localized resource strings diff --git a/en/components/general/open-source-vs-premium.md b/en/components/general/open-source-vs-premium.md index 0942901c61..33f6dc03cc 100644 --- a/en/components/general/open-source-vs-premium.md +++ b/en/components/general/open-source-vs-premium.md @@ -41,113 +41,113 @@ Start with Grid Lite for essential needs and seamlessly upgrade to the full-feat ## Comparison Table for All Components -| Component | Open-Source | Premium | -|-----------------------------------|-------------|---------| -| Accordion | ✅ | ✅ | -| Action Strip | ✅ | ✅ | -| Autocomplete | ✅ | ✅ | -| Avatar | ✅ | ✅ | -| Badge | ✅ | ✅ | -| Banner | ✅ | ✅ | -| Bottom Nav | ✅ | ✅ | -| Button | ✅ | ✅ | -| Button Group | ✅ | ✅ | -| Calendar | ✅ | ✅ | -| Card | ✅ | ✅ | -| Carousel | ✅ | ✅ | -| Chart Area | ❌ | ✅ | -| Chart Bar | ❌ | ✅ | -| Chart Bubble | ❌ | ✅ | -| Chart Category | ❌ | ✅ | -| Chart Column | ❌ | ✅ | -| Chart Donut | ❌ | ✅ | -| Chart Financial/Stock | ❌ | ✅ | -| Chart Line | ❌ | ✅ | -| Chart Pie | ❌ | ✅ | -| Chart Pie Data | ❌ | ✅ | -| Chart Point | ❌ | ✅ | -| Chart Polar | ❌ | ✅ | -| Chart Radial | ❌ | ✅ | -| Chart Scatter | ❌ | ✅ | -| Chart Shape | ❌ | ✅ | -| Chart Sparkline | ❌ | ✅ | -| Chart Spline | ❌ | ✅ | -| Chart Spline Area | ❌ | ✅ | -| Chart Stacked | ❌ | ✅ | -| Chart Step Area | ❌ | ✅ | -| Chart Step Line | ❌ | ✅ | -| Chart Treemap | ❌ | ✅ | -| Chart Waterfall | ❌ | ✅ | -| Chat | ✅ | ✅ | -| Checkbox | ✅ | ✅ | -| Chip | ✅ | ✅ | -| Chip Area | ✅ | ✅ | -| Circular Progress | ✅ | ✅ | -| Color Editor | ❌ | ✅ | -| Combo | ✅ | ✅ | -| CVS Exporter | ❌ | ✅ | -| Dashboard Tile | ❌ | ✅ | -| Date Picker | ✅ | ✅ | -| Date Range Picker | ✅ | ✅ | -| Date Time Editor | ✅ | ✅ | -| Dialog | ✅ | ✅ | -| Divider | ✅ | ✅ | -| Drag and Drop | ✅ | ✅ | -| Drop Down | ✅ | ✅ | -| Excel Exporter | ❌ | ✅ | -| Excel Library | ❌ | ✅ | -| Expansion Panel | ✅ | ✅ | -| ForOf | ✅ | ✅ | -| Grid Data | ❌ | ✅ | -| Grid Hierarchical | ❌ | ✅ | -| Grid Pivot | ❌ | ✅ | -| Grid Tree | ❌ | ✅ | -| Grid Lite | ✅ | ✅ | -| Gauges Linear Gauge | ❌ | ✅ | -| Gauges Radial Gauge | ❌ | ✅ | -| Gauges Bullet Graph | ❌ | ✅ | -| Map Geographic Area | ❌ | ✅ | -| Map Geographic Bubble | ❌ | ✅ | -| Map Geographic Contour | ❌ | ✅ | -| Map Geographic High Density | ❌ | ✅ | -| Map Geographic Polygon | ❌ | ✅ | -| Map Geographic Polyline | ❌ | ✅ | -| Map Geographic Symbol | ❌ | ✅ | -| Icon | ✅ | ✅ | -| Icon Button | ✅ | ✅ | -| Icon Service | ✅ | ✅ | -| Input | ✅ | ✅ | -| Input Group | ✅ | ✅ | -| Label | ✅ | ✅ | -| Layout Manager | ✅ | ✅ | -| Linear Progress | ✅ | ✅ | -| List | ✅ | ✅ | -| Mask Input | ✅ | ✅ | -| Month Picker | ✅ | ✅ | -| Nav Drawer | ✅ | ✅ | -| Navbar | ✅ | ✅ | -| Overlay Service | ✅ | ✅ | -| Paginator | ✅ | ✅ | -| Query Builder | ❌ | ✅ | -| Radio | ✅ | ✅ | -| Radio Group | ✅ | ✅ | -| Rating | ✅ | ✅ | -| Ripple | ✅ | ✅ | -| Select | ✅ | ✅ | -| Simple Combo | ✅ | ✅ | -| Slider | ✅ | ✅ | -| Snackbar | ✅ | ✅ | -| Splitter | ✅ | ✅ | -| Spreadsheet | ❌ | ✅ | -| Stepper | ✅ | ✅ | -| Switch | ✅ | ✅ | -| Tabs | ✅ | ✅ | -| Text Highlight | ✅ | ✅ | -| Tile Manager | ✅ | ✅ | -| Time Picker | ✅ | ✅ | -| Toast | ✅ | ✅ | -| Toggle | ✅ | ✅ | -| Toolbar | ❌ | ✅ | -| Tooltip | ✅ | ✅ | -| Tree | ✅ | ✅ | -| Zoom Slider | ❌ | ✅ | +| Component | Open-Source | Premium | +| :-------------------------- | :---------- | :------ | +| Accordion | ✅ | ✅ | +| Action Strip | ✅ | ✅ | +| Autocomplete | ✅ | ✅ | +| Avatar | ✅ | ✅ | +| Badge | ✅ | ✅ | +| Banner | ✅ | ✅ | +| Bottom Nav | ✅ | ✅ | +| Button | ✅ | ✅ | +| Button Group | ✅ | ✅ | +| Calendar | ✅ | ✅ | +| Card | ✅ | ✅ | +| Carousel | ✅ | ✅ | +| Chart Area | ❌ | ✅ | +| Chart Bar | ❌ | ✅ | +| Chart Bubble | ❌ | ✅ | +| Chart Category | ❌ | ✅ | +| Chart Column | ❌ | ✅ | +| Chart Donut | ❌ | ✅ | +| Chart Financial/Stock | ❌ | ✅ | +| Chart Line | ❌ | ✅ | +| Chart Pie | ❌ | ✅ | +| Chart Pie Data | ❌ | ✅ | +| Chart Point | ❌ | ✅ | +| Chart Polar | ❌ | ✅ | +| Chart Radial | ❌ | ✅ | +| Chart Scatter | ❌ | ✅ | +| Chart Shape | ❌ | ✅ | +| Chart Sparkline | ❌ | ✅ | +| Chart Spline | ❌ | ✅ | +| Chart Spline Area | ❌ | ✅ | +| Chart Stacked | ❌ | ✅ | +| Chart Step Area | ❌ | ✅ | +| Chart Step Line | ❌ | ✅ | +| Chart Treemap | ❌ | ✅ | +| Chart Waterfall | ❌ | ✅ | +| Chat | ✅ | ✅ | +| Checkbox | ✅ | ✅ | +| Chip | ✅ | ✅ | +| Chip Area | ✅ | ✅ | +| Circular Progress | ✅ | ✅ | +| Color Editor | ❌ | ✅ | +| Combo | ✅ | ✅ | +| CVS Exporter | ❌ | ✅ | +| Dashboard Tile | ❌ | ✅ | +| Date Picker | ✅ | ✅ | +| Date Range Picker | ✅ | ✅ | +| Date Time Editor | ✅ | ✅ | +| Dialog | ✅ | ✅ | +| Divider | ✅ | ✅ | +| Drag and Drop | ✅ | ✅ | +| Drop Down | ✅ | ✅ | +| Excel Exporter | ❌ | ✅ | +| Excel Library | ❌ | ✅ | +| Expansion Panel | ✅ | ✅ | +| ForOf | ✅ | ✅ | +| Grid Data | ❌ | ✅ | +| Grid Hierarchical | ❌ | ✅ | +| Grid Pivot | ❌ | ✅ | +| Grid Tree | ❌ | ✅ | +| Grid Lite | ✅ | ✅ | +| Gauges Linear Gauge | ❌ | ✅ | +| Gauges Radial Gauge | ❌ | ✅ | +| Gauges Bullet Graph | ❌ | ✅ | +| Map Geographic Area | ❌ | ✅ | +| Map Geographic Bubble | ❌ | ✅ | +| Map Geographic Contour | ❌ | ✅ | +| Map Geographic High Density | ❌ | ✅ | +| Map Geographic Polygon | ❌ | ✅ | +| Map Geographic Polyline | ❌ | ✅ | +| Map Geographic Symbol | ❌ | ✅ | +| Icon | ✅ | ✅ | +| Icon Button | ✅ | ✅ | +| Icon Service | ✅ | ✅ | +| Input | ✅ | ✅ | +| Input Group | ✅ | ✅ | +| Label | ✅ | ✅ | +| Layout Manager | ✅ | ✅ | +| Linear Progress | ✅ | ✅ | +| List | ✅ | ✅ | +| Mask Input | ✅ | ✅ | +| Month Picker | ✅ | ✅ | +| Nav Drawer | ✅ | ✅ | +| Navbar | ✅ | ✅ | +| Overlay Service | ✅ | ✅ | +| Paginator | ✅ | ✅ | +| Query Builder | ❌ | ✅ | +| Radio | ✅ | ✅ | +| Radio Group | ✅ | ✅ | +| Rating | ✅ | ✅ | +| Ripple | ✅ | ✅ | +| Select | ✅ | ✅ | +| Simple Combo | ✅ | ✅ | +| Slider | ✅ | ✅ | +| Snackbar | ✅ | ✅ | +| Splitter | ✅ | ✅ | +| Spreadsheet | ❌ | ✅ | +| Stepper | ✅ | ✅ | +| Switch | ✅ | ✅ | +| Tabs | ✅ | ✅ | +| Text Highlight | ✅ | ✅ | +| Tile Manager | ✅ | ✅ | +| Time Picker | ✅ | ✅ | +| Toast | ✅ | ✅ | +| Toggle | ✅ | ✅ | +| Toolbar | ❌ | ✅ | +| Tooltip | ✅ | ✅ | +| Tree | ✅ | ✅ | +| Zoom Slider | ❌ | ✅ | diff --git a/en/components/general/update-guide.md b/en/components/general/update-guide.md index 8e1f5d53df..31fae23316 100644 --- a/en/components/general/update-guide.md +++ b/en/components/general/update-guide.md @@ -1150,12 +1150,12 @@ If for any reason you see Sass compilation errors saying `math.div` is not a kno For each theme included in Ignite UI for Angular we provide specific `font-family` and `type-scale` variables which you can use: - | **Theme** | **Font Family** | **Type Scale** | - | --------- | ------------------- | --------------------- | - | Material | $material-typeface | $material-type-scale | - | Fluent | $fluent-typeface | $fluent-type-scale | - | Bootstrap | $bootstrap-typeface | $bootstrap-type-scale | - | Indigo | $indigo-typeface | $indigo-type-scale | +| **Theme** | **Font Family** | **Type Scale** | +| :-------- | :------------------ | :-------------------- | +| Material | $material-typeface | $material-type-scale | +| Fluent | $fluent-typeface | $fluent-type-scale | +| Bootstrap | $bootstrap-typeface | $bootstrap-type-scale | +| Indigo | $indigo-typeface | $indigo-type-scale | ### IgxBottomNav component diff --git a/en/components/geo-map-binding-data-model.md b/en/components/geo-map-binding-data-model.md index a89b5b9140..aaab385118 100644 --- a/en/components/geo-map-binding-data-model.md +++ b/en/components/geo-map-binding-data-model.md @@ -24,15 +24,15 @@ The Ignite UI for Angular map component is designed to display geo-spatial data 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 | -| [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) | [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | -| [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) | [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | -|[`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html)|[`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. | -|[`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html)|[`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. | +| 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 | +| [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) | [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +| [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) | [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +| [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) | [`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) | Specifies the name of data column of `ItemsSource` items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. | +| [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) | [`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) | Specifies the name of data column of `ItemsSource` items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. | ## Code Snippet diff --git a/en/components/geo-map-binding-shp-file.md b/en/components/geo-map-binding-shp-file.md index ad038ceaeb..6ba7eb57df 100644 --- a/en/components/geo-map-binding-shp-file.md +++ b/en/components/geo-map-binding-shp-file.md @@ -23,10 +23,10 @@ The Ignite UI for Angular map component, the [`IgxShapeDataSource`]({environment 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.| +| 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. | @@ -44,10 +44,10 @@ 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.| +| 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. | This data structure is suitable for use in most Geographic Series as long as appropriate data columns are mapped to them. diff --git a/en/components/geo-map-display-azure-imagery.md b/en/components/geo-map-display-azure-imagery.md index f50a65a280..afe3150f4f 100644 --- a/en/components/geo-map-display-azure-imagery.md +++ b/en/components/geo-map-display-azure-imagery.md @@ -104,10 +104,10 @@ 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
| +| 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
| ## API References diff --git a/en/components/geo-map-display-bing-imagery.md b/en/components/geo-map-display-bing-imagery.md index d52e394716..7c1c064cc3 100644 --- a/en/components/geo-map-display-bing-imagery.md +++ b/en/components/geo-map-display-bing-imagery.md @@ -63,16 +63,16 @@ 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.| -|[`cultureName`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#cultureName)|string|Represents a property for setting the culture name for the tile source.| -|[`isDeferredLoad`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#isDeferredLoad)|boolean|Represents the property that specifies whether or not the Bing Maps service should auto-initialized upon the assignment of valid property values.| -|[`isInitialized`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#isInitialized)|boolean|Represents the property that is set to True occurs when geographic imagery tiles from Bing Maps service have been initialized and they are ready for rendering in the map component.| -|[`subDomains`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#subDomains)|`SubDomainsCollection`|Represents an image collection of URI sub domains| -|[`tilePath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#tilePath)|string|Represents a property that sets the map tile image URI, this is the actual location of the Bing Maps| +| 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. | +| [`cultureName`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#cultureName) | string | Represents a property for setting the culture name for the tile source. | +| [`isDeferredLoad`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#isDeferredLoad) | boolean | Represents the property that specifies whether or not the Bing Maps service should auto-initialized upon the assignment of valid property values. | +| [`isInitialized`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#isInitialized) | boolean | Represents the property that is set to True occurs when geographic imagery tiles from Bing Maps service have been initialized and they are ready for rendering in the map component. | +| [`subDomains`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#subDomains) | `SubDomainsCollection` | Represents an image collection of URI sub domains | +| [`tilePath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#tilePath) | string | Represents a property that sets the map tile image URI, this is the actual location of the Bing Maps | ## API References diff --git a/en/components/geo-map-display-imagery-types.md b/en/components/geo-map-display-imagery-types.md index c643a44eee..a997f1789d 100644 --- a/en/components/geo-map-display-imagery-types.md +++ b/en/components/geo-map-display-imagery-types.md @@ -17,7 +17,7 @@ The map component can display geographic imagery tiles from three supported mapp The following table summarizes supported and custom geographic imagery sources for the map component. | Imagery | Description | -| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Open Street Maps | Provides geographic imagery from Open Street Maps service with an option to display a road map style only in one coloring theme. | | Bing Maps | Provides geographic imagery from Bing Maps service with configurable options to display the following map styles: