From dc742f44b913cf30ccee479f032be5f3426b1000 Mon Sep 17 00:00:00 2001 From: Viktor Kombov Date: Tue, 26 May 2026 20:46:07 +0300 Subject: [PATCH 1/6] fix(mdx): merge orphaned inline ComponentBlock/PlatformBlock prose into single paragraphs --- .../skills/xplat-docs-platform-block/SKILL.md | 51 ++++++ .../content/en/components/bullet-graph.mdx | 131 ---------------- .../en/components/charts/chart-api.mdx | 7 - .../en/components/charts/chart-features.mdx | 1 - .../en/components/charts/chart-overview.mdx | 57 ------- .../charts/features/chart-animations.mdx | 4 - .../charts/features/chart-annotations.mdx | 36 ----- .../charts/features/chart-axis-gridlines.mdx | 10 -- .../charts/features/chart-axis-layouts.mdx | 17 -- .../charts/features/chart-axis-options.mdx | 21 --- .../charts/features/chart-axis-types.mdx | 9 -- .../features/chart-data-aggregations.mdx | 11 -- .../features/chart-data-annotations.mdx | 8 - .../charts/features/chart-data-filtering.mdx | 4 - .../charts/features/chart-data-legend.mdx | 19 --- .../charts/features/chart-data-selection.mdx | 6 - .../charts/features/chart-data-tooltip.mdx | 18 --- .../features/chart-highlight-filter.mdx | 9 +- .../charts/features/chart-highlighting.mdx | 8 - .../charts/features/chart-markers.mdx | 6 - .../charts/features/chart-navigation.mdx | 5 - .../charts/features/chart-overlays.mdx | 10 -- .../charts/features/chart-performance.mdx | 81 ---------- .../charts/features/chart-synchronization.mdx | 2 - .../charts/features/chart-titles.mdx | 4 - .../charts/features/chart-tooltips.mdx | 8 - .../charts/features/chart-trendlines.mdx | 6 - .../features/chart-user-annotations.mdx | 4 - .../en/components/charts/types/area-chart.mdx | 41 ----- .../en/components/charts/types/bar-chart.mdx | 17 -- .../components/charts/types/bubble-chart.mdx | 12 -- .../components/charts/types/column-chart.mdx | 30 ---- .../charts/types/composite-chart.mdx | 4 - .../charts/types/data-pie-chart.mdx | 8 - .../components/charts/types/donut-chart.mdx | 8 - .../en/components/charts/types/line-chart.mdx | 27 ---- .../en/components/charts/types/pie-chart.mdx | 25 --- .../components/charts/types/point-chart.mdx | 13 -- .../components/charts/types/polar-chart.mdx | 19 --- .../components/charts/types/radial-chart.mdx | 15 -- .../components/charts/types/scatter-chart.mdx | 19 --- .../components/charts/types/shape-chart.mdx | 7 - .../charts/types/sparkline-chart.mdx | 19 --- .../components/charts/types/spline-chart.mdx | 18 --- .../components/charts/types/stacked-chart.mdx | 51 ------ .../en/components/charts/types/step-chart.mdx | 10 -- .../components/charts/types/stock-chart.mdx | 19 --- .../components/charts/types/treemap-chart.mdx | 10 -- .../content/en/components/dashboard-tile.mdx | 22 --- .../components/excel-library-using-cells.mdx | 32 ---- .../components/excel-library-using-tables.mdx | 13 -- .../excel-library-using-workbooks.mdx | 15 -- .../excel-library-using-worksheets.mdx | 35 ----- .../excel-library-working-with-charts.mdx | 5 - .../excel-library-working-with-grids.mdx | 3 - .../excel-library-working-with-sparklines.mdx | 7 - .../content/en/components/excel-library.mdx | 31 ---- .../content/en/components/excel-utility.mdx | 13 -- .../en/components/general-changelog-dv.mdx | 11 -- .../components/geo-map-binding-data-csv.mdx | 25 --- .../geo-map-binding-data-json-points.mdx | 22 --- .../components/geo-map-binding-data-model.mdx | 22 --- .../geo-map-binding-data-overview.mdx | 2 - .../geo-map-binding-multiple-shapes.mdx | 67 +------- .../geo-map-binding-multiple-sources.mdx | 45 ------ .../components/geo-map-binding-shp-file.mdx | 29 +--- .../geo-map-display-azure-imagery.mdx | 34 ---- .../geo-map-display-bing-imagery.mdx | 13 -- .../geo-map-display-esri-imagery.mdx | 29 ---- .../geo-map-display-heat-imagery.mdx | 52 +------ .../geo-map-display-imagery-types.mdx | 1 - .../geo-map-display-osm-imagery.mdx | 21 --- .../en/components/geo-map-navigation.mdx | 13 -- .../en/components/geo-map-resources-esri.mdx | 3 - ...eo-map-resources-shape-styling-utility.mdx | 9 -- .../geo-map-resources-world-connections.mdx | 3 - .../geo-map-resources-world-locations.mdx | 3 - .../geo-map-resources-world-util.mdx | 3 - .../geo-map-shape-files-reference.mdx | 4 - .../en/components/geo-map-shape-styling.mdx | 45 ------ .../geo-map-type-scatter-area-series.mdx | 31 +--- .../geo-map-type-scatter-bubble-series.mdx | 30 ---- .../geo-map-type-scatter-contour-series.mdx | 28 ---- .../geo-map-type-scatter-density-series.mdx | 30 ---- .../geo-map-type-scatter-symbol-series.mdx | 31 +--- .../en/components/geo-map-type-series.mdx | 3 - .../geo-map-type-shape-polygon-series.mdx | 31 +--- .../geo-map-type-shape-polyline-series.mdx | 31 +--- .../src/content/en/components/geo-map.mdx | 36 ----- .../en/components/inputs/color-editor.mdx | 41 ----- .../accessibility-compliance.mdx | 4 - .../content/en/components/linear-gauge.mdx | 130 ---------------- .../content/en/components/maps/map-api.mdx | 4 +- .../content/en/components/menus/toolbar.mdx | 76 --------- .../content/en/components/radial-gauge.mdx | 146 ------------------ .../en/components/spreadsheet-activation.mdx | 6 - .../components/spreadsheet-chart-adapter.mdx | 10 -- .../en/components/spreadsheet-clipboard.mdx | 14 -- .../en/components/spreadsheet-commands.mdx | 22 --- .../spreadsheet-conditional-formatting.mdx | 14 +- .../en/components/spreadsheet-configuring.mdx | 69 --------- .../spreadsheet-data-validation.mdx | 12 -- .../en/components/spreadsheet-hyperlinks.mdx | 12 -- .../en/components/spreadsheet-overview.mdx | 30 ---- .../en/components/zoomslider-overview.mdx | 31 ---- .../en/grids_templates/column-types.mdx | 12 +- .../grids_templates/excel-style-filtering.mdx | 13 +- .../content/en/grids_templates/filtering.mdx | 6 +- .../grids_templates/keyboard-navigation.mdx | 49 +++--- .../content/en/grids_templates/row-adding.mdx | 7 +- .../en/grids_templates/row-selection.mdx | 10 +- docs/xplat/scripts/generate.mjs | 7 +- .../content/en/components/grids/data-grid.mdx | 7 +- .../grids/hierarchical-grid/overview.mdx | 7 +- .../components/grids/tree-grid/overview.mdx | 7 +- .../content/en/components/inputs/button.mdx | 6 +- .../en/components/interactivity/chat.mdx | 7 +- .../en/components/scheduling/date-picker.mdx | 15 +- .../content/jp/components/grids/data-grid.mdx | 7 +- .../grids/hierarchical-grid/overview.mdx | 7 +- .../components/grids/tree-grid/overview.mdx | 7 +- .../content/jp/components/inputs/button.mdx | 6 +- .../jp/components/interactivity/chat.mdx | 13 +- .../jp/components/scheduling/date-picker.mdx | 14 +- 124 files changed, 172 insertions(+), 2464 deletions(-) diff --git a/.github/skills/xplat-docs-platform-block/SKILL.md b/.github/skills/xplat-docs-platform-block/SKILL.md index 087c440131..68c6bd86c3 100644 --- a/.github/skills/xplat-docs-platform-block/SKILL.md +++ b/.github/skills/xplat-docs-platform-block/SKILL.md @@ -341,6 +341,57 @@ Typical full-coverage pattern: | Wrong platform name (e.g. `"Webcomponents"`, `"blazor"`) | Content never shown (silently filtered out) | Use exact casing: `WebComponents`, `Blazor`, `Angular`, `React` | | CSS inside PlatformBlock when it applies to all platforms | CSS hidden from unlisted platforms | Move CSS outside the PlatformBlock | | JSX `{500}` inside `{/* */}` MDX comment | Parse error: `Cannot read properties of undefined (reading 'start')` | Change numeric JSX props to strings: `height="500"` | +| **Inline PlatformBlock mid-sentence** with blank lines around content | Content renders as separate block-level paragraph, breaking sentence flow | Move the entire sentence into each PlatformBlock (duplicate shared text) | + +--- + +## CRITICAL: Never Use PlatformBlock for Inline Text + +`` is a **block-level** component. When its content has blank lines around it, MDX renders it as a separate paragraph. **Never** split a sentence across PlatformBlock boundaries. + +### Wrong — breaks sentence flow: + +```mdx +The component gives flexibility through the {Platform} Button + + +OnClick event + + + + + +clicked callback + + +, toggle the button, and more. +``` + +This renders "OnClick event" as a standalone paragraph, with `, toggle the button` orphaned below it. + +### Correct — duplicate shared text into each block: + +```mdx + + +The component gives flexibility through the {Platform} Button OnClick event, toggle the button, and more. + + + + + +The component gives flexibility through the {Platform} Button clicked callback, toggle the button, and more. + + +``` + +### Also correct — inline on same line (no blank lines): + +```mdx +The component uses for rendering. +``` + +This works because the PlatformBlock tags and content are all on the **same line** — MDX treats same-line components as inline elements. --- diff --git a/docs/angular/src/content/en/components/bullet-graph.mdx b/docs/angular/src/content/en/components/bullet-graph.mdx index 0907f7b66b..bc1709900c 100644 --- a/docs/angular/src/content/en/components/bullet-graph.mdx +++ b/docs/angular/src/content/en/components/bullet-graph.mdx @@ -21,18 +21,11 @@ The following sample demonstrates how setting multiple properties on the same - - -
The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the property. The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more. - - - - ## Dependencies When installing the gauge package, the core package must also be installed. @@ -41,17 +34,10 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-gauges ``` - - - ## Component Modules The requires the following modules: - - - - ```ts // app.module.ts import { IgxBulletGraphModule } from 'igniteui-angular-gauges'; @@ -66,22 +52,12 @@ import { IgxBulletGraphModule } from 'igniteui-angular-gauges'; export class AppModule {} ``` - - - - - - -
## Usage The following code walks through creating a bullet graph component, and configuring a performance bar, comparative measure marker, and three comparative ranges on the scale. - - - ```html ``` - - - - - - - -
## Comparative Measures @@ -119,8 +87,6 @@ The bullet graph can show two measures: performance value and target value. Performance value is the primary measure displayed by the component and it is visualized as a bar that stretches along the length of the whole graph. The target value is a measure which the performance value compares against. It is displayed as a small block that runs perpendicular to the orientation of the performance bar. - - ```html ``` - - - - - - - - - - ## Highlight Value The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the `Value` appear with a lower opacity. A good example is if `Value` is 50 and `HighlightValue` is set to 25. This would represent a performance of 50% regardless of what the value of `TargetValue` is set to. To enable this first set `HighlightValueDisplayMode` to Overlay and then apply a `HighlightValue` to something lower than `Value`. - - ```html ``` - - - - - - - - - ## Comparative Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state. - - ```html ``` - - - - - - - - - - - ## Tick Marks The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph. - Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting their corresponding properties. - Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones. - - ```html ``` - - - - - - - - - - - ## Labels The labels indicate the measures on the scale. - - ```html ``` - - - - - - - - - - - ## Backing The backing element represents background and border of the bullet graph component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. - - ```html ``` - - - - - - - - - - - ## Scale The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using `IsScaleInverted` property) and all labels will be rendered from right-to-left instead of left-to-right. - - ```html ``` - - - - - - - - - - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the bullet graph with all features and visuals enabled. - - ```html ``` - - - - - - - - - ## API References -

diff --git a/docs/angular/src/content/en/components/charts/chart-api.mdx b/docs/angular/src/content/en/components/charts/chart-api.mdx index a3af6586d1..9d233f0be7 100644 --- a/docs/angular/src/content/en/components/charts/chart-api.mdx +++ b/docs/angular/src/content/en/components/charts/chart-api.mdx @@ -41,17 +41,14 @@ The Angular `DataChart` can use the following type of series that inherit from ` |------------------|----------------| | - `AreaSeries`
- `BarSeries`
- `ColumnSeries`
- `LineSeries`
- `PointSeries`
- `SplineSeries`
- `SplineAreaSeries`
- `StepLineSeries`
- `StepAreaSeries`
- `RangeAreaSeries`
- `RangeColumnSeries`
- `WaterfallSeries`
| - `StackedAreaSeries`
- `StackedBarSeries`
- `StackedColumnSeries`
- `StackedLineSeries`
- `StackedSplineSeries`
- `Stacked100AreaSeries`
- `Stacked100BarSeries`
- `Stacked100ColumnSeries`
- `Stacked100LineSeries`
- `Stacked100SplineSeries`


| - | Scatter Series | Financial Series | |----------------|------------------| | - `BubbleSeries`
- `HighDensityScatterSeries`
- `ScatterSeries`
- `ScatterLineSeries`
- `ScatterSplineSeries`
- `ScatterAreaSeries`
- `ScatterContourSeries`
- `ScatterPolylineSeries`
- `ScatterPolygonSeries`

| - `FinancialPriceSeries`
- `BollingerBandsOverlay`
- `ForceIndexIndicator`
- `MedianPriceIndicator`
- `MassIndexIndicator`
- `RelativeStrengthIndexIndicator`
- `StandardDeviationIndicator`
- `TypicalPriceIndicator`
- `WeightedCloseIndicator`
- and [many more](types/stock-chart.md) | - | Radial Series | Polar Series | |---------------|--------------| | - `RadialLineSeries`
- `RadialAreaSeries`
- `RadialPieSeries`
- `RadialColumnSeries`

| - `PolarScatterSeries`
- `PolarLineSeries`
- `PolarAreaSeries`
- `PolarSplineSeries`
- `PolarSplineAreaSeries`
| - ## Angular Data Legend API The Angular `DataLegend` has the following API members: @@ -73,7 +70,6 @@ The Angular `DataLegend` has the following API members: - `HeaderTextColor` - `BadgeShape` - ## Angular Donut Chart API The Angular `DoughnutChart` has the following API members: @@ -122,6 +118,3 @@ You can find more information about charts in these topics: - [Chart Overview](chart-overview.md) - [Chart Features](chart-features.md) - - - diff --git a/docs/angular/src/content/en/components/charts/chart-features.mdx b/docs/angular/src/content/en/components/charts/chart-features.mdx index 95217dc53b..a8867365f4 100644 --- a/docs/angular/src/content/en/components/charts/chart-features.mdx +++ b/docs/angular/src/content/en/components/charts/chart-features.mdx @@ -74,7 +74,6 @@ Use trendlines to identify a trend or find patterns in your data. There are many - ## API References
diff --git a/docs/angular/src/content/en/components/charts/chart-overview.mdx b/docs/angular/src/content/en/components/charts/chart-overview.mdx index 2ab4e2d0ae..5eecfe33be 100644 --- a/docs/angular/src/content/en/components/charts/chart-overview.mdx +++ b/docs/angular/src/content/en/components/charts/chart-overview.mdx @@ -63,9 +63,6 @@ The Angular Bar Chart, or Bar Graph is among the most common category chart type - - -
### Angular Pie Chart @@ -74,9 +71,6 @@ The Angular Pie Chart, or Pie Graph, is a very common part-to-whole chart type. - - -
### Angular Line Chart @@ -85,9 +79,6 @@ The Angular Line Chart, or Line Graph is a type of category line graph shows the - - -
### Angular Donut Chart @@ -96,9 +87,6 @@ The Angular Donut Chart or Donut Graph, is a variant of a Pie Chart, proportiona - - -
### Angular Area Chart @@ -107,9 +95,6 @@ The Angular Area Chart is rendered using a collection of points connected by str - - -
### Angular Sparkline Chart @@ -118,9 +103,6 @@ The Angular Sparkline Chart, or Sparkline Graph is a type of category graph inte - - -
### Angular Bubble Chart @@ -129,9 +111,6 @@ The Angular Bubble Chart, or Bubble Graph, is used to show data comprising of th - - -
### Angular Financial / Stock Chart @@ -140,9 +119,6 @@ The Angular Financial or Stock Chart, is a composite visualization that renders - - -
### Angular Column Chart @@ -151,9 +127,6 @@ The Angular Column Chart, or Column Graph is among the most common category char - - -
### Angular Composite Chart @@ -162,9 +135,6 @@ The Angular Composite Chart, also called a Combo Chart, is visualization that co - - -
{/* ### Angular Gantt Chart @@ -181,9 +151,6 @@ The Angular Polar Area Chart or Polar Graph belongs to a group of polar charts a - - -
{/* ### Angular Pyramid Chart @@ -196,9 +163,6 @@ The Angular Scatter Chart, or Scatter Graph, is used to show the relationship be - - -
### Angular Shape Chart @@ -207,9 +171,6 @@ The Angular Shape Charts is a group of chart that take array of shapes (array or - - -
### Angular Spline Chart @@ -218,9 +179,6 @@ The Angular Spline Chart, or Spline Graph is a type of category line graph shows - - -
### Angular Step Chart @@ -229,9 +187,6 @@ The Angular Step Chart, or Step Graph, is a category charts that renders a colle - - -
{/* ### Angular Timeline / Time-Series Charts @@ -244,9 +199,6 @@ The Ignite UI for Angular Treemap displays hierarchical (tree-structured) data a - - -
## Angular Charts Key Features @@ -299,7 +251,6 @@ Use one of 10 [Marker Types](features/chart-markers.md) or create your own [Mark Angular Charts Markers, Tooltips, and Templates - ## But Wait, There's More! If you are considering any other Angular Charts on the market, here are a few things to think about: @@ -311,19 +262,11 @@ If you are considering any other Angular Charts on the market, here are a few th - We are here 24x5. Infragistics has global support that is always online. For North America, Asia Pacific, Middle East, and Europe, we are on the clock when you are! - We have many more UI controls in Angular besides the Charts. We offer a complete Angular solution to build your applications! - - - - Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular. - We offer the world's first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Figma designs. With Indigo.Design, everything you craft in Figma from our Indigo Design System matches to our Ignite UI for Angular controls. - - - ## API References - -


diff --git a/docs/angular/src/content/en/components/charts/features/chart-animations.mdx b/docs/angular/src/content/en/components/charts/features/chart-animations.mdx index 7d47bace49..91fb6d972a 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-animations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-animations.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Chart Animations Animations allows you to ease-in the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the column series animates by rising from the x-axis, a line series animates by drawing from the origin of y-axis. @@ -22,8 +21,6 @@ The following example depicts a [Line Chart](../types/line-chart.md) with an ani - -
## Additional Resources @@ -34,7 +31,6 @@ You can find more information about related chart features in these topics: - [Chart Highlighting](chart-highlighting.md) - [Chart Tooltips](chart-tooltips.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx index 8894759571..419d836219 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Chart Annotations The Angular chart's hover interactions and annotations are implemented through hover interaction layers, which are series that are added to the series collection. These layers are dependent on the cursor position. Each of these annotation layers provides a different hover interaction that may be used individually or combined with others to provide powerful hover interactions. @@ -20,8 +19,6 @@ The following example demonstrates the annotation layers that are available on t - -
Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. @@ -45,9 +42,6 @@ The following example shows how to configure the crosshair layer but targeting a - - -
## Angular Final Value Layer @@ -66,13 +60,8 @@ The following example demonstrates how to style the final value layer annotation - - -
- - ```html ``` - - - - - - - ## Angular Callout Layer The displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source. @@ -109,13 +91,8 @@ The following example demonstrates how to style the callout layer annotations by - - -
- - ```html ``` - - - - - - - - - - - - ## API References -
diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx index 90ed3fc81a..95e545ce90 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; - # Angular Axis Gridlines All Ignite UI for Angular charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis. @@ -28,9 +27,6 @@ This example shows how configure the axis gridline to display major and minor gr - - -
## Angular Axis Gridlines Properties @@ -64,14 +60,12 @@ The following example demonstrates how to customize the gridlines by setting the - The axes of the `DataChart` also have the ability to place a dash array on the major and minor gridlines by utilizing the `MajorStrokeDashArray` and `MinorStrokeDashArray` properties, respectively. The actual axis line can be dashed as well by setting the `StrokeDashArray` property of the corresponding axis. These properties take an array of numbers that will describe the length of the dashes for the corresponding grid lines. The following example demonstrates a `DataChart` with the above dash array properties set: -
## Angular Axis Tickmarks Example @@ -84,9 +78,6 @@ The following example demonstrates how to customize the tickmarks by setting the - - -
## Angular Axis Tickmarks Properties @@ -99,7 +90,6 @@ You can customize how the axis tickmarks are displayed in our Angular chats by s | Tick Stroke Thickness | number | `XAxisTickStrokeThickness`
`YAxisTickStrokeThickness` | These properties set the thickness of the axis tick marks. | | Tick Stroke Length | number | `XAxisTickLength`
`YAxisTickLength` | These properties set the length of the axis tick marks. | - ## Additional Resources You can find more information about related chart features in these topics: diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx index 9356484f6f..1ae22d3a62 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx @@ -8,7 +8,6 @@ mentionedTypes: [ "DomainChart", "CategoryChart", "XYChart", "DomainChart", "Dat import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; - # Angular Axis Layouts All Ignite UI for Angular charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. These features are demonstrated in the examples given below. @@ -25,9 +24,6 @@ The following example depicts the amount of renewable electricity produced since - - - {/* ## Axis Orientation Example TODO add info/example of 4 charts with all possible combinations of XAxisInverted and YAxisInverted @@ -46,9 +42,6 @@ The following example depicts a stock price and trade volume chart with a [Stock - - -
### Axis Crossing Example @@ -59,15 +52,8 @@ The following example shows a Sin and Cos wave represented by a [Scatter Spline - - -
- - - - ## Additional Resources You can find more information about related chart features in these topics: @@ -75,13 +61,11 @@ You can find more information about related chart features in these topics: - [Axis Gridlines](chart-axis-gridlines.md) - [Axis Options](chart-axis-options.md) - ## API References The following is a list of API members mentioned in the above sections: d in the above sections: - | `DataChart` | `CategoryChart` | | ------------------------------------------------------ | ------------------------------- | | `Axes` -> `NumericYAxis` -> `CrossingAxis` | None | @@ -103,4 +87,3 @@ d in the above sections: | `Axes` -> `NumericXAxis` -> `labelSettings.verticalAlignment` | `XAxisLabelVerticalAlignment` | | `Axes` -> `NumericYAxis` -> `labelSettings.visibility` | `YAxisLabelVisibility` | | `Axes` -> `NumericXAxis` -> `labelSettings.visibility` | `XAxisLabelVisibility` | */} - diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx index d8830f4a0e..7f64a97a7e 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Axis Options In all Ignite UI for Angular charts, the axes provide properties for visual configurations such as titles, labels, and ranges. These features are demonstrated in the examples provided below. @@ -20,19 +19,14 @@ The axis titles feature of the Angular charts, allows you to add contextual info -
- ## Axis Labels Example The Angular Charts allows you full control over configuring, formatting, and styling the font of the labels displayed on an axis in your chart. You can change the rotation angle, margin, horizontal and vertical alignment, color, padding, and visibility of axis labels. The following example shows how to use these features of axes. - - -
## Axis Labels Management & Formatting @@ -51,7 +45,6 @@ The following example formats the yAxis with a `NumberFormatSpecifier` to repres -
## Axis Range Example @@ -62,12 +55,8 @@ By default, charts will calculate the minimum and maximum values for the numeric - - -
- ## Axis Modes & Scale In the and controls, you can choose if your data is plotted on logarithmic scale along the y-axis when the property is set to true or on linear scale when this property is set to false (default value). With the property, you can change base of logarithmic scale from default value of 10 to other integer value. @@ -78,9 +67,6 @@ In addition to - - -
## Axis Gap Example @@ -95,9 +81,6 @@ The following example shows the average maximum temperature in Celsius in New Yo - - -
## Axis Overlap Example @@ -108,9 +91,6 @@ The following example shows a comparison of the highest grossing worldwide film - - -
## Additional Resources @@ -140,4 +120,3 @@ The following is a list of API members mentioned in the above sections: | `Axes` -> `NumericXAxis` -> `labelSettings.textColor` | `XAxisLabelForeground` | `XAxisLabelForeground` | | `Axes` -> `NumericYAxis` -> `labelSettings.visibility` | `YAxisLabelVisibility` | `YAxisLabelVisibility` | | `Axes` -> `NumericXAxis` -> `labelSettings.visibility` | `XAxisLabelVisibility` | `XAxisLabelVisibility` | - diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx index fd53503b34..4f0d181959 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx @@ -8,7 +8,6 @@ namespace: Infragistics.Controls.Charts --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; - # Angular Axis Types The Ignite UI for Angular Category Chart uses only one `CategoryXAxis` and one `NumericYAxis` type. Similarly, Ignite UI for Angular Financial Chart uses only one `TimeXAxis` and one `NumericYAxis` types. However, the Ignite UI for Angular Data Chart provides support for multiple axis types that you can position on any side of the chart by setting [axis location](chart-axis-layouts.md#axis-locations-example) or even inside of the chart by using [axis crossing](chart-axis-layouts.md#axis-crossing-example) properties. This topic goes over each one, which axes and series are compatible with each other, and some specific properties to the unique axes. @@ -32,7 +31,6 @@ The `CategoryXAxis` requires you to provide a `DataSource` and a `Label` in orde - ### Category Y-Axis The `CategoryYAxis` works very similarly to the `CategoryXAxis` described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a `DataSource` and a `Label` in order to plot data with it. The `CategoryYAxis` is generally used with the `NumericXAxis` to plot the following type of series: @@ -45,7 +43,6 @@ The `CategoryYAxis` works very similarly to the `CategoryXAxis` described above, - ### Numeric X-Axis The `NumericXAxis` treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the `NumericXAxis` labels depends on the `XMemberPath` property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a `NumericYAxis`. Alternatively, if combined with the `CategoryXAxis`, these labels will be placed corresponding to the `ValueMemberPath` of the `BarSeries`, `StackedBarSeries`, and `Stacked100BarSeries`. @@ -69,7 +66,6 @@ The `NumericXAxis` is compatible with the following type of series: - ### Numeric Y-Axis The `NumericYAxis` treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the `NumericYAxis` labels depends on the `YMemberPath` property of the various [ScatterSeries](../types/scatter-chart.md) that is supports if combined with a `NumericXAxis`. Alternatively, if combined with the `CategoryYAxis`, these labels will be placed corresponding to the `ValueMemberPath` of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using. @@ -84,7 +80,6 @@ The `NumericYAxis` is compatible with the following type of series: - ### Time X Axis The `TimeXAxis` treats its data as a sequence of data items, sorted by date. Labels on this axis type are dates and can be formatted and arranged according to date intervals. The date range of this axis is determined by the date values in a data column that is mapped using its `DateTimeMemberPath`. This, along with a `DataSource` is required to plot data with this axis type. @@ -123,7 +118,6 @@ The following example demonstrates usage of the `CategoryAngleAxis` type: - ### Proportional Category Angle Axis The `ProportionalCategoryAngleAxis` treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers. @@ -134,7 +128,6 @@ The following example demonstrates usage of the `ProportionalCategoryAngleAxis` - ### Numeric Angle Axis The `NumericAngleAxis` treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the `NumericAngleAxis` varies according to the value in the data column mapped using the `RadiusMemberPath` property of the [Polar Series](../types/polar-chart.md) object or the `ValueMemberPath` property of the [Radial Series](../types/radial-chart.md) object. @@ -145,7 +138,6 @@ The following example demonstrates usage of the `NumericAngleAxis` type: - ### Numeric Radius Axis The `NumericRadiusAxis` treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the `AngleMemberPath` property of the corresponding polar series. @@ -156,7 +148,6 @@ The following example demonstrates usage of the `NumericRadiusAxis` type: - ## Additional Resources You can find more information about related chart features in these topics: diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx index 414247e37a..175ac7554f 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Data Aggregations In the Ignite UI for Angular control Data Aggregations feature allows you to group data in the chart by unique values on the and then sort those groups. You may then apply summaries which will be reflected by the range of the and will be displayed in the tooltip when hovering the series. @@ -22,9 +21,6 @@ Note, the abbreviated functions found within the dropdowns for - - - ```html
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx index 972158fd58..36982f5f07 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx @@ -10,7 +10,6 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; - # Angular Chart Data Annotations In the Angular chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data. @@ -23,7 +22,6 @@ For example, you can annotates stock prices with stock events and patterns. - Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. ## Angular Data Annotation Slice Layer Example @@ -34,7 +32,6 @@ For example, you can use DataAnnotationSliceLayer to annotate stock prices with -
## Angular Data Annotation Strip Layer Example @@ -45,7 +42,6 @@ For example, you can use `DataAnnotationStripLayer` to annotate chart with stock -
## Angular Data Annotation Line Layer Example @@ -56,7 +52,6 @@ For example, you can use DataAnnotationLineLayer to annotate growth and decline -
## Angular Data Annotation Rect Layer Example @@ -67,7 +62,6 @@ For example, you can use DataAnnotationRectLayer to annotate bearish patterns an -
## Angular Data Annotation Band Layer Example @@ -78,7 +72,6 @@ For example, you can use DataAnnotationBandLayer to annotate range of growth in -
## API References @@ -95,4 +88,3 @@ The following is a list of API members mentioned in the above sections: - `StartLabelXDisplayMode` | `StartLabelYDisplayMode` | `EndLabelXDisplayMode` | `EndLabelYDisplayMode` | `CenterLabelXDisplayMode`: These properties specify what should annotation labels display on starting, ending, or center of the annotation shape, e.g. mapped data value, mapped data label, axis value, or hide a given annotation label. - `StartLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the starting position of `DataAnnotationBandLayer`, `DataAnnotationLineLayer`, `DataAnnotationRectLayer` on the y-axis. - `EndLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the ending position of `DataAnnotationBandLayer`, `DataAnnotationLineLayer`, `DataAnnotationRectLayer` on the y-axis. - diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx index 97bf5d2468..e4b2806d14 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Chart Data Filtering Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart. @@ -26,7 +25,6 @@ The following example depicts a [Column Chart](../types/column-chart.md) of annu -
The property is a string that requires the following syntax in order to filter properly. The value requires sets of parentheses that include both the filter expression definition, column and value associated with the record(s) filtering in. @@ -39,7 +37,6 @@ eg. Concatenating more than one expression: "(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))" - ## Additional Resources You can find more information about related chart features in these topics: @@ -48,7 +45,6 @@ You can find more information about related chart features in these topics: - [Chart Highlighting](chart-highlighting.md) - [Chart Tooltips](chart-tooltips.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx index 53285acb0e..4770139a72 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx @@ -12,7 +12,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; import { Image } from 'astro:assets'; import layoutMode from '@xplat-images/general/layout_mode.png'; - # Angular Data Legend In Ignite UI for Angular, the `DataLegend` is highly-customizable version of the `Legend`, that shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. This legend updates when moving the mouse inside of the plot area of the `CategoryChart`, `FinancialChart`, and `DataChart`. Also, it has a persistent state that remembers the last hovered point when the user's mouse pointer exits the plot area. It displays this content using a set of three type of rows (header, series, summary) and four types of columns (title, label, value, unit). @@ -23,7 +22,6 @@ The rows of the `DataLegend` include the header row, series row(s), and the summ - ### Header Row The header row displays the current label of x-axis when hovering mouse over category series and financial series. You can use `HeaderFormatDate` and `HeaderFormatTime` properties to format date and time in the `DataLegend` if the x-axis shows dates. For other types of series, the `DataLegend` does not render the header row. @@ -42,9 +40,6 @@ The columns of the `DataLegend` include the series title, label, value of data c - - - Setting values on the `IncludedColumns` and `ExcludedColumns` properties, depends on type of series and how many data columns they support. For example, you can set `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 | @@ -71,7 +66,6 @@ The label column displays short name on the left side of value column, e.g. "O" The value column displays values of series as abbreviated text which can be formatted using the `ValueFormatAbbreviation` property to apply the same abbreviation for all numbers by setting this property to `Shared`. Alternatively, a user can select other abbreviations such as `Independent`, `Kilo`, `Million`, etc. Precision of abbreviated values is controlled using the `ValueFormatMinFractions` and `ValueFormatMaxFractions` for minimum and maximum digits, respectively. - ### Unit Column The unit column displays an abbreviation symbol on the right side of value column. The unit symbol depends on the `ValueFormatAbbreviation` property, e.g. "M" for the `Million` abbreviation. @@ -104,9 +98,6 @@ The `DataLegend` provides properties for styling each type of column. Each of th - - - ## Angular Data Legend Value Formatting The `DataLegend` provides automatic abbreviation of large numbers using its `ValueFormatAbbreviation` property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the `ValueFormatMinFractions` and `ValueFormatMaxFractions`. This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. @@ -114,17 +105,12 @@ The following example demonstrates how to use those properties: - - - ## Angular Data Legend Value Mode You have the ability to change the default decimal display of values within the `DataLegend` to a currency by changing the `ValueFormatMode` property. Also, you can change the culture of the displayed currency symbol by setting the `ValueFormatCulture` property a culture tag. For example, the following example data legend with the `ValueFormatCulture` set to "en-GB" to display British Pounds (£) symbol: - - ## Angular Data Legend Grouping `DataLegendGroup` can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed: @@ -132,8 +118,6 @@ By default, DataLegend will hide names of groups, but you can display group name - - ## Angular Data Legend Styling & Events Several properties are exposed including grouping portions of the legend. @@ -169,9 +153,6 @@ Some of the events exposes a `DataLegendStylingRowEventArgs` parameter as its ar - ## API References - -
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx index f8c370692e..bb362164b4 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; - # Angular Chart Selection The Ignite UI for Angular selection feature in Angular Data Chart allows users to interactively select, highlight, outline and vice-versa deselect single or multiple series within a chart. This provides many different possibilities with how users interact with the data presented in more meaningful ways. @@ -50,10 +49,8 @@ In conjunction, a `SelectionBehavior` is available to provide greater control on The following example shows the combination of both `SelectionColorFill` and `Auto` selection behavior aka `PerSeriesAndDataItemMultiSelect`. Color Fills provide a useful visual cue as it changes the entire series item's back color. By clicking each item you'll see the item change from green to purple. - - ## Configuring Multiple Selection Other selection modes offer various methods of selection. For example using `SelectionBehavior` with `PerDataItemMultiSelect` will affect all series in entire category when multiple series are present while allowing selection across categories. Compared to `PerDataItemSingleSelect`, only a single category of items can be selected at a time. This is useful if multiple series are bound to different datasources and provides greater control of selection between categories. @@ -61,7 +58,6 @@ Other selection modes offer various methods of selection. For example using `Sel - ## Configuring Outline Selection When `FocusBrush` is applied, selected series will appear with a border when the `SelectionMode` property is set to one of the focus options. @@ -72,7 +68,6 @@ This example demonstrates another series type via the `DataChart` where each rad - ## Programmatic Selection Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the `CategoryChart`. The `Matcher` property of the `ChartSelection` object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. @@ -82,7 +77,6 @@ For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar - ## API References The following is a list of API members mentioned in the above sections: diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx index 11cb111f34..7f3dfb1a6a 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx @@ -12,7 +12,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; import { Image } from 'astro:assets'; import layoutMode from '@xplat-images/general/layout_mode.png'; - # Angular Chart Data Tooltip In Ignite UI for Angular, the **DataToolTip** displays values and titles of series as well as legend badges of series in a tooltip. In addition, it provides many configuration properties of the for filtering series rows and values columns, styling, and formatting values. This tooltip type updates while moving the mouse inside of the plot area of the , , and components. @@ -39,9 +38,6 @@ The following example demonstrates the data tooltip with a summary applied: - - - ### Angular Data Tooltip Columns The columns of the include the title, label, value, and units columns. Each series in the chart can have multiple columns for label, value, and units depending on the or collections of the chart. @@ -78,9 +74,6 @@ The following example demonstrates a data tooltip with the added columns of Open - - - ## Angular Data Tooltip Grouping for Data Chart `DataLegendGroup` can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed: @@ -88,8 +81,6 @@ By default, DataLegend will hide names of groups, but you can display group name - - ## Angular Data Tooltip Grouping & Positioning for Category Chart & Financial Chart You can set property to either `Grouped` or `Individual` to group content for multiple series into single tooltip or separate content for each series in multiple tooltips. In the `Grouped` mode, you can customize where the tooltip is shown by setting the and properties. This essentially allows you to customize the horizontal and vertical alignments of the tooltip and whether you want it to track to the closest series points to the mouse position or pin the tooltip to edge of plot area. @@ -98,7 +89,6 @@ The following example demonstrates a data tooltip positioned to the top-right of - ## Angular Data Tooltip Value Formatting The **DataToolTip** provides automatic abbreviation of large numbers using its property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the and . This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. @@ -107,16 +97,12 @@ The following example demonstrates a **DataToolTip** with the minimum and maximu - - - ## Angular Data Tooltip Value Mode You can change the default decimal display of values within the **DataToolTip** to be currency by changing the property of the layer. The **DataToolTip** also exposes the ability to modify the culture of the displayed currency symbol by using its property and setting it to its corresponding culture tag. For example, the following sample demonstrates a chart with the set to "en-GB": - ## Layout Mode Legend items can be positioned in a vertical or table structure via the `LayoutMode` property. The default value is `Table`, which retains the same look and feel as seen in previous releases. @@ -125,7 +111,6 @@ eg. Layout Mode - ## Angular Data Tooltip Styling The **DataToolTip** provides properties for styling each type of column. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the , , , and properties. @@ -134,7 +119,6 @@ The following example demonstrates usage of the styling properties mentioned abo - Several properties are exposed including grouping portions of the tooltip. - `GroupTextMargin` @@ -152,10 +136,8 @@ Several properties are exposed including grouping portions of the tooltip. - `HeaderTextFontStretch` - `HeaderTextFontWeight` - ## API References -


diff --git a/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx b/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx index 45508b55c5..37a2316326 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx @@ -8,14 +8,12 @@ namespace: Infragistics.Controls.Charts --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; - # Angular Chart Highlight Filter The Ignite UI for Angular Chart components support a data highlighting overlay that can enhance the visualization of the series plotted in those charts by allowing you to view a subset of the data plotted. When enabled, this will highlight a subset of data while showing the total set with a reduced opacity in the case of column and area series types, and a dashed line in the case of line series types. This can help you to visualize things like target values versus actual values with your data set. This feature is demonstrated in the following example: - Note that data highlighting feature is supported by the `DataChart` and `CategoryChart`, but it is configured in different ways in those controls due to the nature of how those controls work. One thing remains constant with this feature though, in that you need to set the `HighlightedValuesDisplayMode` property to `Overlay` if you want to see the highlight. The following will explain the different configurations for the highlight filter feature. ## Using Highlight Filter with DataChart @@ -34,17 +32,14 @@ The following example demonstrates the usage of the data legend grouping and hig - The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the `DataChart` control using the `HighlightedValuesDataLegendGroup`: - The following example demonstrates the usage of the data highlighting overlay feature within the `DataChart` control using the `HighlightedValueMemberPath`: - ## Using Highlight Filter in CategoryChart The `CategoryChart` highlight filter happens on the chart by setting the `InitialHighlightFilter` property. Since the `CategoryChart` takes all of the properties on your underlying data item into account by default, you will need to define the `InitialGroups` on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the `InitialGroups` to a value path in your underlying data item to group by a path that has duplicate values. @@ -58,7 +53,6 @@ The following example demonstrates the usage of the data highlighting overlay fe - {/* TODO add new section that talks about how this feature also applies to Range, Financial series and the HighlightedValueMemberPath property corresponds to: HighlightedHighMemberPath and HighlightedLowMemberPath in Range Series HighlightedHighMemberPath, HighlightedLowMemberPath, HighlightedOpenMemberPath, HighlightedCloseMemberPath in Financial Series*/} @@ -75,7 +69,6 @@ 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: - | `CategoryChart` Properties | `DataChart` Properties | | ----------------------------------------------|---------------------------| | `CategoryChart.HighlightedItemsSource` | `Series.HighlightedItemsSource` | @@ -85,4 +78,4 @@ The following is a list of API members mentioned in the above sections: | `CategoryChart.HighlightedValuesFadeOpacity` | `Series.HighlightedValuesFadeOpacity` | | `CategoryChart.HighlightedValuesDisplayMode` | `Series.HighlightedValuesDisplayMode` | | `CategoryChart.InitialHighlightFilter` | | -| `CategoryChart.InitialGroups` | | \ No newline at end of file +| `CategoryChart.InitialGroups` | | diff --git a/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx b/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx index 2fe7ee760b..06b6060fb9 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx @@ -9,14 +9,12 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - ## Angular Chart Highlighting Example The following example demonstrates the different highlighting options that are available on the Angular chart. -
# Angular Chart Highlighting Modes & Behaviors @@ -27,12 +25,10 @@ The following example demonstrates the - The following example demonstrates the Angular chart. - # Angular Chart Legend Highlighting All Angular Charts support legend highlighting. can enabled so that when mouse is hovering over a legend marker item then the rendered series will highlight in the plot area. Legend highlighting is supported by the , , and controls and they have the same API for using the highlighting feature. @@ -41,7 +37,6 @@ The following example demonstrates the legend series highlighting Angular chart. - ## Highlight Layers The Ignite UI for Angular can enable three types of highlighting when hovering over data items. @@ -56,8 +51,6 @@ The following example demonstrates the different highlighting layers that are av - - ## Additional Resources You can find more information about related chart features in these topics: @@ -66,7 +59,6 @@ You can find more information about related chart features in these topics: - [Chart Annotations](chart-annotations.md) - [Chart Tooltips](chart-tooltips.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-markers.mdx b/docs/angular/src/content/en/components/charts/features/chart-markers.mdx index ceed02b757..8d468e6818 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-markers.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-markers.mdx @@ -10,7 +10,6 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; - # Angular Chart Markers In Ignite UI for Angular, markers are visual elements that display the values of data points in the chart's plot area. Markers help your end-users immediately identify a data point's value even if the value falls between major or minor grid lines. @@ -23,7 +22,6 @@ The colors of the markers are also managed by setting the -
## Angular Chart Marker Templates @@ -32,9 +30,6 @@ In addition to marker properties, you can implement your own marker by setting a - - -
## Additional Resources @@ -44,7 +39,6 @@ You can find more information about related chart features in these topics: - [Chart Annotations](chart-annotations.md) - [Chart Highlighting](chart-highlighting.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx b/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx index d44246f57f..ad7b5d8e1c 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx @@ -20,9 +20,6 @@ The following example shows all of the available panning and zooming options tha - - -
Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. @@ -68,7 +65,6 @@ The following example demonstrates enabling scrollbars. -
## Chart Navigation through Code @@ -92,7 +88,6 @@ You can find more information about related chart features in these topics: - [Chart Tooltips](chart-tooltips.md) - [Chart Trendlines](chart-trendlines.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx index fdec0580f2..42f57ae107 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx @@ -10,7 +10,6 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; - # Angular Chart Overlays The Angular allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the . This can help you to visualize data such as the mean or median of a particular series. @@ -21,8 +20,6 @@ The following example depicts a [Column Chart](../types/column-chart.md) with a - -
## Angular Value Overlay Properties @@ -59,7 +56,6 @@ The following sample demonstrates usage of the different -
## Angular Financial Overlays @@ -74,7 +70,6 @@ For example, you can use `DataAnnotationSliceLayer`, - ### Styling Overlay Text This code example shows how to style and customize Overlay Text on @@ -82,10 +77,6 @@ the `DataAnnotationSliceLayer`, , an
- - - - ## Additional Resources You can find more information about related chart types in these topics: @@ -95,7 +86,6 @@ You can find more information about related chart types in these topics: - [Line Chart](../types/line-chart.md) - [Stock Chart](../types/stock-chart.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx index 056c7aeaa2..27115a04d2 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx @@ -10,7 +10,6 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Chart Performance Angular charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the chart and they should be considered when optimizing performance in your application. This topic will guide you to make Angular charts work as fast as possible in your application. @@ -25,9 +24,6 @@ In High-Frequency scenario, the Angular Charts can render data items that are up - - -
## Angular Chart with High-Volume @@ -36,7 +32,6 @@ In High-Volume scenario, the Angular Charts can render 1 million of data points -
## General Performance Guidelines @@ -55,10 +50,6 @@ If you need to plot data sources with large number of data points (e.g. 10,000+) Although Angular charts support rendering of multiple data sources by binding array of arrays of data points to `ItemsSource` property. It is much faster for charts if multiple data sources are flatten into single data source where each data item contains multiple data columns rather just one data column. For example: - - - - ```ts this.CategoryChart.dataSource = FlattenDataSource.create(); this.FinancialChart.dataSource = FlattenDataSource.create(); @@ -86,23 +77,15 @@ export class MultiDataSources { } ``` - - ### Data Filtering Angular `CategoryChart` and the `FinancialChart` controls have built-in data adapter that analyzes your data and generates chart series for you. However, it works faster if you use `IncludedProperties` and `ExcludedProperties` to filter only those data columns that you actually want to render. For example, - - - - ```ts this.Chart.includedProperties = [ "Year", "USA", "RUS" ]; this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ]; ``` - - ## Chart Performance Guidelines ### Chart Types @@ -125,7 +108,6 @@ The following table lists chart types in order from the fastest performance to s | 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. ### Chart Animations @@ -150,9 +132,6 @@ In Angular charts, [Markers](chart-markers.md) are especially expensive when it This code snippet shows how to remove markers from the Angular charts. - - - ```ts // on CategoryChart or FinancialChart this.Chart.markerTypes.clear(); @@ -162,17 +141,12 @@ this.Chart.markerTypes.add(MarkerType.None); this.LineSeries.markerType = MarkerType.None; ``` - - ### Chart Resolution Setting the `Resolution` property to a higher value will improve performance, but it will lower the graphical fidelity of lines of plotted series. As such, it can be increased up until the fidelity is unacceptable. This code snippet shows how to decrease resolution in the Angular charts. - - - ```ts // on CategoryChart or FinancialChart: this.Chart.Resolution = 10; @@ -181,8 +155,6 @@ this.Chart.Resolution = 10; this.LineSeries.Resolution = 10; ``` - - ### Chart Overlays Enabling [Chart Overlays](chart-overlays.md) will slightly decrease performance of the Angular chart. @@ -201,10 +173,6 @@ The `CategoryChart` already uses ordinal/category axis so there is no need to ch This code snippet shows how to ordinal/category x-axis in the `FinancialChart` and `DataChart` controls. - - - - ```html @@ -213,12 +181,6 @@ This code snippet shows how to ordinal/category x-axis in the `FinancialChart` a ``` - - - - - - ### Axis Intervals By default, Angular charts will automatically calculate `YAxisInterval` based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing `YAxisInterval` property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels. @@ -229,10 +191,6 @@ We do not recommend setting axis minor interval as it will decrease chart perfor This code snippet shows how to set axis major interval in the Angular charts. - - - - ```html @@ -244,12 +202,6 @@ This code snippet shows how to set axis major interval in the Angular charts. ``` - - - - - - ### Axis Scale Setting the `YAxisIsLogarithmic` property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale. @@ -260,10 +212,6 @@ In the same way as Markers, axis labels are also expensive because they use temp This code snippet shows how to hide axis labels in the Angular charts. - - - - ```html @@ -277,22 +225,12 @@ This code snippet shows how to hide axis labels in the Angular charts. ``` - - - - - - ### Axis Labels Abbreviation Although, the Angular charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when `YAxisAbbreviateLargeNumbers` is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting `YAxisTitle` to a string that represents factor used used to abbreviate your data values. This code snippet shows how to set axis title in the Angular charts. - - - - ```html @@ -303,22 +241,12 @@ This code snippet shows how to set axis title in the Angular charts. ``` - - - - - - ### Axis Labels Extent At runtime, the Angular charts adjust extent of labels on y-axis based on a label with longest value. This might decrease chart performance if range of data changes and labels need to be updated often. Therefore, it is recommended to set label extent at design time in order to improve chart performance. The following code snippet shows how to set a fixed extent for labels on y-axis in the Angular charts. - - - - ```html @@ -330,12 +258,6 @@ The following code snippet shows how to set a fixed extent for labels on y-axis ``` - - - - - - ### Axis Other Visuals Enabling additional axis visuals (e.g. axis titles) or changing their default values might decrease performance in the Angular charts. @@ -352,7 +274,6 @@ For example, changing these properties on the `CategoryChart` or `FinancialChart | Axis Titles | `XAxisTitle`
`XAxisTitleAngle`
| `YAxisTitle`
`YAxisTitleAngle`
| | Axis Strips | `XAxisStrip`
| `YAxisStrip`
| - Or changing properties of an `Axis` in the `DataChart` control: | Axis Visual | Axis Properties | @@ -413,7 +334,6 @@ Also, adding a lot of series to the `Series` collection of the Angular `DataChar | 10+ of `AreaSeries` | Single `ScatterPolygonSeries` | | 10+ of `ColumnSeries` | Single `ScatterPolygonSeries` | - ## Additional Resources You can find more information about related chart types in these topics: @@ -440,7 +360,6 @@ You can find more information about related chart types in these topics: - [Chart Overlays](chart-overlays.md) - [Chart Trendlines](chart-trendlines.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx b/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx index 5d855607af..2e547d544a 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx @@ -19,7 +19,6 @@ This sample shows synchronization of two Angular data charts: -
## Chart Synchronization Properties @@ -30,7 +29,6 @@ If you want to synchronize a set of charts, you can assign them the same name to Note that in order to synchronize either vertically and/or horizontally, you will need to set the and/or property to **true**, respectively. A synchronized chart that is dependent on another chart will still zoom regardless of this property setting. - ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-titles.mdx b/docs/angular/src/content/en/components/charts/features/chart-titles.mdx index 63b5f945be..dce815c80f 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-titles.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-titles.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Chart Title and Subtitle The title and subtitle feature of the chart control allows you to add information to the top section of the Angular charts. @@ -18,7 +17,6 @@ The title and subtitle feature of the chart control allows you to add informatio -
## API References @@ -43,5 +41,3 @@ When adding a title or subtitle to the chart control, the content of the chart a | `SubtitleLeftMargin` | number | Title's left margin. | | `SubtitleRightMargin` | number | Title's right margin. | | `SubtitleBottomMargin`| number | Title's bottom margin. | - - diff --git a/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx b/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx index 4e465cd57e..755c15fa73 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Chart Tooltips In Angular charts, tooltips provide details about bound data and they are rendered in popups when the end-user hovers over data points. Tooltips are supported by the , , and controls. @@ -20,9 +19,6 @@ Angular Chart provide three types of tooltips that you can with tooltips enabled - - -
The property is configurable and can be set to one of the following options: @@ -46,17 +42,14 @@ This example shows how to create custom tooltips for all series in Angular -
- ## Custom Tooltips in Data Chart This example shows how to create custom tooltips for each series in Angular Data Chart control. -
## Additional Resources @@ -66,7 +59,6 @@ You can find more information about related chart features in these topics: - [Chart Annotations](chart-annotations.md) - [Chart Markers](chart-markers.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx b/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx index aaf9ee8304..dade008933 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Chart Trendlines In Ignite UI for Angular charts, trendlines help in identifying a trend or finding patterns in data. Trendlines are always rendered in front of data points bound to the chart and are supported by the , , and (except for stacked series, shape series, and range series). @@ -24,8 +23,6 @@ The following sample depicts a sh - -
## Angular Chart Trendlines Dash Array Example @@ -34,8 +31,6 @@ The following sample depicts a showing - -
## Angular Chart Trendline Layer @@ -71,7 +66,6 @@ You can find more information about related chart features in these topics: - [Chart Annotations](chart-annotations.md) - [Chart Highlighting](chart-highlighting.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx index fca702f12a..9c24c98b5d 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx @@ -14,7 +14,6 @@ import dataChartUserAnnotationCreate from '@xplat-images/charts/data-chart-user- import dataChartUserAnnotationDelete from '@xplat-images/charts/data-chart-user-annotation-delete.gif'; import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; - # Angular Chart User Annotation Layer In Ignite UI for Angular, you can annotate the with slice, strip, and point annotations at runtime using the user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. @@ -23,7 +22,6 @@ This is directly integrated with the available tools of the `Toolbar`. The follo - This feature is designed to support X and Y axes and does not currently support radial or angular axes. @@ -77,10 +75,8 @@ The chart exposes a `UserAnnotationToolTipContentUpdating` event that you can ha The tooltip is designed to work in tandem with the `UserAnnotationInformationRequested` event so that you can provide more detail to the user annotation via that event's `AnnotationInfo.AnnotationData` property. The `AnnotationInfo` property on the event arguments of the `UserAnnotationToolTipContentUpdating` event will be the same instance as the `AnnotationInfo` property in the `UserAnnotationInformationRequested` that you can modify in that event. This allows you to utilize the information provided to the user annotation on its creation and provide even more information within the tooltip. - ## API References -


diff --git a/docs/angular/src/content/en/components/charts/types/area-chart.mdx b/docs/angular/src/content/en/components/charts/types/area-chart.mdx index ae18f82bcb..49ddc58806 100644 --- a/docs/angular/src/content/en/components/charts/types/area-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/area-chart.mdx @@ -19,9 +19,6 @@ You can create Angular Category Area Chart in the - - -
## Area Chart Recommendations @@ -62,9 +59,6 @@ Angular Area Chart is often used to show the change of value over time such as t - - -
## Angular Area Chart with Multiple Series @@ -73,7 +67,6 @@ Similarly to how you can show multiple [Line Chart](line-chart.md) and [Spline C -
## Angular Area Chart Styling @@ -82,9 +75,6 @@ Area charts often have semi-transparent fill for their areas, thicker lines and - - -
## Advanced Types of Area Charts @@ -95,14 +85,10 @@ The following sections explain more advanced types of Angular Area Charts that c The Angular Step Area Chart belongs to a group of category charts and it is rendered using a collection of points connected by continuous vertical and horizontal lines with the area below lines filled in. Values are represented on the y-axis and categories are displayed on the x-axis. The step area chart emphasizes the amount of change over a period of time or compares multiple items. You can create this type of chart in control by binding your data and setting property to `StepArea` value, as shown in the example below. - - -
- The following sections explain more advanced types of Angular Area Charts that can be created using the control instead of control with simplified API. ## Angular Range Area Chart @@ -111,9 +97,6 @@ The Angular Range Area Chart allows you show the area as a range between two val - - -
## Angular Stacked Area Chart @@ -122,65 +105,46 @@ The Angular Stacked Area Chars is rendered using a collection of points connecte - - -
## Angular Stacked 100% Area Chart The Angular Stacked 100% Area Chart allows you represent your data as part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. You can create this type of chart in control by binding your data to , as shown in the example below. - - -
## Angular Stacked Spline Area Chart The Angular Stacked Spline Area Chart is rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Chart follows all of the same requirements as area charts, with the only difference being that the visually shaded areas are stacked on top of each other. You can create this type of chart in control by binding your data to , as shown in the example below. - - -
- ## Angular Stacked 100% Spline Area Chart The Angular Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. You can create this type of chart in control by binding your data to , as shown in the example below. - - -
## Angular Radial Area Chart The Angular Radial Area Chart belongs to a group of [Radial Chart](radial-chart.md) and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in control by binding your data to , as shown in the example below. - - -
## Angular Polar Area Chart The Angular Polar Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in control by binding your data to , as shown in the example below. - - -
## Angular Polar Spline Area Chart @@ -189,9 +153,6 @@ The Angular Polar Spline Area Chart belongs to a group of [Polar Chart](polar-ch - - -
## Additional Resources @@ -205,7 +166,6 @@ You can find more information about related chart types in these topics: - [Spline Chart](spline-chart.md) - [Stacked Chart](stacked-chart.md) - ## API References The following table lists API members mentioned in above sections: @@ -223,7 +183,6 @@ The following table lists API members mentioned in above sections: | Stacked 100% Area | `DataChart` | `Stacked100AreaSeries` | | Stacked 100% Spline Area | `DataChart` | `Stacked100SplineAreaSeries` | - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/bar-chart.mdx b/docs/angular/src/content/en/components/charts/types/bar-chart.mdx index 88db609cc0..2ffb41d05b 100644 --- a/docs/angular/src/content/en/components/charts/types/bar-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/bar-chart.mdx @@ -19,9 +19,6 @@ You can create Angular Bar Chart in the - - -
## Bar Chart Recommendations @@ -80,9 +77,6 @@ Bar Chart belongs to a group of Category Series and it is rendered using a colle - - -
## Angular Bar Chart with Multiple Series @@ -91,7 +85,6 @@ The Bar Chart is able to render multiple bars per category for comparison purpos -
## Angular Bar Chart Styling @@ -100,9 +93,6 @@ The Bar Chart can be styled, and allows for the ability to use [annotation value - - -
## Angular Stacked Bar Chart @@ -115,9 +105,6 @@ You can create this type of chart in the - - -
## Angular Stacked 100% Bar Chart @@ -128,9 +115,6 @@ You can create this type of chart in the - - -
## Additional Resources @@ -143,7 +127,6 @@ You can find more information about related chart types in these topics: - [Spline Chart](spline-chart.md) - [Stacked Chart](stacked-chart.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx b/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx index 5f2058b9f5..c04dccbe7e 100644 --- a/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx @@ -19,9 +19,6 @@ You can create Ignite UI for Angular Bubble Chart in - - -
## Angular Bubble Chart with Single Series @@ -30,7 +27,6 @@ You can bind your data to -
## Angular Bubble Chart with Multiple Series @@ -39,9 +35,6 @@ In Angular Bubble Chart, binding multiple data sources works by setting each new - - -
## Angular Bubble Chart Styling @@ -50,9 +43,6 @@ In Angular Bubble Chart, you can customize shape of bubble markers using - - -
## Additional Resources @@ -60,10 +50,8 @@ In Angular Bubble Chart, you can customize shape of bubble markers using


diff --git a/docs/angular/src/content/en/components/charts/types/column-chart.mdx b/docs/angular/src/content/en/components/charts/types/column-chart.mdx index 28833a143a..5ddcc4e9b3 100644 --- a/docs/angular/src/content/en/components/charts/types/column-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/column-chart.mdx @@ -19,9 +19,6 @@ You can create Angular Column Chart in the - - -
## Column Charts Recommendations @@ -58,9 +55,6 @@ You can create this type of chart in the - - -
## Angular Column Chart with Multiple Series @@ -69,12 +63,8 @@ The Column Chart is able to render multiple columns per category for comparison - - -
- ## Angular Column Chart Styling The Angular Column Chart has many options for styling and modification of the visual appearance. @@ -83,16 +73,12 @@ You can create this type of chart in the - - -
## Advanced Types of Column Charts The following sections explain more advanced types of Angular Column Charts that can be created using the control instead of control with simplified API. - ## Angular Waterfall Chart The Waterfall Chart belongs to a group of category charts and it is rendered using a collection of vertical columns that show the difference between consecutive data points. The columns are color coded for distinguishing between positive and negative changes in value. The Waterfall Chart is similar in appearance to the [Range Column Chart](column-chart.md#angular-range-column-chart), but it requires only one numeric data column rather than two columns for each data point. @@ -101,9 +87,6 @@ You can create this type of chart in the - - -
## Angular Stacked Column Chart @@ -114,9 +97,6 @@ You can create this type of chart in the - - -
## Angular Stacked 100% Column Chart @@ -127,9 +107,6 @@ You can create this type of chart in the - - -
## Angular Range Column Chart @@ -142,9 +119,6 @@ You can create this type of chart in the - - -
## Angular Radial Column Chart @@ -155,9 +129,6 @@ You can create this type of chart in the - - -
## Additional Resources @@ -173,7 +144,6 @@ You can find more information about related chart types in these topics: ## API References - The following table lists API members mentioned in the above sections: | Chart Type | Control Name | API Members | diff --git a/docs/angular/src/content/en/components/charts/types/composite-chart.mdx b/docs/angular/src/content/en/components/charts/types/composite-chart.mdx index f4d8e56631..bde219529a 100644 --- a/docs/angular/src/content/en/components/charts/types/composite-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/composite-chart.mdx @@ -19,9 +19,6 @@ The following example demonstrates how to create Composite Chart using `ColumnSe - - -
## Additional Resources @@ -32,7 +29,6 @@ The following example demonstrates how to create Composite Chart using `ColumnSe - [Line Chart](line-chart.md) - [Stacked Chart](stacked-chart.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx b/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx index 89de21ac7d..96109490cd 100644 --- a/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx @@ -20,7 +20,6 @@ You can create the Angular Pie Chart in the -
## Angular Data Pie Chart Recommendations @@ -68,7 +67,6 @@ Below is an example that demonstrates usage of the ItemLegend with the -
## Angular Pie Chart Others Category @@ -105,7 +103,6 @@ The following sample demonstrates usage of the Others slice in the -
## Angular Data Pie Chart Selection @@ -134,7 +131,6 @@ The following sample demonstrates the selection feature of the -
## Angular Data Pie Chart Highlighting @@ -160,7 +156,6 @@ The following example demonstrates the mouse highlighting behaviors of the - In addition to the mouse highlighting, the exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a for the control and by setting the property to `Overlay`. The expects a subset of the data assigned to the property of the . When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control. @@ -169,7 +164,6 @@ The following example demonstrates highlight filtering. -
## Angular Data Pie Chart Animation @@ -184,7 +178,6 @@ The following sample demonstrates the usage of animation in the -
## Additional Resources @@ -193,7 +186,6 @@ The following sample demonstrates the usage of animation in the
diff --git a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx b/docs/angular/src/content/en/components/charts/types/donut-chart.mdx index d55e7d527b..e4182c2d7c 100644 --- a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/donut-chart.mdx @@ -19,7 +19,6 @@ You can create Donut Chart using the -
## Angular Donut Chart Recommendations @@ -67,9 +66,6 @@ The Angular Donut Chart has the ability to select slices on click. Optionally, y - - -
## Angular Donut Chart - Multiple Rings @@ -78,9 +74,6 @@ It is possible to have a multiple ring display in the Angular Donut Chart, with - - -
## Additional Resources @@ -91,7 +84,6 @@ You can find more information about related chart types in these topics: - [Polar Chart](polar-chart.md) - [Radial Chart](radial-chart.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/line-chart.mdx b/docs/angular/src/content/en/components/charts/types/line-chart.mdx index 32d878accf..65c94b596a 100644 --- a/docs/angular/src/content/en/components/charts/types/line-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/line-chart.mdx @@ -19,9 +19,6 @@ You can create the Angular Line Chart in the - - -
## Line Chart Recommendations @@ -77,9 +74,6 @@ You can create this type of chart in the - - -
## Angular Line Chart with Multiple Series @@ -90,9 +84,6 @@ You can create this type of chart in the - - -
## Angular Line Chart with Live Data @@ -105,9 +96,6 @@ You can create this type of chart in the - - -
## Angular Styling Line Chart @@ -118,15 +106,12 @@ You can create this type of chart in the - You can also create a dashed line within the by using the and setting the property on the series. This property takes an array of numbers that will describe the length of the resulting dashes in the line. The following example demonstrates usage of the in a in : - -
## Advanced Types of Line Charts @@ -139,9 +124,6 @@ The Stacked Line Chart is often used to show the change of value over time such - - -
## Angular Stacked 100% Line Chart @@ -152,9 +134,6 @@ You can create this type of chart in the - - -
## Angular Radial Line Chart @@ -165,9 +144,6 @@ You can create this type of chart in the - - -
## Angular Polar Line Chart @@ -178,9 +154,6 @@ You can create this type of chart in the - - -
## Additional Resources diff --git a/docs/angular/src/content/en/components/charts/types/pie-chart.mdx b/docs/angular/src/content/en/components/charts/types/pie-chart.mdx index a04ba1c331..e8557fdfc1 100644 --- a/docs/angular/src/content/en/components/charts/types/pie-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/pie-chart.mdx @@ -19,9 +19,6 @@ You can create the Angular Pie Chart in the - - -
## Angular Pie Chart Recommendations @@ -75,9 +72,6 @@ Additionally you can use the - - -
## Angular Pie Chart Others Category @@ -90,9 +84,6 @@ If you set - - -
## Angular Pie Chart Explosion @@ -101,9 +92,6 @@ The pie chart supports explosion of individual pie slices as well as a `SliceCli - - -
## Angular Pie Chart Selection @@ -129,9 +117,6 @@ For scenarios where you click on the Others slice, the pie chart will return an - - -
## Angular Pie Chart Animation @@ -142,31 +127,22 @@ In the code below, the radiusFactor is increasing the chart by 0.25% of the size - - -
## Angular Pie Chart Styling Once our pie chart is created, we may want to make some further styling customizations such as a change of the colors for the slices of the chart, as demonstrated below: - - -
## Angular Radial Pie Chart The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a group of radial charts and uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line. - - -
## Additional Resources @@ -175,7 +151,6 @@ The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a g - [Polar Chart](polar-chart.md) - [Radial Chart](radial-chart.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/point-chart.mdx b/docs/angular/src/content/en/components/charts/types/point-chart.mdx index 181defc24e..e28409cbbc 100644 --- a/docs/angular/src/content/en/components/charts/types/point-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/point-chart.mdx @@ -19,9 +19,6 @@ You can create the Angular Point Chart in the - - -
## Angular Point Chart with Single Series @@ -30,9 +27,6 @@ In the following example, the Angular Point Chart plots a single data source by - - -
## Angular Point Chart with Multiple Series @@ -41,9 +35,6 @@ Since the Angular Point Chart allows you to combine multiple series and compare - - -
## Angular Point Chart Styling @@ -52,9 +43,6 @@ Once the Angular Point Chart is set up, we may want to make some further styling - - -
## Advanced Types of Point Charts @@ -73,7 +61,6 @@ You can find more information about related chart features in these topics: - [Chart Performance](../features/chart-performance.md) - [Chart Markers](../features/chart-markers.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/polar-chart.mdx b/docs/angular/src/content/en/components/charts/types/polar-chart.mdx index a656eb388f..602a0d0e14 100644 --- a/docs/angular/src/content/en/components/charts/types/polar-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/polar-chart.mdx @@ -19,9 +19,6 @@ The Polar Area Chart renders using a collection of polygons connecting data poin - - -
## Angular Polar Spline Area Chart @@ -30,9 +27,6 @@ The Polar Spline Area Chart renders also as a collection of polygons but they ha - - -
## Angular Polar Marker Chart @@ -41,9 +35,6 @@ The Polar Marker Chart renders using a collection of markers representing data p - - -
## Angular Polar Line Chart @@ -52,9 +43,6 @@ The Polar Line Chart renders using a collection of straight lines connecting dat - - -
## Angular Polar Spline Chart @@ -63,9 +51,6 @@ The Polar Spline Chart renders using a collection of curved splines connecting d - - -
## Angular Polar Chart Styling @@ -74,9 +59,6 @@ Once our polar chart is created, we may want to make some further styling custom - - -
## Additional Resources @@ -91,7 +73,6 @@ You can find more information about related chart types in these topics: - [Scatter Chart](scatter-chart.md) - [Spline Chart](spline-chart.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/radial-chart.mdx b/docs/angular/src/content/en/components/charts/types/radial-chart.mdx index 64a177e3b5..facf0bc470 100644 --- a/docs/angular/src/content/en/components/charts/types/radial-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/radial-chart.mdx @@ -19,9 +19,6 @@ The Angular Radial Area Chart has a shape of a filled polygon that is bound by a - - -
## Angular Radial Column Chart @@ -30,9 +27,6 @@ The Radial Column Chart is visualized by using a collection of rectangles that e - - -
## Angular Radial Line Chart @@ -41,9 +35,6 @@ The Angular Radial Line Chart has renders as a collection of straight lines conn - - -
## Angular Radial Pie Chart @@ -52,9 +43,6 @@ The Radial Pie Chart uses pie slices that extend from the center of chart toward - - -
## Angular Radial Chart Styling @@ -63,7 +51,6 @@ Once our radial chart is created, we may want to make some further styling custo -
## Angular Radial Chart Settings @@ -72,7 +59,6 @@ In addition, the labels can be configured to appear near or wide from the chart.
- ## Additional Resources You can find more information about related chart types in these topics: @@ -83,7 +69,6 @@ You can find more information about related chart types in these topics: - [Line Chart](line-chart.md) - [Pie Chart](pie-chart.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx b/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx index 29eff70020..acf37257dc 100644 --- a/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx @@ -19,9 +19,6 @@ Angular Scatter Marker Chart renders as a collection of markers, each having a p - - -
## Angular Scatter Line Chart @@ -30,9 +27,6 @@ Angular Scatter Line Chart renders as a collection of markers connected by a str - - -
## Angular Scatter Spline Chart @@ -41,9 +35,6 @@ Angular Scatter Spline Chart renders as a collection of markers connected by a c - - -
## Angular Scatter High Density Chart @@ -52,9 +43,6 @@ Use the Angular Scatter High Density (HD) Chart to bind and show scatter data ra - - -
## Angular Scatter Area Chart @@ -63,9 +51,6 @@ Angular Scatter Area Chart draws a colored surface based on a triangulation of X - - -
## Angular Scatter Contour Chart @@ -74,9 +59,6 @@ Angular Scatter Contour Chart draws colored contour lines based on a triangulati - - -
## Additional Resources @@ -104,7 +86,6 @@ The following table lists API members mentioned in the above sections: ## API References -


diff --git a/docs/angular/src/content/en/components/charts/types/shape-chart.mdx b/docs/angular/src/content/en/components/charts/types/shape-chart.mdx index fd1c45a1b2..0b83a5c913 100644 --- a/docs/angular/src/content/en/components/charts/types/shape-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/shape-chart.mdx @@ -21,9 +21,6 @@ You can create this type of chart in the - - -
## Angular Scatter Polyline Chart @@ -34,9 +31,6 @@ You can create this type of chart in the - - -
## Additional Resources @@ -47,7 +41,6 @@ You can find more information about related chart types in these topics: - [Line Chart](line-chart.md) - [Scatter Chart](scatter-chart.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx b/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx index 8061b6546f..9d8aac39c5 100644 --- a/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Sparkline The Ignite UI for Angular Sparkline is a lightweight charting control. It is intended for rendering within a small-scale layout such as within a grid cell but can also be rendered alone. The has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips. @@ -20,9 +19,6 @@ The following example shows all the different types of - - -
Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. @@ -68,9 +64,6 @@ The Angular Sparkline supports the following types of sparklines by setting the - - -
## Markers @@ -90,8 +83,6 @@ All of the markers mentioned above can be customized using the related marker ty - -
## Normal Range @@ -110,8 +101,6 @@ You can also configure whether to show the normal range in front of or behind th - -
## Trendlines @@ -126,8 +115,6 @@ The sample below shows all the available trendlines via the dropdown: - -
## Unknown Value Interpolation @@ -138,19 +125,14 @@ To plot the unknown values, you can set the - -
- ## Sparkline in Data Grid You can embed the Angular Sparkline in a template column of data grid or other UI controls that support templates. The following code example shows how to do this: - - ## Additional Resources You can find more information about related chart types in these topics: @@ -159,7 +141,6 @@ You can find more information about related chart types in these topics: - [Column Chart](column-chart.md) - [Line Chart](line-chart.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/spline-chart.mdx b/docs/angular/src/content/en/components/charts/types/spline-chart.mdx index cda6451b25..ac5bc72aa9 100644 --- a/docs/angular/src/content/en/components/charts/types/spline-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/spline-chart.mdx @@ -18,9 +18,6 @@ The following example shows how to create Angular Spline Chart in the - - -
## Angular Spline Chart with Single Series @@ -31,9 +28,6 @@ You can create this type of chart in the - - -
## Angular Spline Chart with Multiple Series @@ -44,9 +38,6 @@ You can create this type of chart in the - - -
## Angular Spline Chart Styling @@ -57,9 +48,6 @@ You can create this type of chart in the - - -
## Advanced Types of Spline Charts @@ -74,9 +62,6 @@ You can create this type of chart in the - - -
## Angular Stacked 100% Spline Chart @@ -87,9 +72,6 @@ You can create this type of chart in the - - -
## Additional Resources diff --git a/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx b/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx index a4a90d8e40..f46c2520cf 100644 --- a/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx @@ -19,9 +19,6 @@ The following example, you can use the drop-down to switch between all of the di - - -
The following sections demonstrate individual types of Ignite UI for Angular Stacked Charts. @@ -34,12 +31,8 @@ You can create this type of chart in the `DataChart` control by binding your dat - - -
- ## Angular Stacked 100 Area Chart Sometimes the series represent part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. @@ -47,12 +40,8 @@ You can create this type of chart in the `DataChart` control by binding your dat - - -
- ## Angular Stacked Bar Chart A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is used to compare the composition of different categories of data by displaying different sized fragments in the horizontal bars of the chart. The length of each bar, or stack of fragments, is proportionate to its overall value. @@ -63,12 +52,8 @@ In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels - - -
- ## Angular Stacked 100% Bar Chart The Angular Stacked 100% Bar Chart is identical to the Angular stacked bar chart in all aspects except in their treatment of the values on X-Axis (bottom labels of the chart). Instead of presenting a direct representation of the data, the stacked 100% bar chart presents the data in terms of percent of the sum of all values in a data point. @@ -77,12 +62,8 @@ In this example of a Stacked 100% Bar Chart, the Energy Product values are shown - - -
- ## Angular Stacked Column Chart The Stacked Column Chart is identical to the [Column Chart](column-chart.md) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the Stacked Bar Chart but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis). @@ -91,12 +72,8 @@ You can create this type of chart in the `DataChart` control by binding your dat - - -
- ## Angular Stacked 100% Column Chart The Stacked 100% Column Chart is identical to the Stacked Column Chart in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100% Column Chart presents the data in terms of percent of the sum of all values in a data point. @@ -105,24 +82,16 @@ The example below shows a study made for online shopping traffic by departments - - -
- ## Angular Stacked Line Chart The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the `DataChart` control by binding your data to a `StackedLineSeries`, as shown in the example below: - - -
- ## Angular Stacked 100% Line Chart The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. @@ -131,12 +100,8 @@ You can create this type of chart in the `DataChart` control by binding your dat - - -
- ## Angular Stacked Spline Area Chart Stacked Spline Area Charts are rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Charts follow all of the same requirements as [Area Chart](area-chart.md), with the only difference being that the visually shaded areas are stacked on top of each other. @@ -145,12 +110,8 @@ You can create this type of chart in the `DataChart` control by binding your dat - - -
- ## Angular Stacked 100% Spline Area Chart The Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. @@ -159,24 +120,16 @@ You can create this type of chart in the `DataChart` control by binding your dat - - -
- ## Angular Stacked Spline Chart The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the `DataChart` control by binding your data to a `StackedSplineSeries`, as shown in the example below. - - -
- ## Angular Stacked 100% Spline Chart The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. @@ -185,12 +138,8 @@ You can create this type of chart in the `DataChart` control by binding your dat - - -
- ## Additional Resources You can find more information about related chart types in these topics: diff --git a/docs/angular/src/content/en/components/charts/types/step-chart.mdx b/docs/angular/src/content/en/components/charts/types/step-chart.mdx index 7008d9df21..5945e5d51c 100644 --- a/docs/angular/src/content/en/components/charts/types/step-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/step-chart.mdx @@ -19,9 +19,6 @@ You can create Angular Step Area Chart in the - - -
## Angular Step Line Chart @@ -32,9 +29,6 @@ You can create Step Line Chart in the - - -
## Angular Step Chart Styling @@ -43,9 +37,6 @@ If you need Step Charts with more features such as composite other series, you c - - -
## Additional Resources @@ -56,7 +47,6 @@ You can find more information about related chart types in these topics: - [Line Chart](line-chart.md) - [Chart Markers](../features/chart-markers.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/stock-chart.mdx b/docs/angular/src/content/en/components/charts/types/stock-chart.mdx index ca52b73b8c..7a1ab96eed 100644 --- a/docs/angular/src/content/en/components/charts/types/stock-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/stock-chart.mdx @@ -19,9 +19,6 @@ You can create Stock Chart using the - - -
## Stock Chart Recommendations @@ -67,9 +64,6 @@ As a Stock Chart is meant to allow the user to perform data analysis functions, - - -
## Angular Stock Chart @@ -78,20 +72,14 @@ In this example the Stock Chart is representing the S&P 500 over the course of a - - -
## Angular Stock Chart Styling If you need a Stock Chart with more features such as composite other series, you can configure the thickness, outlines, brushes, negative outlines, negative brushes as demonstrated below. In this example, the stock chart is comparing revenue between Amazon, Microsoft and Tesla. - - -
## Angular Chart Annotations @@ -106,9 +94,6 @@ Note: When using the ordinal X axis mode, the CalloutsXMemberPath should point t - - -
## Angular Chart Panes @@ -143,9 +128,6 @@ In this example, the stock chart is plotting revenue for United States. - - -
## Additional Resources @@ -158,7 +140,6 @@ You can find more information about related chart features in these topics: - [Chart Trendlines](../features/chart-trendlines.md) - [Chart Performance](../features/chart-performance.md) - ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx b/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx index ebadc66ceb..0c16d7b26c 100644 --- a/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx @@ -19,9 +19,6 @@ In the following example, the demonstrat - - -
## Treemap Recommendations @@ -67,9 +64,6 @@ In the following example, the treemap demonstrates the ability of changing it's - - -
### Layout Types @@ -100,14 +94,12 @@ In the following example, the treemap demonstrates the ability of changing the l - ### Angular Treemap Highlighting In the following example, the treemap demonstrates the ability of node highlighting. There are two options for this feature. Each node can individually brighten, by decreasing its opacity, or cause all other nodes to trigger the same effect. To enable this feature, set `HighlightingMode`to Brighten or FadeOthers. - ## Angular Treemap Percent based highlighting - `HighlightedItemsSource`: Specifies the datasource to read highlighted values from. If null, then highlighted values are read from the ItemsSource property. @@ -120,7 +112,6 @@ In the following example, the treemap demonstrates the ability of node highlight -
## Additional Resources @@ -130,7 +121,6 @@ You can find more information about related chart types in these topics: - [Area Chart](area-chart.md) - [Shape Chart](shape-chart.md) - ## API References
diff --git a/docs/angular/src/content/en/components/dashboard-tile.mdx b/docs/angular/src/content/en/components/dashboard-tile.mdx index 81c720e89d..34408cbca5 100644 --- a/docs/angular/src/content/en/components/dashboard-tile.mdx +++ b/docs/angular/src/content/en/components/dashboard-tile.mdx @@ -12,7 +12,6 @@ import { Image } from 'astro:assets'; import dashboardTileToolbar from '@xplat-images/dashboard-tile-toolbar.png'; import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; - # Angular Dashboard Tile The Angular Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded that let you alter the visualization that is presented in a variety of ways. @@ -25,10 +24,8 @@ Interacting with the chart type menu in the toolbar will allow for selecting a d - ## Dependencies - Install the following packages in the Ignite UI for Angular toolset: ```cmd @@ -44,8 +41,6 @@ npm install igniteui-angular-maps The following modules are suggested when using the Dashboard Tile component: - - ```ts import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGaugeDashboardTileModule, IgxLinearGaugeDashboardTileModule, IgxGeographicMapDashboardTileModule, @@ -64,18 +59,6 @@ import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGauge export class AppModule {} ``` - - - - - - - - - - - - ## Usage Depending on what you bind the Dashboard Tile's `DataSource` property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the Ignite UI for Angular toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following: @@ -95,7 +78,6 @@ You are not locked into a single visualization when you bind the `DataSource`, a - The visualization or properties of the visualization are also configurable using the at the top of the control. This has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below: Dashboard Tile Toolbar @@ -111,16 +93,12 @@ This demo demonstrates dashboard tile integration with the Angular Pie Chart. Th - This demo demonstrates dashboard tile integration with the Angular Geographic Map. The toolbar options at the top right provides access to styling and changing the data visualization. - ## API References - -


diff --git a/docs/angular/src/content/en/components/excel-library-using-cells.mdx b/docs/angular/src/content/en/components/excel-library-using-cells.mdx index b6a4380e2a..ed58cd14e7 100644 --- a/docs/angular/src/content/en/components/excel-library-using-cells.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-cells.mdx @@ -14,18 +14,10 @@ The objects in an ## Angular Using Cells Example - - - -
- - - - ## References The following code shows the imports needed to use the code-snippets below: @@ -40,9 +32,6 @@ import { WorksheetCellComment } from "igniteui-angular-excel"; import { FormattedString } from "igniteui-angular-excel"; ``` - - - ## Referencing Cells and Regions You can access a object or a object by calling the object’s `GetCell` or `GetRegion` methods, respectively. Both methods accept a string parameter that references a cell. Getting a reference to a cell is useful when applying formats or working with formulas and cell contents. @@ -59,8 +48,6 @@ var cell = worksheet.getCell("E2"); var region = worksheet.getRegion("G1:G10"); ``` - - ## Accessing Cells and Regions by Name In Microsoft Excel, individual cells, as well as cell regions can have names assigned to them. The name of a cell or region can be used to reference that cell or region instead of their address. @@ -77,8 +64,6 @@ var cell_reference = workbook.namedReferences().add("myCell", "=Sheet1:A1"); var region_reference = workbook.namedReferences().add("myRegion", "=Sheet1!A1:B2"); ``` - - The following code can be used to the get the cell and region referenced by the "myCell" and "myRegion" named references above: ```ts @@ -86,8 +71,6 @@ var cell = worksheet.getCell("myCell"); var region = worksheet.getRegion("myRegion"); ``` - - ## Adding a Comment to a Cell A comment allows you to display hints or notes for a cell when the end user’s mouse hovers over a cell. The comments display as a tooltip-like callout that contains text. The Infragistics Angular Excel Library allows you to add comments to a cell by setting a object’s property. @@ -105,8 +88,6 @@ cellComment.text = commentText; worksheet.rows(0).cells(0).comment = cellComment; ``` - - ## Adding a Formula to a Cell The Infragistics Angular Excel Library allows you to add Microsoft Excel formulas to a cell or group of cells in a worksheet. You can do this using the object’s `ApplyFormula` method or by instantiating a object and applying it to a cell. Regardless of the manner in which you apply a formula to a cell, you can access the object using the object’s property. If you need the value, use the cell’s `Value` property. @@ -123,8 +104,6 @@ The following code shows you how to add a formula to a cell. sumFormula.applyTo(worksheet.rows(5).cells(0)); ``` - - ## Copying a Cell’s Format Cells can have different formatting, including background color, format string, and font style. If you need a cell to have the same format as a previously formatted cell, instead of individually setting each option exposed by the object’s property, you can call the object’s `SetFormatting` method and pass it a object to copy. This will copy every format setting from the first cell to the second cell. You can also do this for a row, merged cell region, or column. @@ -142,8 +121,6 @@ worksheet.columns(1).cellFormat.font.bold = true; worksheet.columns(3).cellFormat.setFormatting(worksheet.columns(1).cellFormat); ``` - - ## Formatting a Cell The Infragistics Angular Excel Library allows you to customize the look and behavior of a cell. You can customize a cell by setting properties exposed by the property of the , , , or `WorksheetMergedCellsRegion` objects. @@ -161,8 +138,6 @@ var workbook = workbook.worksheets().add("Sheet1"); worksheet.columns(2).cellFormat.formatString = "\"$\"#,##0.00"; ``` - - ## Excel 2007 Color Model The color palette is analogous to the color dialog in Microsoft Excel 2007 UI. You can open this color dialog by navigating to Excel Options => Save => Colors. @@ -197,8 +172,6 @@ var cellFill = CellFill.createSolidFill("Blue"); worksheet.rows(0).cells(0).cellFormat.fill = cellFill; ``` - - You can specify a color (the color of Excel cells background, border, etc) using linear and rectangular gradients in cells. When workbooks with these gradients are saved in .xls file format and opened in Microsoft Excel 2007/2010, the gradients will be visible, but when these files are opened in Microsoft Excel 2003, the cell will be filled with the solid color from the first gradient stop. These are the ways a color can be defined, as follows: @@ -303,8 +276,6 @@ mergedRegion1.value = "Day 1"; worksheet.rows(0).cells(2).cellFormat.alignment = HorizontalCellAlignment.Center; ``` - - ## Retrieving the Cell Text as Displayed in Excel The text displayed in a cell depends on several factors other than the actual cell value, such as the format string and the width of the column that the cell is contained in. @@ -358,9 +329,6 @@ var worksheet = this.workbook.worksheets().add("Sheet1"); var cellText = worksheet.rows(0).cells(0).getText(); ``` - - - ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-using-tables.mdx b/docs/angular/src/content/en/components/excel-library-using-tables.mdx index a4090c61c3..e9475b53eb 100644 --- a/docs/angular/src/content/en/components/excel-library-using-tables.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-tables.mdx @@ -13,14 +13,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The Infragistics Angular Excel Engine's functionality allows you to format your data in rows and columns The data in a worksheet table can be managed independently from the data in the other rows and columns in a . {/*## Angular Using Tables Example - - - */} -
## Adding a Table to a Worksheet @@ -35,8 +31,6 @@ var worksheet = this.workbook.worksheets().add("Sheet1"); worksheet.tables().add("A1:G10", true); ``` - - Once you have added a table, you can modify it by adding or deleting rows and columns by calling the `InsertColumns`, `InsertDataRows`, `DeleteColumns`, or `DeleteDataRows` methods on the . You can also set a new table range by using the `Resize` method of the table. The following code snippet shows the usage of these methods: @@ -62,8 +56,6 @@ table.deleteDataRows(0, 5); table.resize("A1:G15"); ``` - - ## Filtering Tables Filtering is done by applying a filter on a column in the . When the filter is applied on a column, all filters in the table will be reevaluated to determine which rows meet the criteria of all filters applied. @@ -91,8 +83,6 @@ var table = worksheet.tables().add("A1:G10", true); table.columns(0).applyAverageFilter(AverageFilterType.AboveAverage); ``` - - ## Sorting Tables Sorting is done by setting a sorting condition on a table column. When a sorting condition is set on a column, all sorting conditions in the table will be reevaluated to determine the order of the cells in the table. When cells need to be moved to meet their sort criteria, the entire row of cells in the table is moved as a unit. @@ -122,9 +112,6 @@ table.columns(0).sortCondition = new OrderedSortCondition(SortDirection.Ascendin table.sortSettings.sortConditions().addItem(table.columns(0), new OrderedSortCondition(SortDirection.Ascending)); ``` - - - ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx b/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx index 8b8b10d39d..3dcadb987f 100644 --- a/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx @@ -14,12 +14,8 @@ The Infragistics Angular Excel Engine enables you to save data to and load data ## Angular Using Workbooks Example - - - -
## Change Default Font @@ -34,8 +30,6 @@ font.name = "Times New Roman"; font.height = 16 * 20; ``` - - ## Setting Workbook Properties Microsoft Excel® document properties provide information to help organize and keep track of your documents. You can use the Infragistics Angular Excel Library to set these properties using the object’s property. The available properties are: @@ -66,8 +60,6 @@ workbook.documentProperties.title = "Expense Report"; workbook.documentProperties.status = "Complete"; ``` - - ## Workbook Protection The workbook protection feature allows you to protect the structure of the workbook. That is, the ability for a user to add, rename, delete, hide, and reorder the worksheets in that workbook. @@ -87,8 +79,6 @@ var workbook = new Workbook(); workbook.protect(false, false); ``` - - Check if a workbook has protection. This read-only property returns true if the workbook has any protection set using the overloads of the Protect method. ```ts @@ -96,8 +86,6 @@ var workbook = new Workbook(); var protect = workbook.isProtected; ``` - - This read-only property returns an object of type WorkbookProtection which contains properties for obtaining each protection setting individually. ```ts @@ -105,9 +93,6 @@ var workbook = new Workbook(); var protection = workbook.protection; ``` - - - ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx index f7e8a39e52..22c7e73add 100644 --- a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx @@ -14,19 +14,10 @@ The Infragistics Angular Excel Engine's - - -
- - - - - The following code shows the imports needed to use the code-snippets below: ```ts @@ -44,9 +35,6 @@ import { SortDirection } from "igniteui-angular-excel"; import { WorkbookColorInfo } from "igniteui-angular-excel"; ``` - - - ## Configuring the Gridlines The gridlines are used to visually separate the cells in the worksheet. You may show or hide the gridlines and also change their color. @@ -59,8 +47,6 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.displayOptions.showGridlines = false; ``` - - You can configure the gridlines' color using the property of the of the worksheet. The following code demonstrates how you can change the gridlines in your worksheet to be red: ```ts @@ -70,8 +56,6 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.displayOptions.gridlineColor = "Red"; ``` - - ## Configuring the Headers The column and row headers are used to visually identify columns and rows. They are also used to visually highlight the currently selected cell or cell region. @@ -84,8 +68,6 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.displayOptions.showRowAndColumnHeaders = false; ``` - - ## Configuring Editing of the Worksheet By default, the objects that you save will be editable. You can disable editing of a worksheet by protecting it using the object's `Protect` method. This method has a lot of nullable `bool` arguments that determine which pieces are protected, and one of these options is to allow editing of objects, which if set to **false** will prevent editing of the worksheet. @@ -98,8 +80,6 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.protect(); ``` - - You can also use the object's `Protect` method to protect a worksheet against structural changes. When protection is set, you can set the object's `Locked` property on individual cells, rows, merged cell regions, or columns to override the worksheet object's protection on those objects. For example, if you need all cells of a worksheet to be read-only except for the cells of one column, you can protect the worksheet and then set the object's `Locked` property to **false** on a specific object. This will allow your users to edit cells within the column while disabling editing of the other cells in the worksheet. @@ -114,8 +94,6 @@ worksheet.protect(); worksheet.columns(0).cellFormat.locked = false; ``` - - ## Filtering Worksheet Regions Filtering is done by setting a filter condition on a worksheet's which can be retrieved from the object's property. Filter conditions are only reapplied when they're added, removed, modified, or when the `ReapplyFilters` method is called on the worksheet. They are not constantly evaluated as data within the region changes. @@ -146,8 +124,6 @@ worksheet.filterSettings.setRegion("Sheet1!A1:A10"); worksheet.filterSettings.applyAverageFilter(0, AverageFilterType.AboveAverage); ``` - - ## Freezing and Splitting Panes You can freeze rows at the top of your worksheet or columns at the left using the freezing panes features. Frozen rows and columns remain visible at all times while the user is scrolling. The frozen rows and columns are separated from the rest of the worksheet by a single, solid line, which cannot be removed. @@ -170,8 +146,6 @@ worksheet.displayOptions.frozenPaneSettings.firstColumnInRightPane = 2; worksheet.displayOptions.frozenPaneSettings.firstRowInBottomPane = 6; ``` - - ## Setting the Worksheet Zoom Level You can change the zoom level for each worksheet independently using the property on the object's . This property takes a value between 10 and 400 and represents the percentage of zoom that you wish to apply. @@ -184,8 +158,6 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.displayOptions.magnificationInNormalView = 300; ``` - - ## Worksheet Level Sorting Sorting is done by setting a sorting condition on a worksheet level object on either columns or rows. You can sort columns or rows in ascending or descending order. @@ -203,8 +175,6 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.sortSettings.sortConditions().addItem(new RelativeIndex(0), new OrderedSortCondition(SortDirection.Ascending)); ``` - - ## Worksheet Protection You can protect a worksheet by calling the `Protect` method on the object. This method exposes many nullable `bool` parameters that allow you to restrict or allow the following user operations: @@ -230,8 +200,6 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.protect(); ``` - - ## Worksheet Conditional Formatting You can configure the conditional formatting of a object by using the many "Add" methods exposed on the `ConditionalFormats` collection of that worksheet. The first parameter of these "Add" methods is the `string` region of the worksheet that you would like to apply the conditional format to. @@ -255,9 +223,6 @@ var format = worksheet.conditionalFormats().addAverageCondition("A1:A10", Format format.cellFormat.font.colorInfo = new WorkbookColorInfo(color); ``` - - - ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx b/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx index fa5d9e2aeb..e9410a4dce 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx @@ -15,10 +15,8 @@ The Infragistics Angular Excel Engine's - The XLSX format is required. Other formats are not supported at this time. @@ -42,9 +40,6 @@ var chart = ws.shapes().addChart(ChartType.ColumnClustered, chart.setSourceData("A2:M6", true); ``` - - - ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx b/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx index 908a1576bd..8c17172c12 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx @@ -14,10 +14,8 @@ TODO ## Angular Working with Grids Example - -
## Usage @@ -28,7 +26,6 @@ The following code demonstrates how to use ... TODO TODO ``` - ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx b/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx index 868143eead..c4a9debc56 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx @@ -14,12 +14,8 @@ The Infragistics Angular Excel Library has support for adding sparklines to an E ## Angular Working with Sparklines Example - - - -
## Supported Sparklines @@ -40,9 +36,6 @@ sheet1.sparklineGroups().add(SparklineType.Column, "Sparklines!B1:B1", "Data!A2: workbook.save(workbook, "Sparklines.xlsx"); ``` - - - ## API References
diff --git a/docs/angular/src/content/en/components/excel-library.mdx b/docs/angular/src/content/en/components/excel-library.mdx index eaf6bac051..399e7a73d4 100644 --- a/docs/angular/src/content/en/components/excel-library.mdx +++ b/docs/angular/src/content/en/components/excel-library.mdx @@ -15,18 +15,10 @@ The Infragistics Angular Excel Library allows you to work with spreadsheet data ## Angular Excel Library Example - - - -
- - - - ## Dependencies When installing the excel package, the core package must also be installed. @@ -80,14 +72,6 @@ The Excel Library contains 5 modules that you can use to limit bundle size of yo - **IgxExcelXlsxModule** – This contains the load and save logic for xlsx (and related) type files – namely the Excel2007 related and StrictOpenXml WorkbookFormats. - **IgxExcelModule** – This references the other 4 modules and so basically ensures that all the functionality is loaded/available. - - - - - - - - ## Supported Versions of Microsoft Excel The following is a list of the supported versions of Excel.** @@ -114,17 +98,8 @@ The Excel Library does not support the Excel Binary Workbook (.xlsb) format at t ## Load and Save Workbooks Now that the Excel Library module is imported, next step is to load a workbook. - - - - - In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a . - - - - In order to load and save objects, you can utilize the save method of the actual object, as well as its static `Load` method. ```ts @@ -137,10 +112,6 @@ var workbook = ExcelUtility.load(file); ExcelUtility.save(workbook, "fileName"); ``` - - - - ## Managing Heap Due to the size of the Excel Library, it's recommended to disable the source map generation. @@ -173,8 +144,6 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect => } ``` - - ## API References
diff --git a/docs/angular/src/content/en/components/excel-utility.mdx b/docs/angular/src/content/en/components/excel-utility.mdx index 9ed7c6fada..81a534c1ea 100644 --- a/docs/angular/src/content/en/components/excel-utility.mdx +++ b/docs/angular/src/content/en/components/excel-utility.mdx @@ -11,7 +11,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; This topic provides utility function for loading and saving Microsoft Excel files using [Excel Library](excel-library.md) - ```ts import { saveAs } from "file-saver"; // npm package: "file-saver": "^1.3.8" import { Workbook } from 'igniteui-angular-excel'; @@ -113,18 +112,6 @@ export class ExcelUtility { } ``` - - - - - - - - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/general-changelog-dv.mdx b/docs/angular/src/content/en/components/general-changelog-dv.mdx index 9e15069d08..0554527aa4 100644 --- a/docs/angular/src/content/en/components/general-changelog-dv.mdx +++ b/docs/angular/src/content/en/components/general-changelog-dv.mdx @@ -172,7 +172,6 @@ There is a new property called `UseInsetOutlines` to control how outlines on the |38231 | `IgxGrid` | 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 @@ -273,7 +272,6 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools |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)** - Angular 19 support. @@ -408,7 +406,6 @@ Added significant improvements to default behaviors, and refined the Category Ch - GroupSorts - GroupSortDescriptions - The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using `IncludedProperties` | `ExcludedProperties` because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. ## **13.2.0 (June 2022)** @@ -562,8 +559,6 @@ Now, you need to use just package names instead of full paths to API classes and Please also note that the name of the Data Grid component and its corresponding modules have also changed. - - ```ts // gauges: import { IgxLinearGauge } from "igniteui-angular-gauges"; @@ -583,14 +578,10 @@ import { IgxGeographicMapComponent } from "igniteui-angular-maps"; import { IgxGeographicMapModule } from "igniteui-angular-maps"; ``` - - - Code Before Changes Before, you had to import using full paths to API classes and enums: - - ```ts // gauges: import { IgxLinearGaugeComponent } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-component'; @@ -612,5 +603,3 @@ import { IgxDataChartCoreModule } from "igniteui-angular-charts/ES5/igx-data-cha import { IgxGeographicMapComponent } from "igniteui-angular-maps/ES5/igx-geographic-map-component"; import { IgxGeographicMapModule } from "igniteui-angular-maps/ES5/igx-geographic-map-module"; ``` - - diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx index c1b9e98e25..6dd3577dd9 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx @@ -15,15 +15,10 @@ With the Ignite UI for Angular map component, you can plot geographic data loade ## Angular Binding CSV Files with Geographic Locations Example - - - -
- ## Data Example Here is an example of data from CSV file: @@ -33,14 +28,9 @@ New York,40.7856,-74.0093,New Jersey,NJ,Hudson,21057,54227 Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650 ``` - - ## Code Snippet The following code loads and binds in the map component to an array of objects created from loaded CSV file with geographic locations. - - - ```html

diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx index 5ce4618ac6..78ff8ef243 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx @@ -15,15 +15,10 @@ With the Ignite UI for Angular map, you can plot geographic data loaded from var ## Angular Binding JSON Files with Geographic Locations Example - - - -
- ## Data Example Here is an example of data from JSON file: @@ -39,8 +34,6 @@ Here is an example of data from JSON file: ## Code Snippet The following code loads and binds in the map component to an array of objects created from loaded JSON file with geographic locations: - - ```html

diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx index 18be1b6724..daa39a9eb7 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx @@ -15,12 +15,8 @@ The Ignite UI for Angular map component is designed to display geo-spatial data ## Angular Binding Geographic Data Models Example - - - -
The following table summarized data structures required for each type of geographic series: @@ -38,8 +34,6 @@ The following table summarized data structures required for each type of geograp ## Code Snippet The following code shows how to bind the to a custom data model that contains geographic locations of some cities of the world stored using longitude and latitude coordinates. Also, we use the to plot shortest geographic path between these locations using the [WorldUtility](geo-map-resources-world-util.md) - - ```html

diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx index 90f1831a66..1c80eeaa37 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx @@ -21,8 +21,6 @@ The following section list some of data source that you can bind in the geograph - [Binding Data Models](geo-map-binding-data-model.md) - [Binding Multiple Sources](geo-map-binding-multiple-sources.md) - ## API References -
diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx index f101c4c8a4..e6c6a74cdb 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Binding Multiple Data Shapes | Infragistics" description: Use Infragistics' Angular to add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. View Ignite UI for Angular map tutorials! keywords: "Angular map, shape files, Ignite UI for Angular, Infragistics, data binding" @@ -15,12 +15,8 @@ In the Ignite UI for Angular map, you can add multiple geographic series objects ## Angular Binding and Overlaying Multiple Shape Files Example - - - -
This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about object. @@ -35,12 +31,6 @@ You can use geographic series in above or other combinations to plot desired dat First, let's import required components and modules: - - - - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; @@ -49,16 +39,10 @@ import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps'; import { IgxShapeDataSource } from 'igniteui-angular-core'; ``` - - - - ## Creating Series Next, we need to create a map with a few Geographic Series that will later load different type of shapefile. - - ```html
@@ -114,22 +98,10 @@ Next, we need to create a map with a few Geographic Series that will later load ``` - - - - - - - - ## Loading Shapefiles Next, in constructor of your page, add a for each shapefile that you want to display in the geographic map component. - - - - ```ts const sdsPolygons = new IgxShapeDataSource(); sdsPolygons.importCompleted = this.onPolygonsLoaded; @@ -148,18 +120,6 @@ sdsLocations.databaseSource = url + "/Shapes/WorldCities.dbf"; sdsLocations.dataBind(); ``` - - - - - - - - - - - - ## Processing Polygons Process shapes data loaded in with of countries of the world and assign it to object. @@ -412,18 +372,10 @@ public onPointsLoaded(sds: IgcShapeDataSource, e: any) { } ``` - - - - ## Map Background Also, you might want to hide geographic imagery from the map background content if your shape files provided sufficient geographic context (e.g. shape of countries) for your application. - - - - ```ts public geoMap: IgxGeographicMapComponent; // ... @@ -431,18 +383,10 @@ public geoMap: IgxGeographicMapComponent; this.geoMap.backgroundContent = {}; ``` - - - - - - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -571,15 +515,6 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit { } ``` - - - - - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx index 67df1ae1eb..238edd21aa 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx @@ -12,15 +12,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data. For example, for plotting geographic locations of airports, the for plotting flights between airports, and 2nd for plotting gridlines of major geographic coordinates. - ## Angular Binding Multiple Data Sources Example - - - -
This topic takes you step-by-step towards displaying multiple geographic series that will plot following geo-spatial data: @@ -35,9 +30,6 @@ You can use geographic series in this or other combinations to plot desired data Create data sources for all geographic series that you want to display in the Ignite UI for Angular map. For example, you can the use [WorldConnections](geo-map-resources-world-connections.md) script. - - - ```html
``` - - - - - - ## Overlaying Flights Create first object with flight connections between major airports and add it to the Series collection of the Ignite UI for Angular map. - - ```html object with ``` - - - - - - ## Overlaying Gridlines Create second object with geographic gridlines and add it to the Series collection of the Ignite UI for Angular map. - - ```html object with ``` - - - - - - ## Overlaying Airports Create object with airport points and add it to the Series collection of the geographic Ignite UI for Angular map. - - ```html object with airport ``` - - - - - - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { MarkerType } from 'igniteui-angular-charts'; @@ -239,11 +199,6 @@ export class MapBindingMultipleSourcesComponent implements AfterViewInit { } ``` - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx index 6dd254b1f3..854d20e12a 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Binding Geographic Shape Files | Infragistics" description: Use Infragistics' Angular JavaScript map to load geo-spatial data from shape files. View Ignite UI for Angular map demos! keywords: "Angular map, shapefiles, Ignite UI for Angular, Infragistics, data binding" @@ -12,20 +12,14 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The Ignite UI for Angular map component, the class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of `IgxShapefileRecord` objects. - ## Angular Binding Shape Files with Geo-spatial Data Example - - - -
The following table explains properties of the class for loading shape files. - | Property | Type | Description | |----------|------|---------------| | `ShapefileSource` | string |Specifies the Uri to a shape file (.shp) that contains geo-spatial data items.| @@ -39,10 +33,6 @@ When both source properties are set to non-null values, then the object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the `ImportCompleted` event as a prerequisite for binding data to the map component. - - - - ## Binding Shapefiles In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an `ItemsSource` property which can be bound to an array of objects. The is an example such array because it contains a list of `IgxShapefileRecord` objects. @@ -59,8 +49,6 @@ This data structure is suitable for use in most Geographic Series as long as app This code example assumes that shape files were loaded using the . The following code binds in the map component to the and maps the `Points` property of all `IgxShapefileRecord` objects. - - ```html
``` - - - - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -148,15 +130,6 @@ export class MapBindingShapefilePolylinesComponent implements AfterViewInit { } ``` - - - - - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx index 76fa602ea2..715ccfb184 100644 --- a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx @@ -19,20 +19,15 @@ The Angular is geo ## Angular Displaying Imagery from Azure Maps - Overview - AzureMapsImagery -
- ## Angular Displaying Imagery from Azure Maps - Code Example The following code snippet shows how to display geographic imagery tiles from Azure Maps in Angular using class. - - ```html ``` - - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxAzureMapsImagery } from 'igniteui-angular-maps'; @@ -58,14 +49,6 @@ tileSource.imageryStyle = AzureMapsImageryStyle.Road; //or Traffic & Weather etc this.map.backgroundContent = tileSource; ``` - - - - - - - - ## Angular Overlaying Imagery from Azure Maps - Overview When working with the , you can combine **overlays** (traffic, weather, labels) on top of a **base map style** such as eg. **Satellite**, **Road**, or **DarkGrey**. Using **TerraOverlay** with eg. **Satellite** to visualize terrain. @@ -86,18 +69,12 @@ This design allows you to build richer maps, for example: ## Angular Overlaying Imagery from Azure Maps - Code Example The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the Angular using and classes. - - ```html ``` - - - - ```ts export class AppComponent implements AfterViewInit { @ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent; @@ -122,16 +99,6 @@ export class AppComponent implements AfterViewInit { } ``` - - - - - - - - - - ## Properties The following table summarizes properties of the class: @@ -140,7 +107,6 @@ The following table summarizes properties of the |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.| ||`IgxAzureMapsImageryStyle`|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following `IgxAzureMapsImageryStyle` 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/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx index 81bb6b0160..cbf67b1670 100644 --- a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx @@ -23,18 +23,14 @@ The Angular is g ## Angular Displaying Imagery from Bing Maps Example - {/* */} Angular Bing Maps Imagery -
## Code Snippet The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular using class. - - ```html ``` - - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxBingMapsMapImagery } from 'igniteui-angular-maps'; @@ -70,10 +62,6 @@ tileSource.bingImageryRestUri = tileUri; this.map.backgroundContent = tileSource; ``` - - - - ## Properties The following table summarized properties of the class: @@ -88,7 +76,6 @@ The following table summarized properties of the |`SubDomainsCollection`|Represents an image collection of URI sub domains| ||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/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx index 6e5316a25a..0584d7c468 100644 --- a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx @@ -14,19 +14,13 @@ The is a fre ## Angular Displaying Imagery from Esri Maps Example - - - -
## Code Snippet The following code snippet shows how to display Angular geographic imagery tiles from Esri imagery servers in using class. - - ```html ``` - - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps'; @@ -51,19 +41,9 @@ tileSource.mapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/service this.geoMap.backgroundContent = tileSource; ``` - - - - - - - - ## Esri Utility Alternatively, you can use the [EsriUtility](geo-map-resources-esri.md) which defines all styles provided by Esri imagery servers. - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps'; @@ -77,15 +57,6 @@ tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap); this.geoMap.backgroundContent = tileSource; ``` - - - - - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx index 007e8cf083..67eb549b98 100644 --- a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Infragistics" description: Use Infragistics' Angular JavaScript map to display heat map imagery. Check out Ignite UI for Angular map demos! keywords: "Angular map, heat map imagery, Ignite UI for Angular, Infragistics" @@ -18,9 +18,6 @@ It is highly recommended that you review the [Binding Shape Files with Geo-Spati - - -
When a loads its shape files, it converts that data into objects. These objects can be retrieved from the `GetPointData()` method of the and can then be used to create a heat-map through usage of a object with a assigned to its `TileGenerator` property. This can then be used in a as its `TileImagery` source. @@ -31,12 +28,10 @@ The display of the geographic tile series when using the heat-map functionality The can also use a logarithmic scale. If you want to use this, you can set the `UseLogarithmicScale` property to **true**. - ## Web Worker The `HeatTileGenerator` also has support for web workers to do the heavy lifting of the loading of the tile imagery from your shape file on a separate thread. This can greatly improve the performance of your geographic map when using the heat-map functionality. In order to use a web worker with the generator, you can set the `UseWebWorkers` property to **true** and then set the `WebWorkerInstance` property to an instance of your web worker. - ```ts // heatworker.worker.ts import { HeatTileGeneratorWebWorker } from 'igniteui-angular-core'; @@ -51,23 +46,6 @@ HeatTileGeneratorWebWorker.start(); export default {} as typeof Worker & (new () => Worker); ``` - - - - - - - - - - - - - - - - - ```ts import { IgxHeatTileGenerator } from 'igniteui-angular-core'; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -75,32 +53,16 @@ import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps'; ``` - - - - - - ## Creating Heatmap The following code snippet shows how to display a population based heat-map in the Ignite UI for Angular map component: - - - - - - ```html ``` - - - - ```ts @ViewChild("map", { static: true }) public map: IgxGeographicMapComponent; @@ -165,18 +127,6 @@ constructor() { } ``` - - - - - - - - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx b/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx index 1b3a70a1ab..a75ca66005 100644 --- a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx @@ -49,7 +49,6 @@ This code example explicitly sets diff --git a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx index 4bb2108e19..2a6091edc9 100644 --- a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx @@ -15,19 +15,13 @@ By the default, the Ignite UI for Angular map component already displays geograp ## Angular Displaying Imagery from Open Street Maps Example - - - -
## Code Snippet This code example explicitly sets of the map component to the object which provides geographic imagery from OpenStreetMap© contributors. - - ```html ``` - - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxOpenStreetMapImagery } from 'igniteui-angular-maps'; @@ -50,17 +40,6 @@ const tileSource = new IgxOpenStreetMapImagery(); this.map.backgroundContent = tileSource; ``` - - - - - - - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-navigation.mdx b/docs/angular/src/content/en/components/geo-map-navigation.mdx index f6dd0b4745..31e872a2ea 100644 --- a/docs/angular/src/content/en/components/geo-map-navigation.mdx +++ b/docs/angular/src/content/en/components/geo-map-navigation.mdx @@ -14,12 +14,8 @@ Navigation in the control is enabled ## Angular Navigating Map Content Example - - - -
## Geographic Coordinates @@ -30,10 +26,6 @@ You navigate map content within geographic region bound by these coordinates: This code snippet shows how navigate the map using geographic coordinates: - - - - ## Window Coordinates Also, you can navigate map content within window rectangle bound by these relative coordinates: @@ -42,10 +34,6 @@ Also, you can navigate map content within window rectangle bound by these relati This code snippet shows how navigate the map using relative window coordinates: - - - - ## Properties The following table summarizes properties that can be used in navigation of the control: @@ -60,7 +48,6 @@ The following table summarizes properties that can be used in navigation of the || number | Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the property. | || number | Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the property. | - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-resources-esri.mdx b/docs/angular/src/content/en/components/geo-map-resources-esri.mdx index 2f0cd03631..e9da5917f2 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-esri.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-esri.mdx @@ -80,9 +80,6 @@ export enum EsriStyle { } ``` - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx b/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx index a0ce55d9c7..23f1311258 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx @@ -13,19 +13,11 @@ The resource topic provides implementation of an utility that helps with styling ## Required Imports - - ```ts import { IgxGeographicShapeSeries } from 'igniteui-angular-maps'; import { Style } from 'igniteui-angular-core'; ``` - - - - - - ## Utility Implementation ```ts @@ -260,7 +252,6 @@ export class ShapeComparison { } ``` - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx index bbee7e4427..aa55b5f151 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx @@ -140,9 +140,6 @@ export default class WorldConnections { } ``` - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx index 67f2538563..03c30ddc59 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx @@ -656,9 +656,6 @@ export default class WorldLocations { } ``` - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx index 6d636f89d1..40b37d0932 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx @@ -194,9 +194,6 @@ export default class WorldUtils { } ``` - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx b/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx index fc9cd7cfa3..b1fcdbdfcd 100644 --- a/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx +++ b/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx @@ -7,7 +7,6 @@ mentionedTypes: ["GeographicMap", "GeographicShapeSeriesBase", "Series"] --- import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Shape Files Reference ## Purpose @@ -46,8 +45,6 @@ The following table provides basic information and purpose for each type of shap | `.shx` | A shape index file contains an index for a quick lookup of a geo-spatial vector data items. | | `.dbf` | A shape database file contains a table in which a row corresponds to each geo-spatial data item from a shape (.shp) file. In the shape database file, string columns may describe attributes for geo-spatial data item such as strings (names of countries, regions, cities) and numeric columns (population of countries, location of cities). | - - Refer to the following resources for detailed information and specifications on how geo-spatial data is stored in shape files. - [ESRI - Shape File Technical Description](http://www.esri.com/library/whitepapers/pdfs/shapefile.pdf) @@ -94,7 +91,6 @@ The following topics provide additional information related to this topic. - [Binding Shape Files](geo-map-binding-shp-file.md) - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx b/docs/angular/src/content/en/components/geo-map-shape-styling.mdx index e95dac5d26..c73827394e 100644 --- a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx +++ b/docs/angular/src/content/en/components/geo-map-shape-styling.mdx @@ -14,20 +14,14 @@ This topic explains how to apply custom styling to the - - -
## Required Imports Shape styling requires that you import the following classes: - - ```ts import { IgxGeographicShapeSeries } from 'igniteui-angular-maps'; import { IgxStyleShapeEventArgs } from 'igniteui-angular-charts'; @@ -35,12 +29,6 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; import { IgxShapefileRecord } from 'igniteui-angular-core'; ``` - - - - - - Note that the following code examples are using the [Shape Styling Utility](geo-map-resources-shape-styling-utility.md) file that provides four different ways of styling shapes: - [Shape Comparison Styling](#shape-comparison-styling) - [Shape Random Styling](#shape-random-styling) @@ -51,8 +39,6 @@ Note that the following code examples are using the [Shape Styling Utility](geo- This code snippet creates instances of **ShapeRandomStyling** that will randomly assign fill colors to the countries of the world. - - ```ts import { ShapeRandomStyling } from './ShapeStylingUtility'; // ... @@ -74,18 +60,10 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) } ``` - - - - - - ## Shape Scale Styling This code snippet creates instances of **ShapeScaleStyling** that will assign fill colors to shape of countries based on population scaled on logarithmic scale. - - ```ts import { ShapeScaleStyling } from './ShapeStylingUtility'; // ... @@ -111,18 +89,10 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) } ``` - - - - - - ## Shape Range Styling This code snippet creates instances of **ShapeRangeStyling** that will assign colors to shape of countries based on ranges of population. - - ```ts import { ShapeRangeStyling } from './ShapeStylingUtility'; // ... @@ -149,18 +119,10 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) } ``` - - - - - - ## Shape Comparison Styling This code snippet creates instances of **ShapeComparisonStyling** that will assign colors to countries based on their region name in the world. - - ```ts import { ShapeComparisonStyling } from './ShapeStylingUtility'; this.shapeComparisonStyling = new ShapeComparisonStyling(); @@ -202,13 +164,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) } ``` - - - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx index 0761cc7e3d..38233ee3e3 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Scatter Area Series | Data Binding | Infragistics" description: Use Infragistics Angular map's scatter area series to draw a colored area surface based on a triangulation of longitude and latitude data with a numeric value assigned to each point. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, scatter area series, Ignite UI for Angular, Infragistics" @@ -14,12 +14,8 @@ In Angular map component, you can use the - - -
The works a lot like the except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values. @@ -58,18 +54,6 @@ The following table list properties of the `CustomPaletteColorScale` affecting s ## Code Snippet The following code shows how to bind the to triangulation data representing surface temperatures in the world. - - - - - - - - - - - - ```html

diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx index 2a7fd096cc..ee7bc246a7 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx @@ -14,12 +14,8 @@ In Angular map component, you can use the - - -
The demo above shows the series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too. @@ -41,19 +37,6 @@ The following table summarizes the GeographicHighDensityScatterSeries series pro ## Code Snippet - - - - - - - - - - - - - ```html
``` - - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { IgxSizeScaleComponent } from 'igniteui-angular-charts'; @@ -167,15 +146,6 @@ export class MapTypeScatterBubbleSeriesComponent implements AfterViewInit { } ``` - - - - - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx index 6d1b4b1fdf..37e37e26df 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx @@ -14,12 +14,8 @@ In Angular map component, you can use the - - -
The works a lot like the except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale. @@ -57,17 +53,6 @@ The following table list properties of the CustomPaletteColorScale affecting the The following code shows how to bind the to triangulation data representing surface temperatures in the world. - - - - - - - - - - - ```html
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx index e25a7044a4..9a8162a335 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx @@ -14,12 +14,8 @@ In Angular map component, you can use the - - -
The demo above shows the series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels. @@ -52,18 +48,6 @@ The Heat Color Scale, an optional feature, determines the color pattern within t The following code demonstrates how set the `HeatMinimumColor` and `HeatMaximumColor` properties of the - - - - - - - - - - - - ```html
``` - - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -144,16 +124,6 @@ export class MapTypeScatterDensitySeriesComponent implements AfterViewInit { } ``` - - - - - - - - - ## API References -
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx index 08232fb002..76738ebc8d 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Scatter Symbol Series | Data Binding | Infragistics" description: Use Infragistics Angular map's scatter symbol series to display geo-spatial data using points or markers in a geographic context.. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, scatter symbol series, Ignite UI for Angular, Infragistics" @@ -14,12 +14,8 @@ In Angular map component, you can use the - - -
## Data Requirements @@ -28,18 +24,6 @@ Similarly to other types of geographic series in the map component, the to locations of cities loaded from a shape file using the . - - - - - - - - - - - - ```html

diff --git a/docs/angular/src/content/en/components/geo-map-type-series.mdx b/docs/angular/src/content/en/components/geo-map-type-series.mdx index 722abba1cf..429370707c 100644 --- a/docs/angular/src/content/en/components/geo-map-type-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-series.mdx @@ -7,7 +7,6 @@ mentionedTypes: ["GeographicMap", "Series"] --- import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Geographic Series Overview In the Ignite UI for Angular Map component, geographic series are visual elements of the map that display geo-spatial data as points (e.g. locations of cities), polylines (e.g. road connections), or polygons (shape of countries) in a geographic context. @@ -15,7 +14,6 @@ The map component's Series property is a collection of geographic series objects All types of geographic series are always rendered on top of the geographic imagery tiles. However, sometimes geographic series (e.g. with detailed shape files of the world) might provide enough geographic contexts for an application and geographic imagery is not desired in the map control. - ## Type of Geographic Series The Angular Geographic Map component supports the following types of geographic series: @@ -28,7 +26,6 @@ The Angular Geographic Map component supports the following types of geographic - [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md) - [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md) - ## API References
diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx index 8eb3746cdc..90a1ac503f 100644 --- a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Shape Polygon Series | Infragistics" description: Use Infragistics Angular map's shape polygon series to render shapes of countries or regions defined by geographic locations. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, shape polygon series, Ignite UI for Angular, Infragistics" @@ -14,12 +14,8 @@ In Angular map component, you can use the - - -
The works a lot like the except that geo-spatial data is rendered with polygons instead of polylines. @@ -30,18 +26,6 @@ Similar to other types of geographic series in the map control, the to shapes of countries in the world loaded from a shape file using the . - - - - - - - - - - - - ```html

diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx index 0d1a4b3942..29dfb1a9b3 100644 --- a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Shape Polyline Series | Infragistics" description: Use Infragistics Angular map's shape polyline series to render roads or connections between geographic locations such as cities or airports. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, Ignite UI for Angular, shape polyline series, Infragistics" @@ -14,12 +14,8 @@ In Angular map component, you can use the - - -
The works a lot like the except that geo-spatial data is rendered with polylines instead of polygons. @@ -30,18 +26,6 @@ Similarly to other types of geographic series in the control, the to locations of cities loaded from a shape file using the . - - - - - - - - - - - - ```html
@@ -65,10 +49,6 @@ The following code shows how to bind the
diff --git a/docs/angular/src/content/en/components/geo-map.mdx b/docs/angular/src/content/en/components/geo-map.mdx index 40ae077737..8b4cc11a70 100644 --- a/docs/angular/src/content/en/components/geo-map.mdx +++ b/docs/angular/src/content/en/components/geo-map.mdx @@ -18,8 +18,6 @@ The following sample demonstrates how display data in - -
The map component allows you to render geographic imagery from Bing Maps™, and Open Street Maps. The map provides plotting of tens of thousands of data points, and updates them every few milliseconds so that the control can handle your real-time feeds. @@ -34,10 +32,6 @@ For more details please visit: [Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) - - - - ## Dependencies The Angular geographic map component, you need to first install these packages: @@ -48,17 +42,10 @@ npm install --save igniteui-angular-charts npm install --save igniteui-angular-maps ``` - - - ## Component Modules The requires the following modules, however the DataChartInteractivityModule is only required for mouse interactions, such as panning and zooming the map content. - - - - ```ts // app.module.ts import { IgxGeographicMapModule } from 'igniteui-angular-maps'; @@ -75,10 +62,6 @@ import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; export class AppModule {} ``` - - - - ```ts import { AfterViewInit, Component, ViewChild } from "@angular/core"; import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; @@ -102,22 +85,12 @@ export class MapOverviewComponent implements AfterViewInit { } ``` - - - - - - - -
## Usage Now that the map module is imported, next step is to create geographic map. The following code demonstrates how to do this and enable zooming in the map. - - ```html
``` - - - - - - - -
## Additional Resources @@ -152,7 +117,6 @@ You can find more information about related Angular map features in these topics - [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md) - [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md) - ## API References
diff --git a/docs/angular/src/content/en/components/inputs/color-editor.mdx b/docs/angular/src/content/en/components/inputs/color-editor.mdx index 694935776f..bb032e3240 100644 --- a/docs/angular/src/content/en/components/inputs/color-editor.mdx +++ b/docs/angular/src/content/en/components/inputs/color-editor.mdx @@ -10,7 +10,6 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; - # Angular Color Editor Overview The Ignite UI for Angular Color Editor is a lightweight color picker component. The Color Editor can pop open by clicking the brush icon. Both the rgba and hex values can be obtained from the desired color along the bottom. These values will update when the three sliders are modified. The center box is designed for adjusting the saturation and brightness along with two adjacent sliders for adjusting the rgb and luminance values. Rgb registers between (1-255). The lightness registers between(0-1). @@ -18,12 +17,10 @@ The Ignite UI for Angular Color Editor is a lightweight color picker component. -
## Dependencies - First, you need to install the Ignite UI for Angular by running the following command: ```cmd @@ -33,26 +30,10 @@ npm install igniteui-angular-inputs Before using the , you need to register the following modules as follows: - - - - - - - - - - - - ## Usage The simplest way to start using the is as follows: - - - - ```html
``` - - - - - - - - - - - - ## Binding to events The Color Editor component raises the following events: @@ -80,7 +49,6 @@ The Color Editor component raises the following events: - valueChanged - valueChanging - ```ts @ViewChild("colorEditor", { static: true } ) private colorEditor: IgxColorEditorComponent @@ -94,17 +62,8 @@ public onValueChanged = (e: any) => { } ``` - - - - - - - -
- ## API References
diff --git a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx index c89c8c78fa..49a7e6e30f 100644 --- a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx +++ b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx @@ -75,7 +75,6 @@ The matrix below provides a high-level outline of the accessibility support prov | - Time picker||||||||||*||||||| | - Toast||||||||||*||||||| - **LEGEND** |||| @@ -108,7 +107,6 @@ The table above is relevant only to the **Default theme** of Ignite UI for Angul - **o** - A method shall be provided that permits users to skip repetitive navigation links. - **p** - When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. - ## WCAG compliance [WCAG](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111) is simply a set of formal guidelines on how to develop accessible web content. These standards represent a higher level of accessibility than 508 standards, although they are identical or very similar. WCAG focuses primarily on HTML accessibility. @@ -158,7 +156,6 @@ The table above is relevant only to the **Default theme** of Ignite UI for Angul | - Toast||||||*|*||||*||| | - Tooltip||||||*|*||||*||| - **Legend** |||| @@ -192,6 +189,5 @@ The table above is relevant only to the **Default theme** of Ignite UI for Angul - **Principle 4 – Robust** - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. - Guideline 4.1 – **Compatible** - Maximize compatibility with current and future user agents, including assistive technologies - ## WAI-ARIA Support In 2014 the W3C finalized their [WAI-ARIA specification](http://www.w3.org/TR/wai-aria/) which defined how to design Web content and Web applications to be more accessible to users with disabilities. diff --git a/docs/angular/src/content/en/components/linear-gauge.mdx b/docs/angular/src/content/en/components/linear-gauge.mdx index 03d8d50a3d..3495bd05f0 100644 --- a/docs/angular/src/content/en/components/linear-gauge.mdx +++ b/docs/angular/src/content/en/components/linear-gauge.mdx @@ -19,15 +19,8 @@ The following sample demonstrates how setting multiple properties on the same - - -
- - - - ## Dependencies When installing the Angular gauge component, the core package must also be installed. @@ -37,18 +30,10 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-gauges ``` - - - ## Component Modules The requires the following modules: - - - - - ```ts // app.module.ts import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; @@ -63,21 +48,12 @@ import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; export class AppModule {} ``` - - - - - - -
## Usage The following code demonstrates how create a linear gauge containing a needle and three comparative ranges on the scale. - - ```html ``` - - - - - - - -
## Needle This is the primary measure displayed by the linear gauge component and is visualized as a bar or you can customize it to show almost any shape as is demonstrated below. - - ```html ``` - - - - - - - - - - ## Highlight Needle The linear gauge can be modified to show a second needle. This will make the main needle's `Value` appear with a lower opacity. To enable this first set `HighlightValueDisplayMode` to Overlay and then apply a `HighlightValue`. - - ```html ``` - - - - - - - - - ## Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same times the degree to which it resides within that state. - - ```html ``` - - - - - - - - - - - ## Tick Marks The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the linear gauge. @@ -234,8 +166,6 @@ Major tick marks – The major tick marks are used as primary delimiters on the Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones. - - ```html ``` - - - - - - - - - - ## Labels The labels indicate the measures on the scale. - - ```html ``` - - - - - - - - - - - ## Backing The backing element represents background and border of the linear gauge component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. - - ```html ``` - - - - - - - - - - - ## Scale The scale is a visual element that highlights the full range of values in the linear gauge. You can customize the appearance and the shape of the scale. It can also be inverted (using `IsScaleInverted` property) and all labels will be rendered from right-to-left instead of left-to-right. - - ```html ``` - - - - - - - - - - - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the linear gauge with all features and visuals enabled. - - ```html ``` - - - - - - - -
- ## API References
diff --git a/docs/angular/src/content/en/components/maps/map-api.mdx b/docs/angular/src/content/en/components/maps/map-api.mdx index ac82ea229f..a612d130c2 100644 --- a/docs/angular/src/content/en/components/maps/map-api.mdx +++ b/docs/angular/src/content/en/components/maps/map-api.mdx @@ -66,7 +66,6 @@ The Angular `GeographicShapeSeries` and `GeographicPolylineSeries` have the same ## Angular Geographic Area Series API - The Angular `GeographicScatterAreaSeries` has the following API members: - `LatitudeMemberPath` @@ -87,8 +86,7 @@ The Angular `GeographicContourLineSeries` has the following API members: The Angular `GeographicHighDensityScatterSeries` has the following API members: - - `LatitudeMemberPath` - `LongitudeMemberPath` - `HeatMaximumColor` -- `HeatMinimumColor` \ No newline at end of file +- `HeatMinimumColor` diff --git a/docs/angular/src/content/en/components/menus/toolbar.mdx b/docs/angular/src/content/en/components/menus/toolbar.mdx index 9175bfc5bd..f24ee34326 100644 --- a/docs/angular/src/content/en/components/menus/toolbar.mdx +++ b/docs/angular/src/content/en/components/menus/toolbar.mdx @@ -8,7 +8,6 @@ mentionedTypes: ["Toolbar", "ToolAction", "DomainChart", "CategoryChart", "DataC import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Toolbar Overview The Angular Toolbar component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our or components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization. @@ -17,10 +16,8 @@ The Angular Toolbar component is a companion container for UI operations to be u - ## Dependencies - Install the Ignite UI for Angular layouts, inputs, charts and core packages: ```cmd @@ -32,8 +29,6 @@ npm install igniteui-angular-core The following modules are required when using the with the component and it's features. - - ```ts import { IgxToolbarModule } from 'igniteui-angular-layouts'; import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule } from 'igniteui-angular-charts'; @@ -54,10 +49,6 @@ import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategory export class AppModule {} ``` - - - - ```ts import { IgxToolbarModule } from 'igniteui-react-layouts'; import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule } from 'igniteui-react-charts'; @@ -71,16 +62,6 @@ IgrDataChartInteractivityModule.register(); IgrDataChartCategoryTrendLineModule.register(); ``` - - - - - - - - - - ## Usage ### Tool Actions @@ -104,15 +85,10 @@ The following example demonstrates a couple of features. First you can group too - ### Angular Data Chart Integration The Angular Toolbar contains a property. This is used to link a component, such as the as shown in the code below: - - - - ```html
items and menus become available when the is linked with the Toolbar. Here is a list of the built-in Angular `DataChart` Tool Actions and their associated `OverlayId`: Zooming Actions @@ -180,8 +148,6 @@ Similarly to adding svg, you can also add an Icon image from a URL via the ``` - - ```ts public toolbarCustomIconOnViewInit(): void { @@ -209,8 +173,6 @@ public toolbarCustomIconOnViewInit(): void { } ``` - - ```ts public toolbarCustomIconOnViewInit(): void { @@ -229,39 +191,22 @@ public toolbarCustomIconOnViewInit(): void { } ``` - - - - ### Vertical Orientation By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property. - - ```html ``` - - - - - - - - The following example demonstrates the vertical orientation of the Angular Toolbar. - ### Color Editor You can add a custom color editor tool to the the Angular Toolbar, which will also work with the Command event to perform custom styling to your application. - - ```html ``` - - - - - - - - The following example demonstrates styling the Angular Data Chart series brush with the Color Editor tool. - - {/* ## Styling/Theming The icon component can be styled by using it's `BaseTheme` property directly to the `Toolbar`. - - ```html ``` - - - - - - - - {/* The following example demonstrates the various theme options that can be applied. */} - ## API References
diff --git a/docs/angular/src/content/en/components/radial-gauge.mdx b/docs/angular/src/content/en/components/radial-gauge.mdx index f28bf1365a..4a9fa94e75 100644 --- a/docs/angular/src/content/en/components/radial-gauge.mdx +++ b/docs/angular/src/content/en/components/radial-gauge.mdx @@ -17,18 +17,10 @@ The Angular radial gauge component provides a number of visual elements, like a The following sample demonstrates how setting multiple properties on the same can transform it to completely different radial gauge. - - - -
- - - - ## Dependencies When installing the gauge component, the core package must also be installed. @@ -38,22 +30,10 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-gauges ``` - - - - - - - ## Component Modules The requires the following modules: - - - - - ```ts // app.module.ts import { IgxRadialGaugeModule } from 'igniteui-angular-gauges'; @@ -68,22 +48,12 @@ import { IgxRadialGaugeModule } from 'igniteui-angular-gauges'; export class AppModule {} ``` - - - - - - -
- ## Usage The following code demonstrates how create a radial gauge containing a needle and three comparative ranges on the scale. - - ```html ``` - - - - - - - -
## Backing @@ -123,8 +85,6 @@ The backing element represents background and border of the radial gauge compone The backing can be circular or fitted. A circular shape creates a 360 degree circle gauge while a fitted shape creates a filled arc segment encompassing the `ScaleStartAngle` and `ScaleEndAngle` properties. This can be set by setting the `BackingShape` property. - - ```html ``` - - - - - - - - - - - ## Scale The scale is visual element that highlights full range of values in the gauge which can be created by supplying `MinimumValue` and `MaximumValue` values. Together with backing, it defines overall shape of gauge. The `ScaleStartAngle` and `ScaleEndAngle` properties define bounds of arc of the scale. While, the `ScaleSweepDirection` property specifies whether the scale sweeps in clockwise or counter-clockwise direction. You can customize appearance of the scale by setting `ScaleBrush`, `ScaleStartExtent`, and `ScaleEndExtent` properties. - - ```html ``` - - - - - - - - - - - ## Labels and Titles The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the `MinimumValue` and `MaximumValue` properties. You can position labels by setting the `LabelExtent` property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as `FontBrush` and `Font`. Each of these labels for the needle have various styling attributes you can apply to change the font, angle, brush and distance from the center of the gauge such as `TitleExtent`, `TitleAngle`, `SubtitleFontSize`, `HighlightLabelBrush`. - - ```html ``` - - - - - - - - - - ## Title & Subtitle `TitleText` and `SubtitleText` properties are available and can both be used to display custom text for the needle. Alternatively, `TitleDisplaysValue` and `SubtitleDisplaysValue`, when set to true, will let display the needle's value and override `TitleText` and `SubtitleText`. So you can occupy custom text for the title but show the value via the subtitle and vice versa. If the highlight needle is shown, as explained below, then custom text can be shown via `HighlightLabelText`, otherwise `HighlightLabelDisplaysValue` can be enabled and display it's value. - - ```html ``` - - - - - - - - ## Optical Scaling The radial gauge's labels and titles can change it's scaling. To enable this, first set `OpticalScalingEnabled` to true. Then you can set `OpticalScalingSize` which manages the size at which labels have 100% optical scaling. Labels will have larger fonts when gauge's size is larger. For example, labels will have a 200% larger font size when this property is set to 500 and the gauge px size is doubled to eg. 1000. - ## Tick Marks Tick marks are thin lines radiating from the center of the radial gauge. There are two types of tick marks: major and minor. Major tick marks are displayed at the `Interval` between the `MinimumValue` and `MaximumValue` properties. Use the `MinorTickCount` property to specify the number of minor tick marks displayed between each major tick mark. You can control the length of tick marks by setting a fraction (between 0 and 1) to `TickStartExtent`, `TickEndExtent`, `MinorTickStartExtent`, and `MinorTickEndExtent` properties. - - ```html ``` - - - - - - - - - - - ## Ranges A range highlights a set of continuous values bound by a specified `MinimumValue` and `MaximumValue` properties. You can add multiple ranges to the radial gauge by specifying their starting and ending values. Each range has a few customization properties such as `Brush` and `Outline`. Alternatively, you can set `RangeBrushes` and `RangeOutlines` properties to a list of colors for the ranges. - - ```html ``` - - - - - - - - - - - ## Needle Radial gauge needles are visual elements used to signify a gauge set value. Needles are available in one of the several predefined shapes. The needle can have a pivot shape, which is placed in the center of the gauge. The pivot shape also takes one of the predefined shapes. Pivot shapes that include an overlay or an underlay can have a separate pivot brush applied to the shape. @@ -334,8 +221,6 @@ The supported needle shapes and caps are set using the `NeedleShape` and `Needle You can enable an interactive mode of the gauge (using `IsNeedleDraggingEnabled` property) and the end-user will be able to change value by dragging the needle between values of `MinimumValue` and `MaximumValue` properties. - - ```html ``` - - - - - - - - - ## Highlight Needle The radial gauge can be modified to show a second needle. This will make the main needle's `Value` appear with a lower opacity. To enable this first set `HighlightValueDisplayMode` to Overlay and then apply a `HighlightValue`. - - ```html ``` - - - - - - - - - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the radial gauge with all features and visuals enabled. - - ```html ``` - - - - - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/spreadsheet-activation.mdx b/docs/angular/src/content/en/components/spreadsheet-activation.mdx index e38d651f68..3858aac401 100644 --- a/docs/angular/src/content/en/components/spreadsheet-activation.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-activation.mdx @@ -4,7 +4,6 @@ _description: Learn how to use the activation feature of the Angular spreadshee _keywords: Excel Spreadsheet, activation, Ignite UI for Angular, Infragistics _license: commercial - --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; @@ -15,12 +14,8 @@ The Angular Spreadsheet component exposes properties that allow you to determine ## Angular Spreadsheet Activation Example - - - -
## Activation Overview @@ -41,7 +36,6 @@ this.spreadsheet.activeWorksheet = this.spreadsheet.workbook.worksheets(1); this.spreadsheet.activeCell = new SpreadsheetCell("C5"); ``` - ## API References
diff --git a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx b/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx index 18098c24a4..051d28b999 100644 --- a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx @@ -17,7 +17,6 @@ The Angular Spreadsheet component allows displaying charts in your -
## Chart Adapter Overview @@ -89,8 +88,6 @@ In the following code snippet, an external [ExcelUtility](excel-utility.md) clas When setting up your Angular spreadsheet control to add charts, you will need to import the `SpreadsheetChartAdapter` class like so: - - ```ts import { IgxSpreadsheetChartAdapterModule } from 'igniteui-angular-spreadsheet-chart-adapter'; import { SpreadsheetChartAdapter } from 'igniteui-angular-spreadsheet-chart-adapter'; @@ -101,12 +98,6 @@ import { Worksheet } from 'igniteui-angular-excel'; import { WorksheetCell } from 'igniteui-angular-excel'; ``` - - - - - - ## Code Snippet The following code snippet demonstrates how to add charts to the currently viewed worksheet in the control: @@ -163,7 +154,6 @@ ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx"). }); ``` - ## API References
diff --git a/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx b/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx index 9d85866270..0d778a671e 100644 --- a/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx @@ -14,34 +14,21 @@ This topic explains how to perform clipboard operations on the Ignite UI for Ang ## Angular Working with Clipboard Example - - - -
## Dependencies Before making use of the clipboard you will want to import the enumeration: - - ```ts import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet'; import { SpreadsheetAction } from 'igniteui-angular-spreadsheet'; ``` - - - - - -
- ## Usage The following code snippet shows how you can execute commands related to the clipboard in the Angular control: @@ -60,7 +47,6 @@ public paste(): void { } ``` - ## API References
diff --git a/docs/angular/src/content/en/components/spreadsheet-commands.mdx b/docs/angular/src/content/en/components/spreadsheet-commands.mdx index 40f94546b2..2cb3dca52e 100644 --- a/docs/angular/src/content/en/components/spreadsheet-commands.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-commands.mdx @@ -14,40 +14,25 @@ The Angular Spreadsheet component allows you to perform commands for activating ## Angular Working with Commands Example - - - -
## Dependencies Before making use of the commands you will want to import the - - ```ts import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet'; import { SpreadsheetAction } from 'igniteui-angular-spreadsheet'; ``` - - - - - -
- ## Usage The following snippet shows how you can setup the data validation rules - - ```ts @ViewChild("spreadsheet", { read: IgxSpreadsheetComponent }) public spreadsheet: IgxSpreadsheetComponent; @@ -63,13 +48,6 @@ public zoomOut(): void { } ``` - - - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx b/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx index 9f7194811b..b6651837bb 100644 --- a/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Spreadsheet | Conditional Formatting | Infragistics" description: Use Infragistics' Angular spreadsheet control to conditionally format the cells of a worksheet. Check out Ignite UI for Angular spreadsheet demos! keywords: Spreadsheet, conditional formatting, Ignite UI for Angular, Infragistics, Worksheet @@ -14,12 +14,8 @@ The Angular component allows yo ## Angular Spreadsheet Conditional Formatting Example - - - -
## Conditional Formatting Overview @@ -56,7 +52,6 @@ The following lists the supported conditional formats in the Angular - - -
## Configuring Cell Editing @@ -32,24 +28,12 @@ You can also configure the direction of the adjacent cell navigated to on press The following code snippets demonstrate the above: - - ```html ``` - - - - - - - - - - ```ts this.spreadsheet.isEnterKeyNavigationEnabled = true; this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left; @@ -61,18 +45,10 @@ The Angular `Spreadsheet` allows you to configure the visibility of the formula The following code snippets demonstrate the above: - - ```html ``` - - - - - - ```ts this.spreadsheet.isFormulaBarVisible = true; ``` @@ -83,18 +59,10 @@ The `Spreadsheet` allows you to configure the visibility of its gridlines by set The following code snippets demonstrate the above: - - ```html ``` - - - - - - ```ts this.spreadsheet.areGridlinesVisible = true; ``` @@ -105,18 +73,10 @@ The `Spreadsheet` allows you to configure the visibility of its headers by setti The following code snippets demonstrate the above: - - ```html ``` - - - - - - ```ts this.spreadsheet.areHeadersVisible = false; ``` @@ -131,18 +91,10 @@ End mode goes into effect at runtime when the user presses the END ke The following code snippets demonstrate the above, in that the `Spreadsheet` will begin in end mode: - - ```html ``` - - - - - - ```ts this.spreadsheet.isInEndMode = true; ``` @@ -170,22 +122,10 @@ The `SpreadsheetSelection` object mentioned in the descriptions above can be obt The following code snippets demonstrate configuration of the selection mode: - - ```html ``` - - - - - - - - - - ```ts this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection; ``` @@ -222,23 +162,14 @@ Setting this property to a number represents the percentage as a whole number, s The following code snippets show how to configure the spreadsheet's zoom level: - - ```html ``` - - - - - - ```ts this.spreadsheet.zoomLevel = 200; ``` - ## API References
diff --git a/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx b/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx index 1a18970350..aeea31b047 100644 --- a/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx @@ -14,19 +14,14 @@ This topic explains how to configure and set the built-in data validation rules. ## Angular Data Validation Example - - - -
## Dependencies When setting up the data validation rules you will need to import the rules you want to use. - ```ts import { AnyValueDataValidationRule } from 'igniteui-angular-excel'; import { CustomDataValidationRule } from 'igniteui-angular-excel'; @@ -37,10 +32,3 @@ import { OneConstraintDataValidationRule } from 'igniteui-angular-excel'; import { TwoConstraintDataValidationOperator } from 'igniteui-angular-excel'; import { TwoConstraintDataValidationRule } from 'igniteui-angular-excel'; ``` - - - - - - - diff --git a/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx b/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx index eca27a3499..2ae510e23a 100644 --- a/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx @@ -14,12 +14,8 @@ The Angular Spreadsheet component allows display of pre-existing hyperlinks in y ## Angular Spreadsheet Hyperlinks Example - - - -
## Hyperlinks Overview @@ -30,14 +26,6 @@ Hyperlinks are added to the `Spreadsheet` control by accessing the `Hyperlinks` When setting up your Angular spreadsheet control to use hyperlinks, you will need to import the `WorksheetHyperlink` class like so: - ```ts import { WorksheetHyperlink } from 'igniteui-angular-excel'; ``` - - - - - - - diff --git a/docs/angular/src/content/en/components/spreadsheet-overview.mdx b/docs/angular/src/content/en/components/spreadsheet-overview.mdx index 2652e48903..67fbea7efe 100644 --- a/docs/angular/src/content/en/components/spreadsheet-overview.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-overview.mdx @@ -17,9 +17,6 @@ The Angular Spreadsheet (Excel viewer) component is lightweight, feature-rich a - - -
## Functionality @@ -64,16 +61,10 @@ npm install --save igniteui-angular-excel npm install --save igniteui-angular-spreadsheet ``` - ## Component Modules The `Spreadsheet` requires the following modules: - - - - - ```ts import { IgxExcelModule } from 'igniteui-angular-excel'; import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet'; @@ -89,29 +80,17 @@ import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet'; export class AppModule {} ``` - - - - - -
## Usage Now that the Angular spreadsheet module is imported, next is the basic configuration of the spreadsheet. - - ```html ``` - - - - In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a `Workbook`. @@ -119,8 +98,6 @@ In the following code snippet, an external [ExcelUtility](excel-utility.md) clas The following demonstrates how to load a workbook into the Angular spreadsheet - - ```ts import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet'; import { ExcelUtility } from 'ExcelUtility'; @@ -138,13 +115,6 @@ ngOnInit() { } ``` - - - - - - - ## API References
diff --git a/docs/angular/src/content/en/components/zoomslider-overview.mdx b/docs/angular/src/content/en/components/zoomslider-overview.mdx index a413207e1f..6381bbd1b2 100644 --- a/docs/angular/src/content/en/components/zoomslider-overview.mdx +++ b/docs/angular/src/content/en/components/zoomslider-overview.mdx @@ -8,7 +8,6 @@ mentionedTypes: ["ZoomSlider", "DataChart"] import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Zoom Slider Overview The Angular ZoomSlider control provides zooming functionality to range-enabled controls. The ZoomSlider features a horizontal scroll bar, a thumbnail of the whole range, and a resizable zoom-range window. The ZoomSlider cannot work as a standalone control and it acts as an enhancement for range-based controls like the DataChart or CategoryChart. @@ -19,8 +18,6 @@ The following sample demonstrates how to use `ZoomSlider` to navigate content in - -
## Usage @@ -34,11 +31,6 @@ The following sample demonstrates how to use `ZoomSlider` to navigate content in | Extensibility | The ZoomSlider control supports DataChart control out-of the box. | | Configurable zoom-range window | The initial zoom-range window width and position, as well as its minimum size, are configurable. | - - - - - ## Dependencies When installing the Angular chart component, the core package must also be installed. @@ -48,17 +40,10 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-charts ``` - - - ## Component Modules The `ZoomSlider` requires the following modules: - - - - ```ts import { IgxZoomSliderModule } from 'igniteui-angular-charts'; import { IgxZoomSliderComponent } from 'igniteui-angular-charts'; @@ -73,18 +58,10 @@ import { IgxZoomSliderComponent } from 'igniteui-angular-charts'; export class AppModule {} ``` - - - - - - ## Code Snippet The following code demonstrates how to setup the ZoomSlider. - - ```html ``` - - - - - - -
## Additional Resources You can find more information about charts in [Chart Features](charts/chart-features.md) topic. - ## API References
diff --git a/docs/angular/src/content/en/grids_templates/column-types.mdx b/docs/angular/src/content/en/grids_templates/column-types.mdx index 554735cee6..7dd9064025 100644 --- a/docs/angular/src/content/en/grids_templates/column-types.mdx +++ b/docs/angular/src/content/en/grids_templates/column-types.mdx @@ -116,12 +116,16 @@ Available timezones:
-The {ComponentTitle} accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format]( - -../grid/ + + +The {ComponentTitle} accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](grid.md#custom-display-format). + + + +The {ComponentTitle} accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](../grid/grid.md#custom-display-format). -grid.md#custom-display-format). + As you can see in the sample, we specify a different format options in order to showcase the available formats for the specific column type. For example, below you can find the format options for the _time_ portion of the date object: diff --git a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx index 34e50c44db..307fb3f028 100644 --- a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx +++ b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx @@ -364,14 +364,15 @@ The list items inside the Excel Style Filtering dialog represent the unique valu ## Formatted Values Filtering Strategy -By default, the {ComponentTitle} component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. + +By default, the {ComponentTitle} component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. In order to do that you can use the . + -In order to do that you can use the . +The following sample demonstrates how to format the numeric values of a column as strings and filter the {ComponentTitle} based on the string values: + + +By default, the {ComponentTitle} component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. In order to do that you can use the . The following sample demonstrates how to format the numeric values of a column as strings and filter the {ComponentTitle} based on the string values: - - In order to do that you can use the . - - The following sample demonstrates how to format the numeric values of a column as strings and filter the {ComponentTitle} based on the string values: diff --git a/docs/angular/src/content/en/grids_templates/filtering.mdx b/docs/angular/src/content/en/grids_templates/filtering.mdx index 29130ff371..2b4206bd60 100644 --- a/docs/angular/src/content/en/grids_templates/filtering.mdx +++ b/docs/angular/src/content/en/grids_templates/filtering.mdx @@ -42,9 +42,11 @@ IgniteUI for [Angular {ComponentTitle} component](https://www.infragistics.com/p ## Angular {ComponentTitle} Filtering Example -The sample below demonstrates {ComponentTitle}'s **Quick filtering** user experience. -API method is used to apply _contains_ condition on the _ProductName column_ through external _igxInputGroup component_. +The sample below demonstrates {ComponentTitle}'s **Quick filtering** user experience. API method is used to apply _contains_ condition on the _ProductName column_ through external _igxInputGroup component_. + + +The sample below demonstrates {ComponentTitle}'s **Quick filtering** user experience. diff --git a/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx b/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx index 846a87d503..87dfebea80 100644 --- a/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx +++ b/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx @@ -90,16 +90,14 @@ When the **{ComponentName}** body is focused, the following key combinations are ### Key Combination -- Arrow Up- navigates one cell up - -, or one level up the grid hierarchy if necessary + +- Arrow Up- navigates one cell up (no wrapping) +- Arrow Down navigates one cell down (no wrapping) -(no wrapping) -- Arrow Down navigates one cell down -, or one level down the grid hierarchy if necessary +- Arrow Up- navigates one cell up, or one level up the grid hierarchy if necessary +- Arrow Down navigates one cell down, or one level down the grid hierarchy if necessary -(no wrapping) - Arrow Left navigates one cell left (no wrapping between lines) - Arrow Right - navigates one cell right (no wrapping between lines) - Ctrl + Arrow Left navigates to the leftmost cell in the row @@ -118,34 +116,27 @@ When the **{ComponentName}** body is focused, the following key combinations are - Tab available only if there is a cell in edit mode; moves the focus to the next editable cell in the row; after reaching the last cell in the row, moves te focus to the first editable cell in the next row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to the **CANCEL** and **DONE** buttons, and from **DONE** button to the left-most editable cell in the row - Shift + Tab - available only if there is a cell in edit mode; moves the focus to the previous editable cell in the row; after reaching the first cell in the row, moves the focus to the last editable cell in the previous row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to **CANCEL** and **DONE** buttons, and from **DONE** button to the right-most editable cell in the row - Space - selects the row, if Row Selection is enabled -- Alt + Arrow Left or Alt + Arrow Up - - -over Group Row - collapses the group - - -collapses the row island - - -collapses the current node - -- Alt + Arrow Right or Alt + Arrow Down - -over Group Row - expands the group - - -expands the row island - - -expands the current node - - +- Alt + Arrow Left or Alt + Arrow Up - over Group Row - collapses the group +- Alt + Arrow Right or Alt + Arrow Down - over Group Row - expands the group - Alt + Arrow Left or Alt + Arrow Up - over Master Detail Row - collapses the details view - Alt + Arrow Right or Alt + Arrow Down - over Master Detail Row - expands the details view - - - Space - over Group Row - selects all rows in the group, if rowSelection property is set to multiple + + + + +- Alt + Arrow Left or Alt + Arrow Up - collapses the row island +- Alt + Arrow Right or Alt + Arrow Down - expands the row island + + + + +- Alt + Arrow Left or Alt + Arrow Up - collapses the current node +- Alt + Arrow Right or Alt + Arrow Down - expands the current node + Practice all of the above mentioned actions in the demo sample below. Focus any navigable grid element and a list with some of the available actions for the element will be shown to guide you through. diff --git a/docs/angular/src/content/en/grids_templates/row-adding.mdx b/docs/angular/src/content/en/grids_templates/row-adding.mdx index f598b1d4d4..8357e8d485 100644 --- a/docs/angular/src/content/en/grids_templates/row-adding.mdx +++ b/docs/angular/src/content/en/grids_templates/row-adding.mdx @@ -189,11 +189,12 @@ The internal is automat {ComponentTitle} allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported. -Using `beginAddRowById` requires you to specify the row to use as context for the operation by its rowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. + +Using `beginAddRowById` requires you to specify the row to use as context for the operation by its rowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. + -The second parameter controls if the row is added as a child to the context row or as a sibling. +Using `beginAddRowById` requires you to specify the row to use as context for the operation by its rowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. The second parameter controls if the row is added as a child to the context row or as a sibling. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. - You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. diff --git a/docs/angular/src/content/en/grids_templates/row-selection.mdx b/docs/angular/src/content/en/grids_templates/row-selection.mdx index dd34b9fa67..60ad3298b7 100644 --- a/docs/angular/src/content/en/grids_templates/row-selection.mdx +++ b/docs/angular/src/content/en/grids_templates/row-selection.mdx @@ -82,12 +82,16 @@ public handleRowSelection(event: IRowSelectionEventArgs) { ## Setup -In order to setup row selection in the , you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following -three modes: **none**, **single** and **multiple** + +In order to setup row selection in the , you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following three modes: **none**, **single** and **multiple**. Below we will take a look at each of them in more detail. + -four modes: **none**, **single**, **multiple** and **multipleCascade**. Below we will take a look at each of them in more detail. + +In order to setup row selection in the , you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following four modes: **none**, **single**, **multiple** and **multipleCascade**. Below we will take a look at each of them in more detail. + + ### None Selection diff --git a/docs/xplat/scripts/generate.mjs b/docs/xplat/scripts/generate.mjs index 679ba03774..8f96e7a92a 100644 --- a/docs/xplat/scripts/generate.mjs +++ b/docs/xplat/scripts/generate.mjs @@ -339,6 +339,8 @@ function transformMdxFile(content) { content = content.replace(/^import PlatformBlock from '[^']+';?\r?\n/m, ''); // 3. Resolve all tokens ({Platform}, {ProductName}, etc.) in both frontmatter and body. content = applyReplacements(content); + // 4. Collapse excessive blank lines left by stripped PlatformBlocks + content = normalise(content); return content; } @@ -355,7 +357,7 @@ function transformMdxFile(content) { // --------------------------------------------------------------------------- function normalise(content) { - return content.replace(/\n{3,}/g, '\n\n').trim() + '\n'; + return content.replace(/(\r?\n){3,}/g, '\n\n').trim() + '\n'; } /** @@ -562,8 +564,9 @@ function expandSharedFiles(sharedSrcDir, gridsOutDir) { return `${open}${fm}${close}`; }); - // 5. Normalize image paths + // 5. Normalize image paths and collapse excessive blank lines content = normalizeImagePaths(content); + content = normalise(content); // 6. Check exclusion before writing const slug = `grids/${comp.outDir}/${entry.replace(/\.mdx?$/, '')}`; diff --git a/docs/xplat/src/content/en/components/grids/data-grid.mdx b/docs/xplat/src/content/en/components/grids/data-grid.mdx index 87a156cc2a..847ad7c414 100644 --- a/docs/xplat/src/content/en/components/grids/data-grid.mdx +++ b/docs/xplat/src/content/en/components/grids/data-grid.mdx @@ -76,22 +76,21 @@ In this {ProductName} Grid example, you can see how users can do both basic and ### Dependencies -To get started with the {Platform} Data Grid, first you need to install the -{PackageCommon} package. +To get started with the {Platform} Data Grid, first you need to install the {PackageCommon} package. -`{PackageGrids}` package. +To get started with the {Platform} Data Grid, first you need to install the `{PackageGrids}` package. -`{PackageCommon}` and `{PackageGrids}` packages. +To get started with the {Platform} Data Grid, first you need to install the `{PackageCommon}` and `{PackageGrids}` packages. diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx index cfab809aad..edb422d200 100644 --- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx @@ -30,22 +30,21 @@ In this {Platform} grid example you can see how users can visualize hierarchical ### Dependencies -To get started with the {Platform} hierarchical grid, first you need to install the -{PackageCommon} package. +To get started with the {Platform} hierarchical grid, first you need to install the {PackageCommon} package. -`{PackageGrids}` package. +To get started with the {Platform} hierarchical grid, first you need to install the `{PackageGrids}` package. -`{PackageCommon}` and `{PackageGrids}` packages. +To get started with the {Platform} hierarchical grid, first you need to install the `{PackageCommon}` and `{PackageGrids}` packages. diff --git a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx index 8ec8665f47..fd54934472 100644 --- a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx @@ -34,22 +34,21 @@ In this example, you can see how users can manipulate hierarchical or flat data. Getting started with our {Platform} Grid library and the {Platform} Tree Grid in particular is the first step to building powerful, data-rich applications that display hierarchical information in a clear and interactive way. The {Platform} Tree Grid allows you to present parent-child data structures in a familiar tabular format, complete with features like row expansion, sorting, filtering, editing, and virtualization for high performance with large datasets. -To get started with the {Platform} tree grid, first you need to install the -{PackageCommon} package. +To get started with the {Platform} tree grid, first you need to install the {PackageCommon} package. -`{PackageGrids}` package. +To get started with the {Platform} tree grid, first you need to install the `{PackageGrids}` package. -`{PackageCommon}` and `{PackageGrids}` packages. +To get started with the {Platform} tree grid, first you need to install the `{PackageCommon}` and `{PackageGrids}` packages. diff --git a/docs/xplat/src/content/en/components/inputs/button.mdx b/docs/xplat/src/content/en/components/inputs/button.mdx index 7e907b4752..dbb5ebc163 100644 --- a/docs/xplat/src/content/en/components/inputs/button.mdx +++ b/docs/xplat/src/content/en/components/inputs/button.mdx @@ -12,19 +12,17 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Button Overview -The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button -OnClick event +The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button OnClick event, toggle the {Platform} button, disable the {Platform} button, and more. -clicked callback +The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button clicked callback, toggle the {Platform} button, disable the {Platform} button, and more. -, toggle the {Platform} button, disable the {Platform} button, and more. ## {Platform} Button Example diff --git a/docs/xplat/src/content/en/components/interactivity/chat.mdx b/docs/xplat/src/content/en/components/interactivity/chat.mdx index 0458b41ce7..328cb63068 100644 --- a/docs/xplat/src/content/en/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/en/components/interactivity/chat.mdx @@ -484,19 +484,18 @@ In this setup: This approach gives you full flexibility over the chat input bar, letting you add, remove, or reorder actions without rebuilding the input area from scratch. ### Markdown Rendering -The Chat component includes built-in support for Markdown content through the `createMarkdownRenderer` helper, which is exported from the + - `igniteui-webcomponents/extras` +The Chat component includes built-in support for Markdown content through the `createMarkdownRenderer` helper, which is exported from the `igniteui-webcomponents/extras` entry point of the main package. This allows you to display messages with formatted text, links, lists, and even syntax-highlighted code blocks, while ensuring that all rendered HTML is sanitized for security. - `igniteui-react/extras` +The Chat component includes built-in support for Markdown content through the `createMarkdownRenderer` helper, which is exported from the `igniteui-react/extras` entry point of the main package. This allows you to display messages with formatted text, links, lists, and even syntax-highlighted code blocks, while ensuring that all rendered HTML is sanitized for security. - entry point of the main package. This allows you to display messages with formatted text, links, lists, and even syntax-highlighted code blocks, while ensuring that all rendered HTML is sanitized for security. To use the Markdown renderer, you need to install the following peer dependencies in your project: diff --git a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx index 379b037126..5a4fa7929c 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx @@ -17,22 +17,17 @@ The {ProductName} Date Picker is a feature rich component used for entering a da The {ProductName} Date Picker Component lets users pick a single date through a month-view calendar dropdown or editable input field. The {Platform} Date Picker also supports a dialog mode for selection from the calendar only, locale-aware and customizable date formatting and validation integration. - + -The is a brand new component from {ProductName} version +The is a brand new component from {ProductName} version 5.0.0. The old prior to this version has been renamed to `XDatePicker` and its respective documentation page can be found under "Deprecated Components" - - -5.0.0 - - -18.7.0 - + +The is a brand new component from {ProductName} version 18.7.0. The old prior to this version has been renamed to `XDatePicker` and its respective documentation page can be found under "Deprecated Components" + -. The old prior to this version has been renamed to `XDatePicker` and its respective documentation page can be found under "Deprecated Components" ## {Platform} Date Picker Example diff --git a/docs/xplat/src/content/jp/components/grids/data-grid.mdx b/docs/xplat/src/content/jp/components/grids/data-grid.mdx index 0dc752b6e0..510ca1a9d3 100644 --- a/docs/xplat/src/content/jp/components/grids/data-grid.mdx +++ b/docs/xplat/src/content/jp/components/grids/data-grid.mdx @@ -78,15 +78,18 @@ import landingGridPage from '@xplat-images/general/landing-grid-page.png'; ### 依存関係 -{Platform} Data Grid を初期化するには、{PackageCommon} パッケージ`{PackageGrids}` パッケージ`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 +{Platform} Data Grid を初期化するには、{PackageCommon} パッケージをインストールする必要があります。 + IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。 +{Platform} Data Grid を初期化するには、`{PackageGrids}` パッケージをインストールする必要があります。 + - [作業の開始](../general-getting-started-blazor-client.md) - [NuGet パッケージの追加](../general-nuget-feed.md) @@ -94,6 +97,8 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック +{Platform} Data Grid を初期化するには、`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 + また、グリッドに必要なスタイルを提供するために、アプリケーションの index.html ファイルに次の CSS リンクを含める必要があります: diff --git a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx index 22dae6be70..bb2f9fd309 100644 --- a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx @@ -29,15 +29,18 @@ import unfoldLessIconScreenshot from '@xplat-images/unfold_less_icon_screenshot. ### 依存関係 -{Platform} 階層グリッドを初期化するには、{PackageCommon} パッケージ`{PackageGrids}` パッケージ`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 +{Platform} 階層グリッドを初期化するには、{PackageCommon} パッケージをインストールする必要があります。 + IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。 +{Platform} 階層グリッドを初期化するには、`{PackageGrids}` パッケージをインストールする必要があります。 + - [作業の開始](../../general-getting-started-blazor-client.md) - [NuGet パッケージの追加](../../general-nuget-feed.md) @@ -45,6 +48,8 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック +{Platform} 階層グリッドを初期化するには、`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 + また、階層グリッドに必要なスタイルを提供するために、アプリケーションの index.html ファイルに次の CSS リンクを含める必要があります: diff --git a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx index 7a812fbd0c..9a08c5251c 100644 --- a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx @@ -32,15 +32,18 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {Platform} Grid ライブラリ、特に {Platform} Tree Grid の使用を開始することは、階層情報を明確かつインタラクティブに表示する強力なデータ駆動型アプリケーションを構築する最初のステップです。{Platform} Tree Grid を使用して、親子構造のデータを慣れ親しんだ表形式で表示でき、行の展開、ソート、フィルタリング、編集、大規模データセットに対応した仮想化などの機能を備えています。 -{Platform} ツリー グリッドを初期化するには、{PackageCommon} パッケージ`{PackageGrids}` パッケージ`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 +{Platform} ツリー グリッドを初期化するには、{PackageCommon} パッケージをインストールする必要があります。 + IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。 +{Platform} ツリー グリッドを初期化するには、`{PackageGrids}` パッケージをインストールする必要があります。 + - [作業の開始](../../general-getting-started-blazor-client.md) - [NuGet パッケージの追加](../../general-nuget-feed.md) @@ -48,6 +51,8 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック +{Platform} ツリー グリッドを初期化するには、`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 + また、ツリー グリッドに必要なスタイルを提供するために、アプリケーションの index.html ファイルに次の CSS リンクを含める必要があります: diff --git a/docs/xplat/src/content/jp/components/inputs/button.mdx b/docs/xplat/src/content/jp/components/inputs/button.mdx index a5d8cb7e21..ece806ccf8 100644 --- a/docs/xplat/src/content/jp/components/inputs/button.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button.mdx @@ -12,19 +12,17 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Button (ボタン) の概要 -{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、{Platform} Button OnClick イベントクリックされたコールバック、{Platform} ボタンの切り替え、{Platform} ボタンの無効化などを通じて柔軟性を提供します。 -OnClick event +{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、{Platform} Button OnClick イベント、{Platform} ボタンの切り替え、{Platform} ボタンの無効化などを通じて柔軟性を提供します。 -clicked callback +{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、{Platform} Button クリックされたコールバック、{Platform} ボタンの切り替え、{Platform} ボタンの無効化などを通じて柔軟性を提供します。 -, toggle the {Platform} button, disable the {Platform} button, and more. ## {Platform} Button の例 diff --git a/docs/xplat/src/content/jp/components/interactivity/chat.mdx b/docs/xplat/src/content/jp/components/interactivity/chat.mdx index 2658d2b5fd..ed121a8797 100644 --- a/docs/xplat/src/content/jp/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/chat.mdx @@ -469,7 +469,18 @@ const options = { この方法により、チャット入力バーの柔軟性が完全に向上し、入力領域を最初から再構築することなく、アクションを追加、削除、または並べ替えることができます。 ### Markdown レンダリング -Chat コンポーネントは `igniteui-webcomponents/extras` `igniteui-react/extras` からエクスポートされる `createMarkdownRenderer` ヘルパーを通じて Markdown をサポートします。これにより、書式付きテキスト、リンク、リスト、シンタックス ハイライト付きコードブロックを表示しつつ、安全に HTML をサニタイズできます。 + + + +Chat コンポーネントは `igniteui-webcomponents/extras` からエクスポートされる `createMarkdownRenderer` ヘルパーを通じて Markdown をサポートします。これにより、書式付きテキスト、リンク、リスト、シンタックス ハイライト付きコードブロックを表示しつつ、安全に HTML をサニタイズできます。 + + + + + +Chat コンポーネントは `igniteui-react/extras` からエクスポートされる `createMarkdownRenderer` ヘルパーを通じて Markdown をサポートします。これにより、書式付きテキスト、リンク、リスト、シンタックス ハイライト付きコードブロックを表示しつつ、安全に HTML をサニタイズできます。 + + diff --git a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx index 5678538b8a..4861ad9fc3 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx @@ -17,21 +17,17 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {ProductName} Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。{Platform} Date Picker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。 + - コンポーネントは、{ProductName} のバージョン 5.0.018.7.0 以降の新しいコンポーネントです。このバージョンより前の古い は `XDatePicker` に名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。 + コンポーネントは、{ProductName} のバージョン 5.0.0 以降の新しいコンポーネントです。このバージョンより前の古い は `XDatePicker` に名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。 - - -5.0.0 - - -18.7.0 - + + コンポーネントは、{ProductName} のバージョン 18.7.0 以降の新しいコンポーネントです。このバージョンより前の古い は `XDatePicker` に名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。 + -. The old prior to this version has been renamed to `XDatePicker` and its respective documentation page can be found under "Deprecated Components" ## {Platform} Date Picker の例 From 3ab78dc10e424d8a5d208d913709b68d3fe0ec91 Mon Sep 17 00:00:00 2001 From: Viktor Kombov Date: Wed, 27 May 2026 11:29:06 +0300 Subject: [PATCH 2/6] fix(mdx): remove reference to removed page --- .../content/en/components/scheduling/date-picker.mdx | 12 ------------ .../content/jp/components/scheduling/date-picker.mdx | 12 ------------ 2 files changed, 24 deletions(-) diff --git a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx index bcca905544..ba3f497ec4 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx @@ -17,18 +17,6 @@ The {ProductName} Date Picker is a feature rich component used for entering a da The {ProductName} Date Picker Component lets users pick a single date through a month-view calendar dropdown or editable input field. The {Platform} Date Picker also supports a dialog mode for selection from the calendar only, locale-aware and customizable date formatting and validation integration. - - -The is a brand new component from {ProductName} version 5.0.0. The old prior to this version has been renamed to `XDatePicker` and its respective documentation page can be found under "Deprecated Components" - - - - - -The is a brand new component from {ProductName} version 18.7.0. The old prior to this version has been renamed to `XDatePicker` and its respective documentation page can be found under "Deprecated Components" - - - ## {Platform} Date Picker Example Below you can see a sample that demonstrates how the Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it. diff --git a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx index bf73930799..f63aada95c 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx @@ -17,18 +17,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {ProductName} Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。{Platform} Date Picker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。 - - - コンポーネントは、{ProductName} のバージョン 5.0.0 以降の新しいコンポーネントです。このバージョンより前の古い は `XDatePicker` に名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。 - - - - - - コンポーネントは、{ProductName} のバージョン 18.7.0 以降の新しいコンポーネントです。このバージョンより前の古い は `XDatePicker` に名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。 - - - ## {Platform} Date Picker の例 以下は、ユーザーが手動のテキスト入力で日付を選択し、左側のカレンダー アイコンをクリックしてナビゲートできるようになったときに、Date Picker がどのように機能するかを示すサンプルです。描画する方法は以下のとおりです。 From 3c26c429ae0733f2829cf6e74cc0528992f7c9fc Mon Sep 17 00:00:00 2001 From: Viktor Kombov Date: Thu, 28 May 2026 11:37:27 +0300 Subject: [PATCH 3/6] Fix cross-platform ApiLink resolution --- .github/skills/xplat-docs-api-links/SKILL.md | 53 +- .../skills/xplat-docs-platform-block/SKILL.md | 18 + .../content/en/components/bullet-graph.mdx | 131 +++++ .../en/components/charts/chart-api.mdx | 8 + .../en/components/charts/chart-features.mdx | 1 + .../en/components/charts/chart-overview.mdx | 57 +++ .../charts/features/chart-animations.mdx | 4 + .../charts/features/chart-annotations.mdx | 36 ++ .../charts/features/chart-axis-gridlines.mdx | 10 + .../charts/features/chart-axis-layouts.mdx | 17 + .../charts/features/chart-axis-options.mdx | 21 + .../charts/features/chart-axis-types.mdx | 9 + .../features/chart-data-aggregations.mdx | 11 + .../features/chart-data-annotations.mdx | 8 + .../charts/features/chart-data-filtering.mdx | 4 + .../charts/features/chart-data-legend.mdx | 19 + .../charts/features/chart-data-selection.mdx | 8 +- .../charts/features/chart-data-tooltip.mdx | 18 + .../features/chart-highlight-filter.mdx | 9 +- .../charts/features/chart-highlighting.mdx | 8 + .../charts/features/chart-markers.mdx | 6 + .../charts/features/chart-navigation.mdx | 5 + .../charts/features/chart-overlays.mdx | 10 + .../charts/features/chart-performance.mdx | 81 +++ .../charts/features/chart-synchronization.mdx | 2 + .../charts/features/chart-titles.mdx | 4 + .../charts/features/chart-tooltips.mdx | 8 + .../charts/features/chart-trendlines.mdx | 6 + .../features/chart-user-annotations.mdx | 14 +- .../en/components/charts/types/area-chart.mdx | 41 ++ .../en/components/charts/types/bar-chart.mdx | 17 + .../components/charts/types/bubble-chart.mdx | 12 + .../components/charts/types/column-chart.mdx | 30 ++ .../charts/types/composite-chart.mdx | 4 + .../charts/types/data-pie-chart.mdx | 8 + .../components/charts/types/donut-chart.mdx | 8 + .../en/components/charts/types/line-chart.mdx | 27 + .../en/components/charts/types/pie-chart.mdx | 27 +- .../components/charts/types/point-chart.mdx | 13 + .../components/charts/types/polar-chart.mdx | 19 + .../components/charts/types/radial-chart.mdx | 15 + .../components/charts/types/scatter-chart.mdx | 19 + .../components/charts/types/shape-chart.mdx | 7 + .../charts/types/sparkline-chart.mdx | 19 + .../components/charts/types/spline-chart.mdx | 18 + .../components/charts/types/stacked-chart.mdx | 51 ++ .../en/components/charts/types/step-chart.mdx | 10 + .../components/charts/types/stock-chart.mdx | 19 + .../components/charts/types/treemap-chart.mdx | 10 + .../content/en/components/dashboard-tile.mdx | 28 +- .../components/excel-library-using-cells.mdx | 32 ++ .../components/excel-library-using-tables.mdx | 13 + .../excel-library-using-workbooks.mdx | 15 + .../excel-library-using-worksheets.mdx | 35 ++ .../excel-library-working-with-charts.mdx | 5 + .../excel-library-working-with-grids.mdx | 3 + .../excel-library-working-with-sparklines.mdx | 7 + .../content/en/components/excel-library.mdx | 31 ++ .../content/en/components/excel-utility.mdx | 13 + .../en/components/general-changelog-dv.mdx | 27 +- .../components/geo-map-binding-data-csv.mdx | 25 + .../geo-map-binding-data-json-points.mdx | 22 + .../components/geo-map-binding-data-model.mdx | 22 + .../geo-map-binding-data-overview.mdx | 2 + .../geo-map-binding-multiple-shapes.mdx | 67 ++- .../geo-map-binding-multiple-sources.mdx | 45 ++ .../components/geo-map-binding-shp-file.mdx | 29 +- .../geo-map-display-azure-imagery.mdx | 34 ++ .../geo-map-display-bing-imagery.mdx | 13 + .../geo-map-display-esri-imagery.mdx | 29 ++ .../geo-map-display-heat-imagery.mdx | 52 +- .../geo-map-display-imagery-types.mdx | 1 + .../geo-map-display-osm-imagery.mdx | 21 + .../en/components/geo-map-navigation.mdx | 13 + .../en/components/geo-map-resources-esri.mdx | 3 + ...eo-map-resources-shape-styling-utility.mdx | 9 + .../geo-map-resources-world-connections.mdx | 3 + .../geo-map-resources-world-locations.mdx | 3 + .../geo-map-resources-world-util.mdx | 3 + .../geo-map-shape-files-reference.mdx | 4 + .../en/components/geo-map-shape-styling.mdx | 45 ++ .../geo-map-type-scatter-area-series.mdx | 31 +- .../geo-map-type-scatter-bubble-series.mdx | 30 ++ .../geo-map-type-scatter-contour-series.mdx | 28 + .../geo-map-type-scatter-density-series.mdx | 30 ++ .../geo-map-type-scatter-symbol-series.mdx | 31 +- .../en/components/geo-map-type-series.mdx | 3 + .../geo-map-type-shape-polygon-series.mdx | 31 +- .../geo-map-type-shape-polyline-series.mdx | 31 +- .../src/content/en/components/geo-map.mdx | 36 ++ .../en/components/inputs/color-editor.mdx | 41 ++ .../accessibility-compliance.mdx | 4 + .../content/en/components/linear-gauge.mdx | 130 +++++ .../content/en/components/maps/map-api.mdx | 5 +- .../content/en/components/menus/toolbar.mdx | 142 ++++-- .../content/en/components/radial-gauge.mdx | 146 ++++++ .../en/components/spreadsheet-activation.mdx | 17 +- .../components/spreadsheet-chart-adapter.mdx | 23 +- .../en/components/spreadsheet-clipboard.mdx | 18 +- .../en/components/spreadsheet-commands.mdx | 22 + .../spreadsheet-conditional-formatting.mdx | 12 + .../en/components/spreadsheet-configuring.mdx | 90 +++- .../spreadsheet-data-validation.mdx | 12 + .../en/components/spreadsheet-hyperlinks.mdx | 12 + .../en/components/spreadsheet-overview.mdx | 30 ++ .../en/components/zoomslider-overview.mdx | 31 ++ .../charts/features/chart-data-selection.mdx | 12 +- .../charts/features/chart-markers.mdx | 10 + .../features/chart-user-annotations.mdx | 10 +- .../jp/components/charts/types/pie-chart.mdx | 7 +- .../content/jp/components/dashboard-tile.mdx | 9 +- .../jp/components/general-changelog-dv.mdx | 16 +- .../components/geo-map-binding-shp-file.mdx | 19 +- .../geo-map-display-azure-imagery.mdx | 14 +- .../geo-map-display-bing-imagery.mdx | 7 +- .../geo-map-display-esri-imagery.mdx | 14 +- .../geo-map-display-heat-imagery.mdx | 23 +- .../jp/components/geo-map-resources-esri.mdx | 7 +- .../content/jp/components/menus/toolbar.mdx | 76 +-- .../jp/components/spreadsheet-activation.mdx | 11 +- .../components/spreadsheet-chart-adapter.mdx | 9 +- .../jp/components/spreadsheet-clipboard.mdx | 4 +- .../jp/components/spreadsheet-configuring.mdx | 20 +- docs/xplat/scripts/generate.mjs | 7 +- .../charts/features/chart-data-selection.mdx | 2 +- .../features/chart-user-annotations.mdx | 10 +- .../en/components/charts/types/pie-chart.mdx | 2 +- .../content/en/components/dashboard-tile.mdx | 6 +- .../general-changelog-dv-blazor.mdx | 381 +++++++++----- .../components/general-changelog-dv-react.mdx | 150 +++--- .../en/components/general-changelog-dv-wc.mdx | 459 ++++++++++------- .../en/components/general-changelog-dv.mdx | 16 +- .../components/grids/_shared/cell-editing.mdx | 2 +- .../components/grids/_shared/cell-merging.mdx | 2 +- .../grids/_shared/column-moving.mdx | 2 +- .../grids/_shared/column-selection.mdx | 2 +- .../components/grids/_shared/column-types.mdx | 6 +- .../en/components/grids/_shared/editing.mdx | 16 +- .../en/components/grids/_shared/filtering.mdx | 4 +- .../grids/_shared/keyboard-navigation.mdx | 6 +- .../grids/_shared/remote-data-operations.mdx | 4 +- .../components/grids/_shared/row-adding.mdx | 29 +- .../components/grids/_shared/row-pinning.mdx | 36 +- .../grids/_shared/row-selection.mdx | 34 +- .../en/components/grids/_shared/search.mdx | 8 +- .../en/components/grids/_shared/sorting.mdx | 4 +- .../grids/_shared/state-persistence.mdx | 50 +- .../en/components/grids/_shared/summaries.mdx | 38 +- .../components/grids/_shared/validation.mdx | 10 +- .../content/en/components/grids/data-grid.mdx | 26 +- .../en/components/grids/grid/groupby.mdx | 12 +- .../components/grids/grid/master-detail.mdx | 2 +- .../grids/grid/selection-based-aggregates.mdx | 2 +- .../grids/hierarchical-grid/overview.mdx | 8 +- .../src/content/en/components/grids/list.mdx | 26 +- .../components/grids/pivot-grid/overview.mdx | 163 +++--- .../grids/pivot-grid/remote-operations.mdx | 18 +- .../components/grids/tree-grid/overview.mdx | 8 +- .../src/content/en/components/grids/tree.mdx | 40 +- .../src/content/en/components/inputs/chip.mdx | 2 +- .../components/inputs/circular-progress.mdx | 2 +- .../en/components/inputs/combo/features.mdx | 18 +- .../en/components/inputs/combo/overview.mdx | 36 +- .../en/components/inputs/date-time-input.mdx | 10 +- .../content/en/components/inputs/dropdown.mdx | 8 +- .../en/components/inputs/file-input.mdx | 22 +- .../en/components/inputs/linear-progress.mdx | 2 +- .../en/components/inputs/mask-input.mdx | 2 +- .../content/en/components/inputs/radio.mdx | 22 +- .../content/en/components/inputs/rating.mdx | 20 +- .../content/en/components/inputs/ripple.mdx | 14 +- .../content/en/components/inputs/select.mdx | 14 +- .../content/en/components/inputs/slider.mdx | 32 +- .../content/en/components/inputs/switch.mdx | 18 +- .../content/en/components/inputs/tooltip.mdx | 82 +-- .../content/en/components/layouts/card.mdx | 24 +- .../en/components/layouts/carousel.mdx | 8 +- .../en/components/layouts/dock-manager.mdx | 76 +-- .../en/components/layouts/splitter.mdx | 22 +- .../content/en/components/layouts/stepper.mdx | 42 +- .../content/en/components/layouts/tabs.mdx | 14 +- .../en/components/layouts/tile-manager.mdx | 20 +- .../en/components/menus/navigation-drawer.mdx | 14 +- .../content/en/components/menus/toolbar.mdx | 72 +-- .../en/components/notifications/banner.mdx | 30 +- .../en/components/notifications/snackbar.mdx | 12 +- .../en/components/scheduling/calendar.mdx | 44 +- .../en/components/scheduling/date-picker.mdx | 32 +- .../scheduling/date-range-picker.mdx | 48 +- .../en/components/spreadsheet-activation.mdx | 11 +- .../components/spreadsheet-chart-adapter.mdx | 13 +- .../en/components/spreadsheet-clipboard.mdx | 4 +- .../en/components/spreadsheet-configuring.mdx | 21 +- .../spreadsheet-data-validation.mdx | 2 +- .../charts/features/chart-data-selection.mdx | 2 +- .../features/chart-user-annotations.mdx | 10 +- .../jp/components/charts/types/pie-chart.mdx | 2 +- .../content/jp/components/dashboard-tile.mdx | 6 +- .../general-changelog-dv-blazor.mdx | 322 +++++++----- .../components/general-changelog-dv-react.mdx | 118 ++--- .../jp/components/general-changelog-dv-wc.mdx | 480 ++++++++++-------- .../jp/components/general-changelog-dv.mdx | 16 +- .../components/geo-map-binding-shp-file.mdx | 16 +- .../geo-map-display-azure-imagery.mdx | 4 +- .../geo-map-display-bing-imagery.mdx | 2 +- .../geo-map-display-esri-imagery.mdx | 4 +- .../geo-map-display-heat-imagery.mdx | 21 +- .../jp/components/geo-map-resources-esri.mdx | 4 +- .../grids/_shared/cascading-combos.mdx | 4 +- .../components/grids/_shared/cell-merging.mdx | 2 +- .../grids/_shared/clipboard-interactions.mdx | 16 +- .../grids/_shared/column-moving.mdx | 6 +- .../grids/_shared/column-selection.mdx | 2 +- .../components/grids/_shared/column-types.mdx | 6 +- .../jp/components/grids/_shared/editing.mdx | 16 +- .../jp/components/grids/_shared/filtering.mdx | 4 +- .../grids/_shared/keyboard-navigation.mdx | 8 +- .../grids/_shared/remote-data-operations.mdx | 16 +- .../components/grids/_shared/row-adding.mdx | 22 +- .../components/grids/_shared/row-pinning.mdx | 17 +- .../grids/_shared/row-selection.mdx | 48 +- .../jp/components/grids/_shared/sorting.mdx | 4 +- .../grids/_shared/state-persistence.mdx | 42 +- .../jp/components/grids/_shared/summaries.mdx | 40 +- .../components/grids/_shared/validation.mdx | 10 +- .../content/jp/components/grids/data-grid.mdx | 26 +- .../jp/components/grids/grid/groupby.mdx | 14 +- .../components/grids/grid/master-detail.mdx | 2 +- .../grids/grid/selection-based-aggregates.mdx | 2 +- .../grids/hierarchical-grid/overview.mdx | 8 +- .../src/content/jp/components/grids/list.mdx | 26 +- .../components/grids/pivot-grid/overview.mdx | 163 +++--- .../grids/pivot-grid/remote-operations.mdx | 16 +- .../components/grids/tree-grid/overview.mdx | 8 +- .../src/content/jp/components/grids/tree.mdx | 40 +- .../src/content/jp/components/inputs/chip.mdx | 2 +- .../jp/components/inputs/combo/features.mdx | 18 +- .../jp/components/inputs/combo/overview.mdx | 34 +- .../jp/components/inputs/date-time-input.mdx | 10 +- .../content/jp/components/inputs/dropdown.mdx | 8 +- .../jp/components/inputs/file-input.mdx | 18 +- .../jp/components/inputs/linear-progress.mdx | 2 +- .../jp/components/inputs/mask-input.mdx | 2 +- .../content/jp/components/inputs/radio.mdx | 22 +- .../content/jp/components/inputs/rating.mdx | 20 +- .../content/jp/components/inputs/ripple.mdx | 14 +- .../content/jp/components/inputs/select.mdx | 14 +- .../content/jp/components/inputs/slider.mdx | 28 +- .../content/jp/components/inputs/switch.mdx | 16 +- .../content/jp/components/inputs/tooltip.mdx | 82 +-- .../content/jp/components/layouts/card.mdx | 24 +- .../jp/components/layouts/carousel.mdx | 8 +- .../jp/components/layouts/dock-manager.mdx | 74 +-- .../content/jp/components/layouts/stepper.mdx | 36 +- .../content/jp/components/layouts/tabs.mdx | 14 +- .../jp/components/layouts/tile-manager.mdx | 20 +- .../content/jp/components/menus/navbar.mdx | 16 +- .../jp/components/menus/navigation-drawer.mdx | 12 +- .../content/jp/components/menus/toolbar.mdx | 72 +-- .../jp/components/notifications/banner.mdx | 20 +- .../jp/components/notifications/snackbar.mdx | 12 +- .../jp/components/scheduling/calendar.mdx | 60 +-- .../jp/components/scheduling/date-picker.mdx | 36 +- .../scheduling/date-range-picker.mdx | 68 +-- .../jp/components/spreadsheet-activation.mdx | 11 +- .../components/spreadsheet-chart-adapter.mdx | 9 +- .../jp/components/spreadsheet-clipboard.mdx | 4 +- .../jp/components/spreadsheet-configuring.mdx | 20 +- .../spreadsheet-data-validation.mdx | 2 +- .../content/jp/components/update-guide.mdx | 6 +- mdx-link-report-angular.md | 4 +- mdx-link-report-blazor.md | 4 +- mdx-link-report-react.md | 4 +- mdx-link-report-wc.md | 4 +- scripts/check-mdx-links.mjs | 131 +++-- src/lib/platform-context.ts | 6 +- 276 files changed, 5418 insertions(+), 2396 deletions(-) diff --git a/.github/skills/xplat-docs-api-links/SKILL.md b/.github/skills/xplat-docs-api-links/SKILL.md index 346fcb8dd3..55e37a58af 100644 --- a/.github/skills/xplat-docs-api-links/SKILL.md +++ b/.github/skills/xplat-docs-api-links/SKILL.md @@ -75,8 +75,6 @@ Each JSON file is a TypeDoc reflection tree. Top-level `children` contains all e | `prefixed` | no | Default `true` — adds `Igr`/`Igx`/`Igc`/`Igb` automatically. Set `false` when `type` contains `{ComponentName}` or the name is already fully-qualified. **Always `false` for excel types.** | | `suffix` | no | Default `true` — appends `Component` suffix for Angular DV packages. Set `false` for utility classes (FilteringOperand, SortingStrategy, SummaryOperand, all excel types). | | `exclude` | no | Comma-separated platform list (`"Angular"`, `"Blazor"`, etc.). On listed platforms the symbol renders as inline code (backticks) instead of a link. Use when the type/member genuinely **does not exist** on those platforms. **Preferred over wrapping a single `` in a ``** for the sole purpose of platform-omission. | -| `excludeSuffixFor` | no | Comma-separated platform list. On listed platforms the package `classSuffix` (e.g. `Component`) is **not** appended, overriding the per-package default. Use when the same type is a plain class on some platforms (e.g. `IgxChartSelection`) but a `Component`-suffixed class on others. **Generates a real link — combine with `exclude` if the type is also absent on other platforms.** | -| `excludePrefixFor` | no | Comma-separated platform list. On listed platforms the platform prefix (`Igr`/`Igx`/`Igc`/`Igb`) is **not** prepended. Use when a type has no prefix on certain platforms. **Generates a real link — combine with `exclude` if needed.** | | `label` | no | Override display text. | > **Critical rule:** NEVER replace an existing `` with backtick text. If a URL is broken on certain platforms, add `exclude="Platform"` to the tag. Only backtick text is acceptable when the type has no TypeDoc page on *any* platform AND has never been an ApiLink in the content history. When in doubt, keep the ApiLink — the broken link will be caught by `check-api-links.mjs` and fixed via `apply-excludes.mjs`. @@ -258,29 +256,62 @@ Angular's `grids` package appends `Component` to all **UI component** class name ``` -### Use `excludeSuffixFor=` when only some platforms use the suffix +### Use PlatformBlock when only some platforms use the suffix or prefix -When the suffix causes a 404 on **specific platforms only** (not globally), use `excludeSuffixFor` to remove it just for those platforms while keeping the link alive: +When `suffix={false}` or `prefixed={false}` is correct for **specific platforms only**, do **not** put that prop on a shared top-level ApiLink. Wrap each variant in a `PlatformBlock` so every platform gets exactly the ApiLink shape it needs: ```mdx - + ``` -The `check-mdx-links.mjs` script automatically suggests this fix when it detects a broken link that resolves correctly after stripping the suffix — look for `→ FIX: excludeSuffixFor="..."` in the output. - -Similarly, `excludePrefixFor` removes the platform prefix (`Igr`/`Igx`/`Igc`/`Igb`) for the listed platforms only: +Use the same pattern when only some platforms need `prefixed={false}`: ```mdx - + ``` +> **Do not use `excludeSuffixFor` or `excludePrefixFor` in MDX.** They should be migrated to explicit `PlatformBlock` variants. + > **Decision guide**: > - Symbol **doesn't exist** on a platform → `exclude="Platform"` -> - Symbol exists but URL has wrong suffix on those platforms → `excludeSuffixFor="Platform"` -> - Symbol exists but URL has wrong prefix on those platforms → `excludePrefixFor="Platform"` +> - Symbol exists but URL has wrong suffix on some platforms → `PlatformBlock` variants with `suffix={false}` only in the affected platform block +> - Symbol exists but URL has wrong prefix on some platforms → `PlatformBlock` variants with `prefixed={false}` only in the affected platform block > - `suffix={false}` / `prefixed={false}` → removes suffix/prefix globally (all platforms) +### When to use PlatformBlock for ApiLinks with different attributes + +When two platforms require **different attribute values** (including `suffix`, `prefixed`, `kind`, `pkg`, or `type` differences), wrap **both** ApiLinks in their own `` blocks. + +#### Anti-pattern (BUG — produces duplicate output on Blazor) + +```mdx + + +``` + +The `exclude="Blazor"` prop causes the first ApiLink to render as **backtick text** on Blazor (not hidden — just degraded to inline code). The PlatformBlock then renders the second ApiLink as a real link. Result: on Blazor the user sees both a broken inline-code snippet and a working link side by side. + +#### Correct pattern — both in PlatformBlocks + +```mdx + + +``` + +#### When to use which approach + +| Difference between platforms | Solution | +|---|---| +| Only `suffix` differs (e.g. one platform has no `Component` suffix) | Two ``-wrapped `` variants; put `suffix={false}` only in the affected block | +| Only `prefix` differs | Two ``-wrapped `` variants; put `prefixed={false}` only in the affected block | +| Type doesn't exist on a platform at all | Single `` with `exclude="Platform"` | +| `kind` differs (e.g. `interface` on Angular/React/WC, `class` on Blazor) | Two ``-wrapped `` tags | +| `kind` AND `suffix` differ | Two ``-wrapped `` tags | +| Any combination of multiple attribute differences | Two ``-wrapped `` tags | + +> **Rule:** Never combine `exclude="Platform"` on one ApiLink with a `` wrapping another ApiLink for the **same type**. The `exclude` prop does NOT hide the tag — it degrades it to inline code, producing duplicate visible output. + ### Classes that NEED `suffix={false}` - All `*FilteringOperand` classes: `BooleanFilteringOperand`, `NumberFilteringOperand`, `StringFilteringOperand`, `DateFilteringOperand`, `DateTimeFilteringOperand`, `TimeFilteringOperand` diff --git a/.github/skills/xplat-docs-platform-block/SKILL.md b/.github/skills/xplat-docs-platform-block/SKILL.md index e1f6b3b67f..096eec12a3 100644 --- a/.github/skills/xplat-docs-platform-block/SKILL.md +++ b/.github/skills/xplat-docs-platform-block/SKILL.md @@ -430,9 +430,27 @@ This renders a normal link on Angular/React/WebComponents and renders `MyType.so | Situation | Use | |---|---| | The same `` references something missing on N platforms (broken URL) | `exclude="P1,P2"` on the ApiLink | +| Only `suffix` or `prefix` differs on some platforms | One `` per ApiLink variant; use `suffix={false}` or `prefixed={false}` only in the affected platform block | | Different platforms need genuinely **different** ApiLinks (different `type`, `kind`, `member`, etc.) | One `` per variant (each containing its own ``) | | Surrounding **prose or code** also differs per platform | `` (regular usage) | +### Critical anti-pattern: `exclude` + PlatformBlock for the same type + +**Never** combine `exclude="Platform"` on one ApiLink with a `` wrapping another ApiLink for the **same type**. The `exclude` prop does NOT hide the tag — it degrades it to inline code (backticks). This produces duplicate visible output on the excluded platform (inline code + a link). + +```mdx + + +``` + +**Correct pattern** — wrap both variants in their own PlatformBlocks: + +```mdx + +``` + +This ensures each platform sees exactly one link. + ### Migration script `scripts/migrate-platformblock-to-exclude.mjs` automatically rewrites the anti-pattern (a `` containing only a single `` whose `for=` covers exactly N-1 of the 4 platforms) into ``. diff --git a/docs/angular/src/content/en/components/bullet-graph.mdx b/docs/angular/src/content/en/components/bullet-graph.mdx index 94204ed391..2332333174 100644 --- a/docs/angular/src/content/en/components/bullet-graph.mdx +++ b/docs/angular/src/content/en/components/bullet-graph.mdx @@ -21,11 +21,18 @@ The following sample demonstrates how setting multiple properties on the same + + +
The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the property. The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more. + + + + ## Dependencies When installing the gauge package, the core package must also be installed. @@ -34,10 +41,17 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-gauges ``` + + + ## Component Modules The requires the following modules: + + + + ```ts // app.module.ts import { IgxBulletGraphModule } from 'igniteui-angular-gauges'; @@ -52,12 +66,22 @@ import { IgxBulletGraphModule } from 'igniteui-angular-gauges'; export class AppModule {} ``` + + + + + + +
## Usage The following code walks through creating a bullet graph component, and configuring a performance bar, comparative measure marker, and three comparative ranges on the scale. + + + ```html ``` + + + + + + + +
## Comparative Measures @@ -87,6 +119,8 @@ The bullet graph can show two measures: performance value and target value. Performance value is the primary measure displayed by the component and it is visualized as a bar that stretches along the length of the whole graph. The target value is a measure which the performance value compares against. It is displayed as a small block that runs perpendicular to the orientation of the performance bar. + + ```html ``` + + + + + + + + + + ## Highlight Value The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the appear with a lower opacity. A good example is if is 50 and is set to 25. This would represent a performance of 50% regardless of what the value of is set to. To enable this first set to Overlay and then apply a to something lower than . + + ```html ``` + + + + + + + + + ## Comparative Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state. + + ```html ``` + + + + + + + + + + + ## Tick Marks The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph. - Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting their corresponding properties. - Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones. + + ```html ``` + + + + + + + + + + + ## Labels The labels indicate the measures on the scale. + + ```html ``` + + + + + + + + + + + ## Backing The backing element represents background and border of the bullet graph component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. + + ```html ``` + + + + + + + + + + + ## Scale The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using property) and all labels will be rendered from right-to-left instead of left-to-right. + + ```html ``` + + + + + + + + + + ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the bullet graph with all features and visuals enabled. + + ```html ``` + + + + + + + + + ## API References +

diff --git a/docs/angular/src/content/en/components/charts/chart-api.mdx b/docs/angular/src/content/en/components/charts/chart-api.mdx index 419aa6812b..0880c9e439 100644 --- a/docs/angular/src/content/en/components/charts/chart-api.mdx +++ b/docs/angular/src/content/en/components/charts/chart-api.mdx @@ -8,6 +8,7 @@ namespace: Infragistics.Controls.Charts --- import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # Angular Charts API The Ignite UI for Angular charts provide simple and easy to use APIs to plot your data in , , , , , , and UI elements. @@ -42,14 +43,17 @@ The Angular can use the following type |------------------|----------------| | -
-
-
-
-
-
-
-
-
-
-
- `RangeBarSeries`
-
| -
-
-
-
-
-
-
-
-
-


| + | Scatter Series | Financial Series | |----------------|------------------| | -
-
-
-
-
-
-
-
-

| -
-
-
-
-
-
-
-
-
- and [many more](types/stock-chart.md) | + | Radial Series | Polar Series | |---------------|--------------| | -
-
-
-

| -
-
-
-
-
| + ## Angular Data Legend API The Angular has the following API members: @@ -71,6 +75,7 @@ The Angular has the following API mem - - + ## Angular Donut Chart API The Angular has the following API members: @@ -119,3 +124,6 @@ You can find more information about charts in these topics: - [Chart Overview](chart-overview.md) - [Chart Features](chart-features.md) + + + diff --git a/docs/angular/src/content/en/components/charts/chart-features.mdx b/docs/angular/src/content/en/components/charts/chart-features.mdx index a8867365f4..95217dc53b 100644 --- a/docs/angular/src/content/en/components/charts/chart-features.mdx +++ b/docs/angular/src/content/en/components/charts/chart-features.mdx @@ -74,6 +74,7 @@ Use trendlines to identify a trend or find patterns in your data. There are many + ## API References
diff --git a/docs/angular/src/content/en/components/charts/chart-overview.mdx b/docs/angular/src/content/en/components/charts/chart-overview.mdx index 5eecfe33be..2ab4e2d0ae 100644 --- a/docs/angular/src/content/en/components/charts/chart-overview.mdx +++ b/docs/angular/src/content/en/components/charts/chart-overview.mdx @@ -63,6 +63,9 @@ The Angular Bar Chart, or Bar Graph is among the most common category chart type + + +
### Angular Pie Chart @@ -71,6 +74,9 @@ The Angular Pie Chart, or Pie Graph, is a very common part-to-whole chart type. + + +
### Angular Line Chart @@ -79,6 +85,9 @@ The Angular Line Chart, or Line Graph is a type of category line graph shows the + + +
### Angular Donut Chart @@ -87,6 +96,9 @@ The Angular Donut Chart or Donut Graph, is a variant of a Pie Chart, proportiona + + +
### Angular Area Chart @@ -95,6 +107,9 @@ The Angular Area Chart is rendered using a collection of points connected by str + + +
### Angular Sparkline Chart @@ -103,6 +118,9 @@ The Angular Sparkline Chart, or Sparkline Graph is a type of category graph inte + + +
### Angular Bubble Chart @@ -111,6 +129,9 @@ The Angular Bubble Chart, or Bubble Graph, is used to show data comprising of th + + +
### Angular Financial / Stock Chart @@ -119,6 +140,9 @@ The Angular Financial or Stock Chart, is a composite visualization that renders + + +
### Angular Column Chart @@ -127,6 +151,9 @@ The Angular Column Chart, or Column Graph is among the most common category char + + +
### Angular Composite Chart @@ -135,6 +162,9 @@ The Angular Composite Chart, also called a Combo Chart, is visualization that co + + +
{/* ### Angular Gantt Chart @@ -151,6 +181,9 @@ The Angular Polar Area Chart or Polar Graph belongs to a group of polar charts a + + +
{/* ### Angular Pyramid Chart @@ -163,6 +196,9 @@ The Angular Scatter Chart, or Scatter Graph, is used to show the relationship be + + +
### Angular Shape Chart @@ -171,6 +207,9 @@ The Angular Shape Charts is a group of chart that take array of shapes (array or + + +
### Angular Spline Chart @@ -179,6 +218,9 @@ The Angular Spline Chart, or Spline Graph is a type of category line graph shows + + +
### Angular Step Chart @@ -187,6 +229,9 @@ The Angular Step Chart, or Step Graph, is a category charts that renders a colle + + +
{/* ### Angular Timeline / Time-Series Charts @@ -199,6 +244,9 @@ The Ignite UI for Angular Treemap displays hierarchical (tree-structured) data a + + +
## Angular Charts Key Features @@ -251,6 +299,7 @@ Use one of 10 [Marker Types](features/chart-markers.md) or create your own [Mark Angular Charts Markers, Tooltips, and Templates + ## But Wait, There's More! If you are considering any other Angular Charts on the market, here are a few things to think about: @@ -262,11 +311,19 @@ If you are considering any other Angular Charts on the market, here are a few th - We are here 24x5. Infragistics has global support that is always online. For North America, Asia Pacific, Middle East, and Europe, we are on the clock when you are! - We have many more UI controls in Angular besides the Charts. We offer a complete Angular solution to build your applications! + + + - Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular. - We offer the world's first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Figma designs. With Indigo.Design, everything you craft in Figma from our Indigo Design System matches to our Ignite UI for Angular controls. + + + ## API References + +


diff --git a/docs/angular/src/content/en/components/charts/features/chart-animations.mdx b/docs/angular/src/content/en/components/charts/features/chart-animations.mdx index 91fb6d972a..7d47bace49 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-animations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-animations.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # Angular Chart Animations Animations allows you to ease-in the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the column series animates by rising from the x-axis, a line series animates by drawing from the origin of y-axis. @@ -21,6 +22,8 @@ The following example depicts a [Line Chart](../types/line-chart.md) with an ani + +
## Additional Resources @@ -31,6 +34,7 @@ You can find more information about related chart features in these topics: - [Chart Highlighting](chart-highlighting.md) - [Chart Tooltips](chart-tooltips.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx index 419d836219..8894759571 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # Angular Chart Annotations The Angular chart's hover interactions and annotations are implemented through hover interaction layers, which are series that are added to the series collection. These layers are dependent on the cursor position. Each of these annotation layers provides a different hover interaction that may be used individually or combined with others to provide powerful hover interactions. @@ -19,6 +20,8 @@ The following example demonstrates the annotation layers that are available on t + +
Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. @@ -42,6 +45,9 @@ The following example shows how to configure the crosshair layer but targeting a + + +
## Angular Final Value Layer @@ -60,8 +66,13 @@ The following example demonstrates how to style the final value layer annotation + + +
+ + ```html ``` + + + + + + + ## Angular Callout Layer The displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source. @@ -91,8 +109,13 @@ The following example demonstrates how to style the callout layer annotations by + + +
+ + ```html ``` + + + + + + + + + + + + ## API References +
diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx index 75a949c698..2b239d52c2 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls.Charts import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; + import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Axis Gridlines @@ -29,6 +30,9 @@ This example shows how configure the axis gridline to display major and minor gr + + +
## Angular Axis Gridlines Properties @@ -62,12 +66,14 @@ The following example demonstrates how to customize the gridlines by setting the + The axes of the also have the ability to place a dash array on the major and minor gridlines by utilizing the and properties, respectively. The actual axis line can be dashed as well by setting the property of the corresponding axis. These properties take an array of numbers that will describe the length of the dashes for the corresponding grid lines. The following example demonstrates a with the above dash array properties set: +
## Angular Axis Tickmarks Example @@ -80,6 +86,9 @@ The following example demonstrates how to customize the tickmarks by setting the + + +
## Angular Axis Tickmarks Properties @@ -92,6 +101,7 @@ You can customize how the axis tickmarks are displayed in our Angular chats by s | Tick Stroke Thickness | number |
| These properties set the thickness of the axis tick marks. | | Tick Stroke Length | number |
| These properties set the length of the axis tick marks. | + ## Additional Resources You can find more information about related chart features in these topics: diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx index cef36811fa..c0f90fa9af 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx @@ -8,6 +8,7 @@ mentionedTypes: [ "DomainChart", "CategoryChart", "XYChart", "DomainChart", "Dat import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; + import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Axis Layouts @@ -26,6 +27,9 @@ The following example depicts the amount of renewable electricity produced since + + + {/* ## Axis Orientation Example TODO add info/example of 4 charts with all possible combinations of XAxisInverted and YAxisInverted @@ -44,6 +48,9 @@ The following example depicts a stock price and trade volume chart with a [Stock + + +
### Axis Crossing Example @@ -54,8 +61,15 @@ The following example shows a Sin and Cos wave represented by a [Scatter Spline + + +
+ + + + ## Additional Resources You can find more information about related chart features in these topics: @@ -63,11 +77,13 @@ You can find more information about related chart features in these topics: - [Axis Gridlines](chart-axis-gridlines.md) - [Axis Options](chart-axis-options.md) + ## API References The following is a list of API members mentioned in the above sections: d in the above sections: + | | | | ------------------------------------------------------ | ------------------------------- | | -> -> | None | @@ -89,3 +105,4 @@ d in the above sections: | -> -> `labelSettings.verticalAlignment` | | | -> -> `labelSettings.visibility` | | | -> -> `labelSettings.visibility` | | */} + diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx index 7128d9f3c4..36e62eab3b 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # Angular Axis Options In all Ignite UI for Angular charts, the axes provide properties for visual configurations such as titles, labels, and ranges. These features are demonstrated in the examples provided below. @@ -19,14 +20,19 @@ The axis titles feature of the Angular charts, allows you to add contextual info +
+ ## Axis Labels Example The Angular Charts allows you full control over configuring, formatting, and styling the font of the labels displayed on an axis in your chart. You can change the rotation angle, margin, horizontal and vertical alignment, color, padding, and visibility of axis labels. The following example shows how to use these features of axes. + + +
## Axis Labels Management & Formatting @@ -45,6 +51,7 @@ The following example formats the yAxis with a `NumberFormatSpecifier` to repres +
## Axis Range Example @@ -55,8 +62,12 @@ By default, charts will calculate the minimum and maximum values for the numeric + + +
+ ## Axis Modes & Scale In the and controls, you can choose if your data is plotted on logarithmic scale along the y-axis when the property is set to true or on linear scale when this property is set to false (default value). With the property, you can change base of logarithmic scale from default value of 10 to other integer value. @@ -67,6 +78,9 @@ In addition to + + +
## Axis Gap Example @@ -81,6 +95,9 @@ The following example shows the average maximum temperature in Celsius in New Yo + + +
## Axis Overlap Example @@ -91,6 +108,9 @@ The following example shows a comparison of the highest grossing worldwide film + + +
## Additional Resources @@ -120,3 +140,4 @@ The following is a list of API members mentioned in the above sections: | -> -> `labelSettings.textColor` | `XAxisLabelForeground` | `XAxisLabelForeground` | | -> -> `labelSettings.visibility` | | | | -> -> `labelSettings.visibility` | | | + diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx index 5634516652..f95427e76c 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx @@ -8,6 +8,7 @@ namespace: Infragistics.Controls.Charts --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; + import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Axis Types @@ -33,6 +34,7 @@ The requires you to provide a `Dat + ### Category Y-Axis The works very similarly to the described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a `DataSource` and a in order to plot data with it. The is generally used with the to plot the following type of series: @@ -46,6 +48,7 @@ The works very similarly to the + ### Numeric X-Axis The treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the labels depends on the property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a . Alternatively, if combined with the , these labels will be placed corresponding to the of the , `RangeBarSeries`, , and . @@ -70,6 +73,7 @@ The is compatible with the followin + ### Numeric Y-Axis The treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the labels depends on the property of the various [ScatterSeries](../types/scatter-chart.md) that is supports if combined with a . Alternatively, if combined with the , these labels will be placed corresponding to the of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using. @@ -84,6 +88,7 @@ The is compatible with the followin + ### Time X Axis The treats its data as a sequence of data items, sorted by date. Labels on this axis type are dates and can be formatted and arranged according to date intervals. The date range of this axis is determined by the date values in a data column that is mapped using its . This, along with a `DataSource` is required to plot data with this axis type. @@ -122,6 +127,7 @@ The following example demonstrates usage of the + ### Proportional Category Angle Axis The treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers. @@ -132,6 +138,7 @@ The following example demonstrates usage of the + ### Numeric Angle Axis The treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the varies according to the value in the data column mapped using the property of the [Polar Series](../types/polar-chart.md) object or the property of the [Radial Series](../types/radial-chart.md) object. @@ -142,6 +149,7 @@ The following example demonstrates usage of the + ### Numeric Radius Axis The treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the `AngleMemberPath` property of the corresponding polar series. @@ -152,6 +160,7 @@ The following example demonstrates usage of the + ## Additional Resources You can find more information about related chart features in these topics: diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx index 175ac7554f..414247e37a 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # Angular Data Aggregations In the Ignite UI for Angular control Data Aggregations feature allows you to group data in the chart by unique values on the and then sort those groups. You may then apply summaries which will be reflected by the range of the and will be displayed in the tooltip when hovering the series. @@ -21,6 +22,9 @@ Note, the abbreviated functions found within the dropdowns for + + + ```html
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx index 96a377b62d..500430f681 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx @@ -10,6 +10,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; + import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Chart Data Annotations @@ -24,6 +25,7 @@ For example, you can annotates stock prices with stock events and patterns. + Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. ## Angular Data Annotation Slice Layer Example @@ -34,6 +36,7 @@ For example, you can use DataAnnotationSliceLayer to annotate stock prices with +
## Angular Data Annotation Strip Layer Example @@ -44,6 +47,7 @@ For example, you can use +
## Angular Data Annotation Line Layer Example @@ -54,6 +58,7 @@ For example, you can use DataAnnotationLineLayer to annotate growth and decline +
## Angular Data Annotation Rect Layer Example @@ -64,6 +69,7 @@ For example, you can use DataAnnotationRectLayer to annotate bearish patterns an +
## Angular Data Annotation Band Layer Example @@ -74,6 +80,7 @@ For example, you can use DataAnnotationBandLayer to annotate range of growth in +
## API References @@ -90,3 +97,4 @@ The following is a list of API members mentioned in the above sections: - | | | | : These properties specify what should annotation labels display on starting, ending, or center of the annotation shape, e.g. mapped data value, mapped data label, axis value, or hide a given annotation label. - : This property is a mapping to the data column representing the axis label for the starting position of , , on the y-axis. - : This property is a mapping to the data column representing the axis label for the ending position of , , on the y-axis. + diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx index e4b2806d14..97bf5d2468 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # Angular Chart Data Filtering Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart. @@ -25,6 +26,7 @@ The following example depicts a [Column Chart](../types/column-chart.md) of annu +
The property is a string that requires the following syntax in order to filter properly. The value requires sets of parentheses that include both the filter expression definition, column and value associated with the record(s) filtering in. @@ -37,6 +39,7 @@ eg. Concatenating more than one expression: "(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))" + ## Additional Resources You can find more information about related chart features in these topics: @@ -45,6 +48,7 @@ You can find more information about related chart features in these topics: - [Chart Highlighting](chart-highlighting.md) - [Chart Tooltips](chart-tooltips.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx index b928dbdfd0..ba7adf0c1e 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx @@ -12,6 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; import { Image } from 'astro:assets'; import layoutMode from '@xplat-images/general/layout_mode.png'; + # Angular Data Legend In Ignite UI for Angular, the is highly-customizable version of the , that shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. This legend updates when moving the mouse inside of the plot area of the , , and . Also, it has a persistent state that remembers the last hovered point when the user's mouse pointer exits the plot area. It displays this content using a set of three type of rows (header, series, summary) and four types of columns (title, label, value, unit). @@ -22,6 +23,7 @@ The rows of the include the header ro + ### Header Row The header row displays the current label of x-axis when hovering mouse over category series and financial series. You can use and properties to format date and time in the if the x-axis shows dates. For other types of series, the does not render the header row. @@ -40,6 +42,9 @@ The columns of the include the series + + + Setting values on the and properties, depends on type of series and how many data columns they support. For example, you can set 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 | @@ -66,6 +71,7 @@ The label column displays short name on the left side of value column, e.g. "O" The value column displays values of series as abbreviated text which can be formatted using the property to apply the same abbreviation for all numbers by setting this property to . Alternatively, a user can select other abbreviations such as , , , etc. Precision of abbreviated values is controlled using the and for minimum and maximum digits, respectively. + ### Unit Column The unit column displays an abbreviation symbol on the right side of value column. The unit symbol depends on the property, e.g. "M" for the abbreviation. @@ -98,6 +104,9 @@ The provides properties for styling e + + + ## Angular Data Legend Value Formatting The provides automatic abbreviation of large numbers using its property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the and . This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. @@ -105,12 +114,17 @@ The following example demonstrates how to use those properties: + + + ## Angular Data Legend Value Mode You have the ability to change the default decimal display of values within the to a currency by changing the property. Also, you can change the culture of the displayed currency symbol by setting the property a culture tag. For example, the following example data legend with the set to "en-GB" to display British Pounds (£) symbol: + + ## Angular Data Legend Grouping can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed: @@ -118,6 +132,8 @@ By default, DataLegend will hide names of groups, but you can display group name + + ## Angular Data Legend Styling & Events Several properties are exposed including grouping portions of the legend. @@ -153,6 +169,9 @@ Some of the events exposes a + ## API References + +
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx index e7fccf05e5..01d153eb73 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls.Charts --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; + import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Chart Selection @@ -51,8 +52,10 @@ In conjunction, a + ## Configuring Multiple Selection Other selection modes offer various methods of selection. For example using with `PerDataItemMultiSelect` will affect all series in entire category when multiple series are present while allowing selection across categories. Compared to `PerDataItemSingleSelect`, only a single category of items can be selected at a time. This is useful if multiple series are bound to different datasources and provides greater control of selection between categories. @@ -60,6 +63,7 @@ Other selection modes offer various methods of selection. For example using + ## Configuring Outline Selection When is applied, selected series will appear with a border when the property is set to one of the focus options. @@ -70,8 +74,9 @@ This example demonstrates another series type via the + ## Programmatic Selection -Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the . The property of the object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. +Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the . The property of the object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. The matcher is ideal for using in charts, such as the when you do not have access to the actual series, like the . In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the collection using a matcher with the following properties set @@ -79,6 +84,7 @@ For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar + ## API References The following is a list of API members mentioned in the above sections: diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx index 42c8739c15..7694cfd55e 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx @@ -12,6 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; import { Image } from 'astro:assets'; import layoutMode from '@xplat-images/general/layout_mode.png'; + # Angular Chart Data Tooltip In Ignite UI for Angular, the **DataToolTip** displays values and titles of series as well as legend badges of series in a tooltip. In addition, it provides many configuration properties of the for filtering series rows and values columns, styling, and formatting values. This tooltip type updates while moving the mouse inside of the plot area of the , , and components. @@ -38,6 +39,9 @@ The following example demonstrates the data tooltip with a summary applied: + + + ### Angular Data Tooltip Columns The columns of the include the title, label, value, and units columns. Each series in the chart can have multiple columns for label, value, and units depending on the or collections of the chart. @@ -74,6 +78,9 @@ The following example demonstrates a data tooltip with the added columns of Open + + + ## Angular Data Tooltip Grouping for Data Chart can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed: @@ -81,6 +88,8 @@ By default, DataLegend will hide names of groups, but you can display group name + + ## Angular Data Tooltip Grouping & Positioning for Category Chart & Financial Chart You can set property to either `Grouped` or `Individual` to group content for multiple series into single tooltip or separate content for each series in multiple tooltips. In the `Grouped` mode, you can customize where the tooltip is shown by setting the and properties. This essentially allows you to customize the horizontal and vertical alignments of the tooltip and whether you want it to track to the closest series points to the mouse position or pin the tooltip to edge of plot area. @@ -89,6 +98,7 @@ The following example demonstrates a data tooltip positioned to the top-right of + ## Angular Data Tooltip Value Formatting The **DataToolTip** provides automatic abbreviation of large numbers using its property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the and . This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. @@ -97,12 +107,16 @@ The following example demonstrates a **DataToolTip** with the minimum and maximu + + + ## Angular Data Tooltip Value Mode You can change the default decimal display of values within the **DataToolTip** to be currency by changing the property of the layer. The **DataToolTip** also exposes the ability to modify the culture of the displayed currency symbol by using its property and setting it to its corresponding culture tag. For example, the following sample demonstrates a chart with the set to "en-GB": + ## Layout Mode Legend items can be positioned in a vertical or table structure via the property. The default value is `Table`, which retains the same look and feel as seen in previous releases. @@ -111,6 +125,7 @@ eg. Layout Mode + ## Angular Data Tooltip Styling The **DataToolTip** provides properties for styling each type of column. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the , , , and properties. @@ -119,6 +134,7 @@ The following example demonstrates usage of the styling properties mentioned abo + Several properties are exposed including grouping portions of the tooltip. - `GroupTextMargin` @@ -136,8 +152,10 @@ Several properties are exposed including grouping portions of the tooltip. - `HeaderTextFontStretch` - `HeaderTextFontWeight` + ## API References +


diff --git a/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx b/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx index 16b4c1c7ae..fd065636f6 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx @@ -8,6 +8,7 @@ namespace: Infragistics.Controls.Charts --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; + import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Chart Highlight Filter @@ -16,6 +17,7 @@ The Ignite UI for Angular Chart components support a data highlighting overlay t + Note that data highlighting feature is supported by the and , but it is configured in different ways in those controls due to the nature of how those controls work. One thing remains constant with this feature though, in that you need to set the property to `Overlay` if you want to see the highlight. The following will explain the different configurations for the highlight filter feature. ## Using Highlight Filter with DataChart @@ -34,14 +36,17 @@ The following example demonstrates the usage of the data legend grouping and hig + The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the control using the : + The following example demonstrates the usage of the data highlighting overlay feature within the control using the `HighlightedValueMemberPath`: + ## Using Highlight Filter in CategoryChart The highlight filter happens on the chart by setting the property. Since the takes all of the properties on your underlying data item into account by default, you will need to define the on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the to a value path in your underlying data item to group by a path that has duplicate values. @@ -55,6 +60,7 @@ The following example demonstrates the usage of the data highlighting overlay fe + {/* TODO add new section that talks about how this feature also applies to Range, Financial series and the HighlightedValueMemberPath property corresponds to: HighlightedHighMemberPath and HighlightedLowMemberPath in Range Series HighlightedHighMemberPath, HighlightedLowMemberPath, HighlightedOpenMemberPath, HighlightedCloseMemberPath in Financial Series*/} @@ -71,6 +77,7 @@ You can find more information about related chart features in these topics: The following is a list of API members mentioned in the above sections: + | Properties | Properties | | ----------------------------------------------|---------------------------| | `CategoryChart.HighlightedItemsSource` | `Series.HighlightedItemsSource` | @@ -80,4 +87,4 @@ The following is a list of API members mentioned in the above sections: | `CategoryChart.HighlightedValuesFadeOpacity` | `Series.HighlightedValuesFadeOpacity` | | `CategoryChart.HighlightedValuesDisplayMode` | `Series.HighlightedValuesDisplayMode` | | `CategoryChart.InitialHighlightFilter` | | -| `CategoryChart.InitialGroups` | | +| `CategoryChart.InitialGroups` | | \ No newline at end of file diff --git a/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx b/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx index 06b6060fb9..2fe7ee760b 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx @@ -9,12 +9,14 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + ## Angular Chart Highlighting Example The following example demonstrates the different highlighting options that are available on the Angular chart. +
# Angular Chart Highlighting Modes & Behaviors @@ -25,10 +27,12 @@ The following example demonstrates the + The following example demonstrates the Angular chart. + # Angular Chart Legend Highlighting All Angular Charts support legend highlighting. can enabled so that when mouse is hovering over a legend marker item then the rendered series will highlight in the plot area. Legend highlighting is supported by the , , and controls and they have the same API for using the highlighting feature. @@ -37,6 +41,7 @@ The following example demonstrates the legend series highlighting Angular chart. + ## Highlight Layers The Ignite UI for Angular can enable three types of highlighting when hovering over data items. @@ -51,6 +56,8 @@ The following example demonstrates the different highlighting layers that are av + + ## Additional Resources You can find more information about related chart features in these topics: @@ -59,6 +66,7 @@ You can find more information about related chart features in these topics: - [Chart Annotations](chart-annotations.md) - [Chart Tooltips](chart-tooltips.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-markers.mdx b/docs/angular/src/content/en/components/charts/features/chart-markers.mdx index 780659bb94..22f2bced86 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-markers.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-markers.mdx @@ -10,6 +10,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; + # Angular Chart Markers In Ignite UI for Angular, markers are visual elements that display the values of data points in the chart's plot area. Markers help your end-users immediately identify a data point's value even if the value falls between major or minor grid lines. @@ -22,6 +23,7 @@ The colors of the markers are also managed by setting the +
## Angular Chart Marker Templates @@ -30,6 +32,9 @@ In addition to marker properties, you can implement your own marker by setting a + + +
## Additional Resources @@ -39,6 +44,7 @@ You can find more information about related chart features in these topics: - [Chart Annotations](chart-annotations.md) - [Chart Highlighting](chart-highlighting.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx b/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx index ad7b5d8e1c..d44246f57f 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx @@ -20,6 +20,9 @@ The following example shows all of the available panning and zooming options tha + + +
Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. @@ -65,6 +68,7 @@ The following example demonstrates enabling scrollbars. +
## Chart Navigation through Code @@ -88,6 +92,7 @@ You can find more information about related chart features in these topics: - [Chart Tooltips](chart-tooltips.md) - [Chart Trendlines](chart-trendlines.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx index 98cb89c77b..50aceb6538 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx @@ -10,6 +10,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; + # Angular Chart Overlays The Angular allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the . This can help you to visualize data such as the mean or median of a particular series. @@ -20,6 +21,8 @@ The following example depicts a [Column Chart](../types/column-chart.md) with a + +
## Angular Value Overlay Properties @@ -56,6 +59,7 @@ The following sample demonstrates usage of the different +
## Angular Financial Overlays @@ -70,6 +74,7 @@ For example, you can use + ### Styling Overlay Text This code example shows how to style and customize Overlay Text on @@ -77,6 +82,10 @@ the ,
+ + + + ## Additional Resources You can find more information about related chart types in these topics: @@ -86,6 +95,7 @@ You can find more information about related chart types in these topics: - [Line Chart](../types/line-chart.md) - [Stock Chart](../types/stock-chart.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx index f14287cc8a..96e8328738 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx @@ -10,6 +10,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # Angular Chart Performance Angular charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the chart and they should be considered when optimizing performance in your application. This topic will guide you to make Angular charts work as fast as possible in your application. @@ -24,6 +25,9 @@ In High-Frequency scenario, the Angular Charts can render data items that are up + + +
## Angular Chart with High-Volume @@ -32,6 +36,7 @@ In High-Volume scenario, the Angular Charts can render 1 million of data points +
## General Performance Guidelines @@ -50,6 +55,10 @@ If you need to plot data sources with large number of data points (e.g. 10,000+) Although Angular charts support rendering of multiple data sources by binding array of arrays of data points to property. It is much faster for charts if multiple data sources are flatten into single data source where each data item contains multiple data columns rather just one data column. For example: + + + + ```ts this.CategoryChart.dataSource = FlattenDataSource.create(); this.FinancialChart.dataSource = FlattenDataSource.create(); @@ -77,15 +86,23 @@ export class MultiDataSources { } ``` + + ### Data Filtering Angular and the controls have built-in data adapter that analyzes your data and generates chart series for you. However, it works faster if you use and to filter only those data columns that you actually want to render. For example, + + + + ```ts this.Chart.includedProperties = [ "Year", "USA", "RUS" ]; this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ]; ``` + + ## Chart Performance Guidelines ### Chart Types @@ -108,6 +125,7 @@ The following table lists chart types in order from the fastest performance to s | 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. ### Chart Animations @@ -132,6 +150,9 @@ In Angular charts, [Markers](chart-markers.md) are especially expensive when it This code snippet shows how to remove markers from the Angular charts. + + + ```ts // on CategoryChart or FinancialChart this.Chart.markerTypes.clear(); @@ -141,12 +162,17 @@ this.Chart.markerTypes.add(MarkerType.None); this.LineSeries.markerType = MarkerType.None; ``` + + ### Chart Resolution Setting the property to a higher value will improve performance, but it will lower the graphical fidelity of lines of plotted series. As such, it can be increased up until the fidelity is unacceptable. This code snippet shows how to decrease resolution in the Angular charts. + + + ```ts // on CategoryChart or FinancialChart: this.Chart.Resolution = 10; @@ -155,6 +181,8 @@ this.Chart.Resolution = 10; this.LineSeries.Resolution = 10; ``` + + ### Chart Overlays Enabling [Chart Overlays](chart-overlays.md) will slightly decrease performance of the Angular chart. @@ -173,6 +201,10 @@ The already uses ordinal/category This code snippet shows how to ordinal/category x-axis in the and controls. + + + + ```html @@ -181,6 +213,12 @@ This code snippet shows how to ordinal/category x-axis in the based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels. @@ -191,6 +229,10 @@ We do not recommend setting axis minor interval as it will decrease chart perfor This code snippet shows how to set axis major interval in the Angular charts. + + + + ```html @@ -202,6 +244,12 @@ This code snippet shows how to set axis major interval in the Angular charts. ``` + + + + + + ### Axis Scale Setting the property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale. @@ -212,6 +260,10 @@ In the same way as Markers, axis labels are also expensive because they use temp This code snippet shows how to hide axis labels in the Angular charts. + + + + ```html @@ -225,12 +277,22 @@ This code snippet shows how to hide axis labels in the Angular charts. ``` + + + + + + ### Axis Labels Abbreviation Although, the Angular charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting to a string that represents factor used used to abbreviate your data values. This code snippet shows how to set axis title in the Angular charts. + + + + ```html @@ -241,12 +303,22 @@ This code snippet shows how to set axis title in the Angular charts. ``` + + + + + + ### Axis Labels Extent At runtime, the Angular charts adjust extent of labels on y-axis based on a label with longest value. This might decrease chart performance if range of data changes and labels need to be updated often. Therefore, it is recommended to set label extent at design time in order to improve chart performance. The following code snippet shows how to set a fixed extent for labels on y-axis in the Angular charts. + + + + ```html @@ -258,6 +330,12 @@ The following code snippet shows how to set a fixed extent for labels on y-axis ``` + + + + + + ### Axis Other Visuals Enabling additional axis visuals (e.g. axis titles) or changing their default values might decrease performance in the Angular charts. @@ -274,6 +352,7 @@ For example, changing these properties on the

|

| | Axis Strips |
|
| + Or changing properties of an in the control: | Axis Visual | Axis Properties | @@ -334,6 +413,7 @@ Also, adding a lot of series to the | Single | | 10+ of | Single | + ## Additional Resources You can find more information about related chart types in these topics: @@ -360,6 +440,7 @@ You can find more information about related chart types in these topics: - [Chart Overlays](chart-overlays.md) - [Chart Trendlines](chart-trendlines.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx b/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx index 2e547d544a..5d855607af 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx @@ -19,6 +19,7 @@ This sample shows synchronization of two Angular data charts: +
## Chart Synchronization Properties @@ -29,6 +30,7 @@ If you want to synchronize a set of charts, you can assign them the same name to Note that in order to synchronize either vertically and/or horizontally, you will need to set the and/or property to **true**, respectively. A synchronized chart that is dependent on another chart will still zoom regardless of this property setting. + ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-titles.mdx b/docs/angular/src/content/en/components/charts/features/chart-titles.mdx index 1fe650cf36..981501e897 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-titles.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-titles.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # Angular Chart Title and Subtitle The title and subtitle feature of the chart control allows you to add information to the top section of the Angular charts. @@ -17,6 +18,7 @@ The title and subtitle feature of the chart control allows you to add informatio +
## API References @@ -41,3 +43,5 @@ When adding a title or subtitle to the chart control, the content of the chart a | | number | Title's left margin. | | | number | Title's right margin. | | | number | Title's bottom margin. | + + diff --git a/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx b/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx index 8b3eb001d7..9d1c395cbd 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # Angular Chart Tooltips In Angular charts, tooltips provide details about bound data and they are rendered in popups when the end-user hovers over data points. Tooltips are supported by the , , and controls. @@ -19,6 +20,9 @@ Angular Chart provide three types of tooltips that you can with tooltips enabled + + +
The property is configurable and can be set to one of the following options: @@ -42,14 +46,17 @@ This example shows how to create custom tooltips for all series in Angular +
+ ## Custom Tooltips in Data Chart This example shows how to create custom tooltips for each series in Angular Data Chart control. +
## Additional Resources @@ -59,6 +66,7 @@ You can find more information about related chart features in these topics: - [Chart Annotations](chart-annotations.md) - [Chart Markers](chart-markers.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx b/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx index c91eb1a34c..3026745b3a 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # Angular Chart Trendlines In Ignite UI for Angular charts, trendlines help in identifying a trend or finding patterns in data. Trendlines are always rendered in front of data points bound to the chart and are supported by the , , and (except for stacked series, shape series, and range series). @@ -23,6 +24,8 @@ The following sample depicts a sh + +
## Angular Chart Trendlines Dash Array Example @@ -31,6 +34,8 @@ The following sample depicts a showing + +
## Angular Chart Trendline Layer @@ -66,6 +71,7 @@ You can find more information about related chart features in these topics: - [Chart Annotations](chart-annotations.md) - [Chart Highlighting](chart-highlighting.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx index 0e6866472e..d5ed1d563f 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx @@ -14,21 +14,23 @@ import dataChartUserAnnotationCreate from '@xplat-images/charts/data-chart-user- import dataChartUserAnnotationDelete from '@xplat-images/charts/data-chart-user-annotation-delete.gif'; import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; + # Angular Chart User Annotation Layer In Ignite UI for Angular, you can annotate the with slice, strip, and point annotations at runtime using the user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. -This is directly integrated with the available tools of the . The following topic explains, with examples, how you can utilize the to add user annotations to the plot area of the chart, as well as how to do add these user annotations programmatically. +This is directly integrated with the available tools of the . The following topic explains, with examples, how you can utilize the to add user annotations to the plot area of the chart, as well as how to do add these user annotations programmatically. + This feature is designed to support X and Y axes and does not currently support radial or angular axes. ## Using the User Annotations with the Toolbar -The exposes an Annotations menu item with two tools with the labels of "Annotate Chart" and "Delete Note." In order for this menu item to appear, you first need to set the property on the corresponding chart to `true`. +The exposes an Annotations menu item with two tools with the labels of "Annotate Chart" and "Delete Note." In order for this menu item to appear, you first need to set the property on the corresponding chart to `true`. The "Annotate Chart" option that appears after opening allows you to annotate the plot area of the . This can be done by adding slice, strip, or point annotations. You can add a slice annotation by clicking on a label on the X or Y axis. You can add a strip annotation by clicking and dragging in the plot area. Also, you can add a point annotation by clicking on a point in a series plotted in the chart. @@ -38,19 +40,19 @@ You can delete the annotations that you have previously added by selecting the " Angular user-annotation-delete -When adding one of these user annotations via the , the will raise an event named `UserAnnotationInformationRequested` where you can provide more information for the user annotations. This event's arguments have a property named `AnnotationInfo` that will return a object that allows the configuration of multiple different aspects of the annotation to be added. +When adding one of these user annotations via the , the will raise an event named `UserAnnotationInformationRequested` where you can provide more information for the user annotations. This event's arguments have a property named `AnnotationInfo` that will return a object that allows the configuration of multiple different aspects of the annotation to be added. The table below details the different configurable properties on : | Property | Type | Description | |------------|---------|-------------| -||`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.| +||`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.| ||`string`|This read-only property returns the unique string ID of the user annotation.| ||`string`|This property gets or sets the color to use for the badge in the user annotation.| ||`string`|This property gets or sets a path to an image to use for the badge in the user annotation.| ||`double`|This property gets a recommended X location to show a dialog based on the location that the user annotation was added.| ||`double`|This property gets a recommended Y location to show a dialog based on the location that the user annotation was added.| -||`string`|This property gets or sets the label to be shown in the user annotation.| +||`string`|This property gets or sets the label to be shown in the user annotation.| ||`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 method on the to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling and passing the 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. @@ -75,8 +77,10 @@ The chart exposes a `UserAnnotationToolTipContentUpdating` event that you can ha The tooltip is designed to work in tandem with the `UserAnnotationInformationRequested` event so that you can provide more detail to the user annotation via that event's `AnnotationInfo.AnnotationData` property. The `AnnotationInfo` property on the event arguments of the `UserAnnotationToolTipContentUpdating` event will be the same instance as the `AnnotationInfo` property in the `UserAnnotationInformationRequested` that you can modify in that event. This allows you to utilize the information provided to the user annotation on its creation and provide even more information within the tooltip. + ## API References +


diff --git a/docs/angular/src/content/en/components/charts/types/area-chart.mdx b/docs/angular/src/content/en/components/charts/types/area-chart.mdx index 0aa086f4a6..e32c7efbf3 100644 --- a/docs/angular/src/content/en/components/charts/types/area-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/area-chart.mdx @@ -19,6 +19,9 @@ You can create Angular Category Area Chart in the + + +
## Area Chart Recommendations @@ -59,6 +62,9 @@ Angular Area Chart is often used to show the change of value over time such as t + + +
## Angular Area Chart with Multiple Series @@ -67,6 +73,7 @@ Similarly to how you can show multiple [Line Chart](line-chart.md) and [Spline C +
## Angular Area Chart Styling @@ -75,6 +82,9 @@ Area charts often have semi-transparent fill for their areas, thicker lines and + + +
## Advanced Types of Area Charts @@ -85,10 +95,14 @@ The following sections explain more advanced types of Angular Area Charts that c The Angular Step Area Chart belongs to a group of category charts and it is rendered using a collection of points connected by continuous vertical and horizontal lines with the area below lines filled in. Values are represented on the y-axis and categories are displayed on the x-axis. The step area chart emphasizes the amount of change over a period of time or compares multiple items. You can create this type of chart in control by binding your data and setting property to value, as shown in the example below. + + +
+ The following sections explain more advanced types of Angular Area Charts that can be created using the control instead of control with simplified API. ## Angular Range Area Chart @@ -97,6 +111,9 @@ The Angular Range Area Chart allows you show the area as a range between two val + + +
## Angular Stacked Area Chart @@ -105,46 +122,65 @@ The Angular Stacked Area Chars is rendered using a collection of points connecte + + +
## Angular Stacked 100% Area Chart The Angular Stacked 100% Area Chart allows you represent your data as part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. You can create this type of chart in control by binding your data to , as shown in the example below. + + +
## Angular Stacked Spline Area Chart The Angular Stacked Spline Area Chart is rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Chart follows all of the same requirements as area charts, with the only difference being that the visually shaded areas are stacked on top of each other. You can create this type of chart in control by binding your data to , as shown in the example below. + + +
+ ## Angular Stacked 100% Spline Area Chart The Angular Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. You can create this type of chart in control by binding your data to , as shown in the example below. + + +
## Angular Radial Area Chart The Angular Radial Area Chart belongs to a group of [Radial Chart](radial-chart.md) and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in control by binding your data to , as shown in the example below. + + +
## Angular Polar Area Chart The Angular Polar Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in control by binding your data to , as shown in the example below. + + +
## Angular Polar Spline Area Chart @@ -153,6 +189,9 @@ The Angular Polar Spline Area Chart belongs to a group of [Polar Chart](polar-ch + + +
## Additional Resources @@ -166,6 +205,7 @@ You can find more information about related chart types in these topics: - [Spline Chart](spline-chart.md) - [Stacked Chart](stacked-chart.md) + ## API References The following table lists API members mentioned in above sections: @@ -183,6 +223,7 @@ The following table lists API members mentioned in above sections: | Stacked 100% Area | | | | Stacked 100% Spline Area | | | + ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/bar-chart.mdx b/docs/angular/src/content/en/components/charts/types/bar-chart.mdx index 2ffb41d05b..88db609cc0 100644 --- a/docs/angular/src/content/en/components/charts/types/bar-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/bar-chart.mdx @@ -19,6 +19,9 @@ You can create Angular Bar Chart in the + + +
## Bar Chart Recommendations @@ -77,6 +80,9 @@ Bar Chart belongs to a group of Category Series and it is rendered using a colle + + +
## Angular Bar Chart with Multiple Series @@ -85,6 +91,7 @@ The Bar Chart is able to render multiple bars per category for comparison purpos +
## Angular Bar Chart Styling @@ -93,6 +100,9 @@ The Bar Chart can be styled, and allows for the ability to use [annotation value + + +
## Angular Stacked Bar Chart @@ -105,6 +115,9 @@ You can create this type of chart in the + + +
## Angular Stacked 100% Bar Chart @@ -115,6 +128,9 @@ You can create this type of chart in the + + +
## Additional Resources @@ -127,6 +143,7 @@ You can find more information about related chart types in these topics: - [Spline Chart](spline-chart.md) - [Stacked Chart](stacked-chart.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx b/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx index c04dccbe7e..5f2058b9f5 100644 --- a/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx @@ -19,6 +19,9 @@ You can create Ignite UI for Angular Bubble Chart in + + +
## Angular Bubble Chart with Single Series @@ -27,6 +30,7 @@ You can bind your data to +
## Angular Bubble Chart with Multiple Series @@ -35,6 +39,9 @@ In Angular Bubble Chart, binding multiple data sources works by setting each new + + +
## Angular Bubble Chart Styling @@ -43,6 +50,9 @@ In Angular Bubble Chart, you can customize shape of bubble markers using + + +
## Additional Resources @@ -50,8 +60,10 @@ In Angular Bubble Chart, you can customize shape of bubble markers using


diff --git a/docs/angular/src/content/en/components/charts/types/column-chart.mdx b/docs/angular/src/content/en/components/charts/types/column-chart.mdx index 31014eb717..91dbe37c22 100644 --- a/docs/angular/src/content/en/components/charts/types/column-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/column-chart.mdx @@ -19,6 +19,9 @@ You can create Angular Column Chart in the + + +
## Column Charts Recommendations @@ -55,6 +58,9 @@ You can create this type of chart in the + + +
## Angular Column Chart with Multiple Series @@ -63,8 +69,12 @@ The Column Chart is able to render multiple columns per category for comparison + + +
+ ## Angular Column Chart Styling The Angular Column Chart has many options for styling and modification of the visual appearance. @@ -73,12 +83,16 @@ You can create this type of chart in the + + +
## Advanced Types of Column Charts The following sections explain more advanced types of Angular Column Charts that can be created using the control instead of control with simplified API. + ## Angular Waterfall Chart The Waterfall Chart belongs to a group of category charts and it is rendered using a collection of vertical columns that show the difference between consecutive data points. The columns are color coded for distinguishing between positive and negative changes in value. The Waterfall Chart is similar in appearance to the [Range Column Chart](column-chart.md#angular-range-column-chart), but it requires only one numeric data column rather than two columns for each data point. @@ -87,6 +101,9 @@ You can create this type of chart in the + + +
## Angular Stacked Column Chart @@ -97,6 +114,9 @@ You can create this type of chart in the + + +
## Angular Stacked 100% Column Chart @@ -107,6 +127,9 @@ You can create this type of chart in the + + +
## Angular Range Column Chart @@ -119,6 +142,9 @@ You can create this type of chart in the + + +
## Angular Radial Column Chart @@ -129,6 +155,9 @@ You can create this type of chart in the + + +
## Additional Resources @@ -144,6 +173,7 @@ You can find more information about related chart types in these topics: ## API References + The following table lists API members mentioned in the above sections: | Chart Type | Control Name | API Members | diff --git a/docs/angular/src/content/en/components/charts/types/composite-chart.mdx b/docs/angular/src/content/en/components/charts/types/composite-chart.mdx index af73141167..4bbc17fa6a 100644 --- a/docs/angular/src/content/en/components/charts/types/composite-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/composite-chart.mdx @@ -19,6 +19,9 @@ The following example demonstrates how to create Composite Chart using + + +
## Additional Resources @@ -29,6 +32,7 @@ The following example demonstrates how to create Composite Chart using
diff --git a/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx b/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx index 1b0c3ab455..d0bdab3920 100644 --- a/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx @@ -20,6 +20,7 @@ You can create the Angular Pie Chart in the +
## Angular Data Pie Chart Recommendations @@ -67,6 +68,7 @@ Below is an example that demonstrates usage of the ItemLegend with the +
## Angular Pie Chart Others Category @@ -103,6 +105,7 @@ The following sample demonstrates usage of the Others slice in the +
## Angular Data Pie Chart Selection @@ -131,6 +134,7 @@ The following sample demonstrates the selection feature of the +
## Angular Data Pie Chart Highlighting @@ -156,6 +160,7 @@ The following example demonstrates the mouse highlighting behaviors of the + In addition to the mouse highlighting, the exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a for the control and by setting the property to `Overlay`. The expects a subset of the data assigned to the property of the . When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control. @@ -164,6 +169,7 @@ The following example demonstrates highlight filtering. +
## Angular Data Pie Chart Animation @@ -178,6 +184,7 @@ The following sample demonstrates the usage of animation in the +
## Additional Resources @@ -186,6 +193,7 @@ The following sample demonstrates the usage of animation in the
diff --git a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx b/docs/angular/src/content/en/components/charts/types/donut-chart.mdx index e4182c2d7c..d55e7d527b 100644 --- a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/donut-chart.mdx @@ -19,6 +19,7 @@ You can create Donut Chart using the +
## Angular Donut Chart Recommendations @@ -66,6 +67,9 @@ The Angular Donut Chart has the ability to select slices on click. Optionally, y + + +
## Angular Donut Chart - Multiple Rings @@ -74,6 +78,9 @@ It is possible to have a multiple ring display in the Angular Donut Chart, with + + +
## Additional Resources @@ -84,6 +91,7 @@ You can find more information about related chart types in these topics: - [Polar Chart](polar-chart.md) - [Radial Chart](radial-chart.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/line-chart.mdx b/docs/angular/src/content/en/components/charts/types/line-chart.mdx index a7077ecc47..655f445d2c 100644 --- a/docs/angular/src/content/en/components/charts/types/line-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/line-chart.mdx @@ -19,6 +19,9 @@ You can create the Angular Line Chart in the + + +
## Line Chart Recommendations @@ -74,6 +77,9 @@ You can create this type of chart in the + + +
## Angular Line Chart with Multiple Series @@ -84,6 +90,9 @@ You can create this type of chart in the + + +
## Angular Line Chart with Live Data @@ -96,6 +105,9 @@ You can create this type of chart in the + + +
## Angular Styling Line Chart @@ -106,12 +118,15 @@ You can create this type of chart in the + You can also create a dashed line within the by using the and setting the property on the series. This property takes an array of numbers that will describe the length of the resulting dashes in the line. The following example demonstrates usage of the in a in : + +
## Advanced Types of Line Charts @@ -124,6 +139,9 @@ The Stacked Line Chart is often used to show the change of value over time such + + +
## Angular Stacked 100% Line Chart @@ -134,6 +152,9 @@ You can create this type of chart in the + + +
## Angular Radial Line Chart @@ -144,6 +165,9 @@ You can create this type of chart in the + + +
## Angular Polar Line Chart @@ -154,6 +178,9 @@ You can create this type of chart in the + + +
## Additional Resources diff --git a/docs/angular/src/content/en/components/charts/types/pie-chart.mdx b/docs/angular/src/content/en/components/charts/types/pie-chart.mdx index b14501f0e7..e414755cca 100644 --- a/docs/angular/src/content/en/components/charts/types/pie-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/pie-chart.mdx @@ -19,6 +19,9 @@ You can create the Angular Pie Chart in the + + +
## Angular Pie Chart Recommendations @@ -72,6 +75,9 @@ Additionally you can use the + + +
## Angular Pie Chart Others Category @@ -84,6 +90,9 @@ If you set + + +
## Angular Pie Chart Explosion @@ -92,6 +101,9 @@ The pie chart supports explosion of individual pie slices as well as a `SliceCli + + +
## Angular Pie Chart Selection @@ -113,10 +125,13 @@ The pie chart has 4 events associated with selection: The events that end in "Changing" are cancelable events which means you can stop the selection of a slice by setting the event argument property `Cancel` to true. When set to true the associated property will not update and the slice will not become selected. This is useful for scenarios where you want to keep users from being able to select certain slices based on the data inside it. -For scenarios where you click on the Others slice, the pie chart will return an object called . This object contains a list of the data items contained within the Others slice. +For scenarios where you click on the Others slice, the pie chart will return an object called . This object contains a list of the data items contained within the Others slice. + + +
## Angular Pie Chart Animation @@ -127,22 +142,31 @@ In the code below, the radiusFactor is increasing the chart by 0.25% of the size + + +
## Angular Pie Chart Styling Once our pie chart is created, we may want to make some further styling customizations such as a change of the colors for the slices of the chart, as demonstrated below: + + +
## Angular Radial Pie Chart The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a group of radial charts and uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line. + + +
## Additional Resources @@ -151,6 +175,7 @@ The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a g - [Polar Chart](polar-chart.md) - [Radial Chart](radial-chart.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/point-chart.mdx b/docs/angular/src/content/en/components/charts/types/point-chart.mdx index e28409cbbc..181defc24e 100644 --- a/docs/angular/src/content/en/components/charts/types/point-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/point-chart.mdx @@ -19,6 +19,9 @@ You can create the Angular Point Chart in the + + +
## Angular Point Chart with Single Series @@ -27,6 +30,9 @@ In the following example, the Angular Point Chart plots a single data source by + + +
## Angular Point Chart with Multiple Series @@ -35,6 +41,9 @@ Since the Angular Point Chart allows you to combine multiple series and compare + + +
## Angular Point Chart Styling @@ -43,6 +52,9 @@ Once the Angular Point Chart is set up, we may want to make some further styling + + +
## Advanced Types of Point Charts @@ -61,6 +73,7 @@ You can find more information about related chart features in these topics: - [Chart Performance](../features/chart-performance.md) - [Chart Markers](../features/chart-markers.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/polar-chart.mdx b/docs/angular/src/content/en/components/charts/types/polar-chart.mdx index 602a0d0e14..a656eb388f 100644 --- a/docs/angular/src/content/en/components/charts/types/polar-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/polar-chart.mdx @@ -19,6 +19,9 @@ The Polar Area Chart renders using a collection of polygons connecting data poin + + +
## Angular Polar Spline Area Chart @@ -27,6 +30,9 @@ The Polar Spline Area Chart renders also as a collection of polygons but they ha + + +
## Angular Polar Marker Chart @@ -35,6 +41,9 @@ The Polar Marker Chart renders using a collection of markers representing data p + + +
## Angular Polar Line Chart @@ -43,6 +52,9 @@ The Polar Line Chart renders using a collection of straight lines connecting dat + + +
## Angular Polar Spline Chart @@ -51,6 +63,9 @@ The Polar Spline Chart renders using a collection of curved splines connecting d + + +
## Angular Polar Chart Styling @@ -59,6 +74,9 @@ Once our polar chart is created, we may want to make some further styling custom + + +
## Additional Resources @@ -73,6 +91,7 @@ You can find more information about related chart types in these topics: - [Scatter Chart](scatter-chart.md) - [Spline Chart](spline-chart.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/radial-chart.mdx b/docs/angular/src/content/en/components/charts/types/radial-chart.mdx index 628b6665f2..0287e26e41 100644 --- a/docs/angular/src/content/en/components/charts/types/radial-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/radial-chart.mdx @@ -19,6 +19,9 @@ The Angular Radial Area Chart has a shape of a filled polygon that is bound by a + + +
## Angular Radial Column Chart @@ -27,6 +30,9 @@ The Radial Column Chart is visualized by using a collection of rectangles that e + + +
## Angular Radial Line Chart @@ -35,6 +41,9 @@ The Angular Radial Line Chart has renders as a collection of straight lines conn + + +
## Angular Radial Pie Chart @@ -43,6 +52,9 @@ The Radial Pie Chart uses pie slices that extend from the center of chart toward + + +
## Angular Radial Chart Styling @@ -51,6 +63,7 @@ Once our radial chart is created, we may want to make some further styling custo +
## Angular Radial Chart Settings @@ -59,6 +72,7 @@ In addition, the labels can be configured to appear near or wide from the chart.
+ ## Additional Resources You can find more information about related chart types in these topics: @@ -69,6 +83,7 @@ You can find more information about related chart types in these topics: - [Line Chart](line-chart.md) - [Pie Chart](pie-chart.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx b/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx index 0e0a29a7a4..cb5d2a8ce4 100644 --- a/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx @@ -19,6 +19,9 @@ Angular Scatter Marker Chart renders as a collection of markers, each having a p + + +
## Angular Scatter Line Chart @@ -27,6 +30,9 @@ Angular Scatter Line Chart renders as a collection of markers connected by a str + + +
## Angular Scatter Spline Chart @@ -35,6 +41,9 @@ Angular Scatter Spline Chart renders as a collection of markers connected by a c + + +
## Angular Scatter High Density Chart @@ -43,6 +52,9 @@ Use the Angular Scatter High Density (HD) Chart to bind and show scatter data ra + + +
## Angular Scatter Area Chart @@ -51,6 +63,9 @@ Angular Scatter Area Chart draws a colored surface based on a triangulation of X + + +
## Angular Scatter Contour Chart @@ -59,6 +74,9 @@ Angular Scatter Contour Chart draws colored contour lines based on a triangulati + + +
## Additional Resources @@ -86,6 +104,7 @@ The following table lists API members mentioned in the above sections: ## API References +


diff --git a/docs/angular/src/content/en/components/charts/types/shape-chart.mdx b/docs/angular/src/content/en/components/charts/types/shape-chart.mdx index 0b83a5c913..fd1c45a1b2 100644 --- a/docs/angular/src/content/en/components/charts/types/shape-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/shape-chart.mdx @@ -21,6 +21,9 @@ You can create this type of chart in the + + +
## Angular Scatter Polyline Chart @@ -31,6 +34,9 @@ You can create this type of chart in the + + +
## Additional Resources @@ -41,6 +47,7 @@ You can find more information about related chart types in these topics: - [Line Chart](line-chart.md) - [Scatter Chart](scatter-chart.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx b/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx index 4c53348ea4..894600f8bc 100644 --- a/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # Angular Sparkline The Ignite UI for Angular Sparkline is a lightweight charting control. It is intended for rendering within a small-scale layout such as within a grid cell but can also be rendered alone. The has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips. @@ -19,6 +20,9 @@ The following example shows all the different types of + + +
Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. @@ -64,6 +68,9 @@ The Angular Sparkline supports the following types of sparklines by setting the + + +
## Markers @@ -83,6 +90,8 @@ All of the markers mentioned above can be customized using the related marker ty + +
## Normal Range @@ -101,6 +110,8 @@ You can also configure whether to show the normal range in front of or behind th + +
## Trendlines @@ -115,6 +126,8 @@ The sample below shows all the available trendlines via the dropdown: + +
## Unknown Value Interpolation @@ -125,14 +138,19 @@ To plot the unknown values, you can set the + +
+ ## Sparkline in Data Grid You can embed the Angular Sparkline in a template column of data grid or other UI controls that support templates. The following code example shows how to do this: + + ## Additional Resources You can find more information about related chart types in these topics: @@ -141,6 +159,7 @@ You can find more information about related chart types in these topics: - [Column Chart](column-chart.md) - [Line Chart](line-chart.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/spline-chart.mdx b/docs/angular/src/content/en/components/charts/types/spline-chart.mdx index 2cbd6f8203..8c80c2e098 100644 --- a/docs/angular/src/content/en/components/charts/types/spline-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/spline-chart.mdx @@ -18,6 +18,9 @@ The following example shows how to create Angular Spline Chart in the + + +
## Angular Spline Chart with Single Series @@ -28,6 +31,9 @@ You can create this type of chart in the + + +
## Angular Spline Chart with Multiple Series @@ -38,6 +44,9 @@ You can create this type of chart in the + + +
## Angular Spline Chart Styling @@ -48,6 +57,9 @@ You can create this type of chart in the + + +
## Advanced Types of Spline Charts @@ -62,6 +74,9 @@ You can create this type of chart in the + + +
## Angular Stacked 100% Spline Chart @@ -72,6 +87,9 @@ You can create this type of chart in the + + +
## Additional Resources diff --git a/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx b/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx index 6a5123f9b1..0e7422bd4b 100644 --- a/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx @@ -19,6 +19,9 @@ The following example, you can use the drop-down to switch between all of the di + + +
The following sections demonstrate individual types of Ignite UI for Angular Stacked Charts. @@ -31,8 +34,12 @@ You can create this type of chart in the + + +
+ ## Angular Stacked 100 Area Chart Sometimes the series represent part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. @@ -40,8 +47,12 @@ You can create this type of chart in the + + +
+ ## Angular Stacked Bar Chart A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is used to compare the composition of different categories of data by displaying different sized fragments in the horizontal bars of the chart. The length of each bar, or stack of fragments, is proportionate to its overall value. @@ -52,8 +63,12 @@ In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels + + +
+ ## Angular Stacked 100% Bar Chart The Angular Stacked 100% Bar Chart is identical to the Angular stacked bar chart in all aspects except in their treatment of the values on X-Axis (bottom labels of the chart). Instead of presenting a direct representation of the data, the stacked 100% bar chart presents the data in terms of percent of the sum of all values in a data point. @@ -62,8 +77,12 @@ In this example of a Stacked 100% Bar Chart, the Energy Product values are shown + + +
+ ## Angular Stacked Column Chart The Stacked Column Chart is identical to the [Column Chart](column-chart.md) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the Stacked Bar Chart but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis). @@ -72,8 +91,12 @@ You can create this type of chart in the + + +
+ ## Angular Stacked 100% Column Chart The Stacked 100% Column Chart is identical to the Stacked Column Chart in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100% Column Chart presents the data in terms of percent of the sum of all values in a data point. @@ -82,16 +105,24 @@ The example below shows a study made for online shopping traffic by departments + + +
+ ## Angular Stacked Line Chart The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the control by binding your data to a , as shown in the example below: + + +
+ ## Angular Stacked 100% Line Chart The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. @@ -100,8 +131,12 @@ You can create this type of chart in the + + +
+ ## Angular Stacked Spline Area Chart Stacked Spline Area Charts are rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Charts follow all of the same requirements as [Area Chart](area-chart.md), with the only difference being that the visually shaded areas are stacked on top of each other. @@ -110,8 +145,12 @@ You can create this type of chart in the + + +
+ ## Angular Stacked 100% Spline Area Chart The Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. @@ -120,16 +159,24 @@ You can create this type of chart in the + + +
+ ## Angular Stacked Spline Chart The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the control by binding your data to a , as shown in the example below. + + +
+ ## Angular Stacked 100% Spline Chart The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. @@ -138,8 +185,12 @@ You can create this type of chart in the + + +
+ ## Additional Resources You can find more information about related chart types in these topics: diff --git a/docs/angular/src/content/en/components/charts/types/step-chart.mdx b/docs/angular/src/content/en/components/charts/types/step-chart.mdx index ad153a502a..cb06134f0a 100644 --- a/docs/angular/src/content/en/components/charts/types/step-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/step-chart.mdx @@ -19,6 +19,9 @@ You can create Angular Step Area Chart in the + + +
## Angular Step Line Chart @@ -29,6 +32,9 @@ You can create Step Line Chart in the + + +
## Angular Step Chart Styling @@ -37,6 +43,9 @@ If you need Step Charts with more features such as composite other series, you c + + +
## Additional Resources @@ -47,6 +56,7 @@ You can find more information about related chart types in these topics: - [Line Chart](line-chart.md) - [Chart Markers](../features/chart-markers.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/stock-chart.mdx b/docs/angular/src/content/en/components/charts/types/stock-chart.mdx index 52c39cbb4f..28cf935d8d 100644 --- a/docs/angular/src/content/en/components/charts/types/stock-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/stock-chart.mdx @@ -19,6 +19,9 @@ You can create Stock Chart using the + + +
## Stock Chart Recommendations @@ -64,6 +67,9 @@ As a Stock Chart is meant to allow the user to perform data analysis functions, + + +
## Angular Stock Chart @@ -72,14 +78,20 @@ In this example the Stock Chart is representing the S&P 500 over the course of a + + +
## Angular Stock Chart Styling If you need a Stock Chart with more features such as composite other series, you can configure the thickness, outlines, brushes, negative outlines, negative brushes as demonstrated below. In this example, the stock chart is comparing revenue between Amazon, Microsoft and Tesla. + + +
## Angular Chart Annotations @@ -94,6 +106,9 @@ Note: When using the ordinal X axis mode, the CalloutsXMemberPath should point t + + +
## Angular Chart Panes @@ -128,6 +143,9 @@ In this example, the stock chart is plotting revenue for United States. + + +
## Additional Resources @@ -140,6 +158,7 @@ You can find more information about related chart features in these topics: - [Chart Trendlines](../features/chart-trendlines.md) - [Chart Performance](../features/chart-performance.md) + ## API References
diff --git a/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx b/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx index e97ad04fa7..2ce557e3b5 100644 --- a/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx @@ -19,6 +19,9 @@ In the following example, the demonstrat + + +
## Treemap Recommendations @@ -64,6 +67,9 @@ In the following example, the treemap demonstrates the ability of changing it's + + +
### Layout Types @@ -94,12 +100,14 @@ In the following example, the treemap demonstrates the ability of changing the l + ### Angular Treemap Highlighting In the following example, the treemap demonstrates the ability of node highlighting. There are two options for this feature. Each node can individually brighten, by decreasing its opacity, or cause all other nodes to trigger the same effect. To enable this feature, set to Brighten or FadeOthers. + ## Angular Treemap Percent based highlighting - : Specifies the datasource to read highlighted values from. If null, then highlighted values are read from the ItemsSource property. @@ -112,6 +120,7 @@ In the following example, the treemap demonstrates the ability of node highlight +
## Additional Resources @@ -121,6 +130,7 @@ You can find more information about related chart types in these topics: - [Area Chart](area-chart.md) - [Shape Chart](shape-chart.md) + ## API References
diff --git a/docs/angular/src/content/en/components/dashboard-tile.mdx b/docs/angular/src/content/en/components/dashboard-tile.mdx index 37814ce744..f2e859eaf2 100644 --- a/docs/angular/src/content/en/components/dashboard-tile.mdx +++ b/docs/angular/src/content/en/components/dashboard-tile.mdx @@ -12,9 +12,10 @@ import { Image } from 'astro:assets'; import dashboardTileToolbar from '@xplat-images/dashboard-tile-toolbar.png'; import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; + # Angular Dashboard Tile -The Angular Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded that let you alter the visualization that is presented in a variety of ways. +The Angular Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded that let you alter the visualization that is presented in a variety of ways. A wide variety of visualizations may be selected for display depending on the shape of the provided data including, but not limited to: Category Charts, Radial and Polar Charts, Scatter Charts, Geographic Maps, Radial and Linear Gauges, Financial Charts and Stacked Charts. @@ -24,8 +25,10 @@ Interacting with the chart type menu in the toolbar will allow for selecting a d + ## Dependencies + Install the following packages in the Ignite UI for Angular toolset: ```cmd @@ -41,6 +44,8 @@ npm install igniteui-angular-maps The following modules are suggested when using the Dashboard Tile component: + + ```ts import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGaugeDashboardTileModule, IgxLinearGaugeDashboardTileModule, IgxGeographicMapDashboardTileModule, @@ -59,6 +64,18 @@ import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGauge export class AppModule {} ``` + + + + + + + + + + + + ## Usage Depending on what you bind the Dashboard Tile's `DataSource` property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the Ignite UI for Angular toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following: @@ -78,7 +95,8 @@ You are not locked into a single visualization when you bind the `DataSource`, a -The visualization or properties of the visualization are also configurable using the at the top of the control. This has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below: + +The visualization or properties of the visualization are also configurable using the at the top of the control. This has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below: Dashboard Tile Toolbar @@ -93,13 +111,17 @@ This demo demonstrates dashboard tile integration with the Angular Pie Chart. Th + This demo demonstrates dashboard tile integration with the Angular Geographic Map. The toolbar options at the top right provides access to styling and changing the data visualization. + ## API References -
+ + +



diff --git a/docs/angular/src/content/en/components/excel-library-using-cells.mdx b/docs/angular/src/content/en/components/excel-library-using-cells.mdx index beb93256ba..4b4ebbf94d 100644 --- a/docs/angular/src/content/en/components/excel-library-using-cells.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-cells.mdx @@ -14,10 +14,18 @@ The objects in an ## Angular Using Cells Example + + + +
+ + + + ## References The following code shows the imports needed to use the code-snippets below: @@ -32,6 +40,9 @@ import { WorksheetCellComment } from "igniteui-angular-excel"; import { FormattedString } from "igniteui-angular-excel"; ``` + + + ## Referencing Cells and Regions You can access a object or a object by calling the object’s or methods, respectively. Both methods accept a string parameter that references a cell. Getting a reference to a cell is useful when applying formats or working with formulas and cell contents. @@ -48,6 +59,8 @@ var cell = worksheet.getCell("E2"); var region = worksheet.getRegion("G1:G10"); ``` + + ## Accessing Cells and Regions by Name In Microsoft Excel, individual cells, as well as cell regions can have names assigned to them. The name of a cell or region can be used to reference that cell or region instead of their address. @@ -64,6 +77,8 @@ var cell_reference = workbook.namedReferences().add("myCell", "=Sheet1:A1"); var region_reference = workbook.namedReferences().add("myRegion", "=Sheet1!A1:B2"); ``` + + The following code can be used to the get the cell and region referenced by the "myCell" and "myRegion" named references above: ```ts @@ -71,6 +86,8 @@ var cell = worksheet.getCell("myCell"); var region = worksheet.getRegion("myRegion"); ``` + + ## Adding a Comment to a Cell A comment allows you to display hints or notes for a cell when the end user’s mouse hovers over a cell. The comments display as a tooltip-like callout that contains text. The Infragistics Angular Excel Library allows you to add comments to a cell by setting a object’s property. @@ -88,6 +105,8 @@ cellComment.text = commentText; worksheet.rows(0).cells(0).comment = cellComment; ``` + + ## Adding a Formula to a Cell The Infragistics Angular Excel Library allows you to add Microsoft Excel formulas to a cell or group of cells in a worksheet. You can do this using the object’s method or by instantiating a object and applying it to a cell. Regardless of the manner in which you apply a formula to a cell, you can access the object using the object’s property. If you need the value, use the cell’s property. @@ -104,6 +123,8 @@ The following code shows you how to add a formula to a cell. sumFormula.applyTo(worksheet.rows(5).cells(0)); ``` + + ## Copying a Cell’s Format Cells can have different formatting, including background color, format string, and font style. If you need a cell to have the same format as a previously formatted cell, instead of individually setting each option exposed by the object’s property, you can call the object’s method and pass it a object to copy. This will copy every format setting from the first cell to the second cell. You can also do this for a row, merged cell region, or column. @@ -121,6 +142,8 @@ worksheet.columns(1).cellFormat.font.bold = true; worksheet.columns(3).cellFormat.setFormatting(worksheet.columns(1).cellFormat); ``` + + ## Formatting a Cell The Infragistics Angular Excel Library allows you to customize the look and behavior of a cell. You can customize a cell by setting properties exposed by the property of the , , , or objects. @@ -138,6 +161,8 @@ var workbook = workbook.worksheets().add("Sheet1"); worksheet.columns(2).cellFormat.formatString = "\"$\"#,##0.00"; ``` + + ## Excel 2007 Color Model The color palette is analogous to the color dialog in Microsoft Excel 2007 UI. You can open this color dialog by navigating to Excel Options => Save => Colors. @@ -172,6 +197,8 @@ var cellFill = CellFill.createSolidFill("Blue"); worksheet.rows(0).cells(0).cellFormat.fill = cellFill; ``` + + You can specify a color (the color of Excel cells background, border, etc) using linear and rectangular gradients in cells. When workbooks with these gradients are saved in .xls file format and opened in Microsoft Excel 2007/2010, the gradients will be visible, but when these files are opened in Microsoft Excel 2003, the cell will be filled with the solid color from the first gradient stop. These are the ways a color can be defined, as follows: @@ -276,6 +303,8 @@ mergedRegion1.value = "Day 1"; worksheet.rows(0).cells(2).cellFormat.alignment = HorizontalCellAlignment.Center; ``` + + ## Retrieving the Cell Text as Displayed in Excel The text displayed in a cell depends on several factors other than the actual cell value, such as the format string and the width of the column that the cell is contained in. @@ -329,6 +358,9 @@ var worksheet = this.workbook.worksheets().add("Sheet1"); var cellText = worksheet.rows(0).cells(0).getText(); ``` + + + ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-using-tables.mdx b/docs/angular/src/content/en/components/excel-library-using-tables.mdx index 62ecca5d49..e078aa9511 100644 --- a/docs/angular/src/content/en/components/excel-library-using-tables.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-tables.mdx @@ -13,10 +13,14 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The Infragistics Angular Excel Engine's functionality allows you to format your data in rows and columns The data in a worksheet table can be managed independently from the data in the other rows and columns in a . {/*## Angular Using Tables Example + + + */} +
## Adding a Table to a Worksheet @@ -31,6 +35,8 @@ var worksheet = this.workbook.worksheets().add("Sheet1"); worksheet.tables().add("A1:G10", true); ``` + + Once you have added a table, you can modify it by adding or deleting rows and columns by calling the , , , or methods on the . You can also set a new table range by using the method of the table. The following code snippet shows the usage of these methods: @@ -56,6 +62,8 @@ table.deleteDataRows(0, 5); table.resize("A1:G15"); ``` + + ## Filtering Tables Filtering is done by applying a filter on a column in the . When the filter is applied on a column, all filters in the table will be reevaluated to determine which rows meet the criteria of all filters applied. @@ -83,6 +91,8 @@ var table = worksheet.tables().add("A1:G10", true); table.columns(0).applyAverageFilter(AverageFilterType.AboveAverage); ``` + + ## Sorting Tables Sorting is done by setting a sorting condition on a table column. When a sorting condition is set on a column, all sorting conditions in the table will be reevaluated to determine the order of the cells in the table. When cells need to be moved to meet their sort criteria, the entire row of cells in the table is moved as a unit. @@ -112,6 +122,9 @@ table.columns(0).sortCondition = new OrderedSortCondition(SortDirection.Ascendin table.sortSettings.sortConditions().addItem(table.columns(0), new OrderedSortCondition(SortDirection.Ascending)); ``` + + + ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx b/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx index a3d028c1fc..a7bc09b831 100644 --- a/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx @@ -14,8 +14,12 @@ The Infragistics Angular Excel Engine enables you to save data to and load data ## Angular Using Workbooks Example + + + +
## Change Default Font @@ -30,6 +34,8 @@ font.name = "Times New Roman"; font.height = 16 * 20; ``` + + ## Setting Workbook Properties Microsoft Excel® document properties provide information to help organize and keep track of your documents. You can use the Infragistics Angular Excel Library to set these properties using the object’s property. The available properties are: @@ -60,6 +66,8 @@ workbook.documentProperties.title = "Expense Report"; workbook.documentProperties.status = "Complete"; ``` + + ## Workbook Protection The workbook protection feature allows you to protect the structure of the workbook. That is, the ability for a user to add, rename, delete, hide, and reorder the worksheets in that workbook. @@ -79,6 +87,8 @@ var workbook = new Workbook(); workbook.protect(false, false); ``` + + Check if a workbook has protection. This read-only property returns true if the workbook has any protection set using the overloads of the Protect method. ```ts @@ -86,6 +96,8 @@ var workbook = new Workbook(); var protect = workbook.isProtected; ``` + + This read-only property returns an object of type WorkbookProtection which contains properties for obtaining each protection setting individually. ```ts @@ -93,6 +105,9 @@ var workbook = new Workbook(); var protection = workbook.protection; ``` + + + ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx index 69d7facc05..2c750a25c0 100644 --- a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx @@ -14,10 +14,19 @@ The Infragistics Angular Excel Engine's + + +
+ + + + + The following code shows the imports needed to use the code-snippets below: ```ts @@ -35,6 +44,9 @@ import { SortDirection } from "igniteui-angular-excel"; import { WorkbookColorInfo } from "igniteui-angular-excel"; ``` + + + ## Configuring the Gridlines The gridlines are used to visually separate the cells in the worksheet. You may show or hide the gridlines and also change their color. @@ -47,6 +59,8 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.displayOptions.showGridlines = false; ``` + + You can configure the gridlines' color using the property of the of the worksheet. The following code demonstrates how you can change the gridlines in your worksheet to be red: ```ts @@ -56,6 +70,8 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.displayOptions.gridlineColor = "Red"; ``` + + ## Configuring the Headers The column and row headers are used to visually identify columns and rows. They are also used to visually highlight the currently selected cell or cell region. @@ -68,6 +84,8 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.displayOptions.showRowAndColumnHeaders = false; ``` + + ## Configuring Editing of the Worksheet By default, the objects that you save will be editable. You can disable editing of a worksheet by protecting it using the object's method. This method has a lot of nullable `bool` arguments that determine which pieces are protected, and one of these options is to allow editing of objects, which if set to **false** will prevent editing of the worksheet. @@ -80,6 +98,8 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.protect(); ``` + + You can also use the object's method to protect a worksheet against structural changes. When protection is set, you can set the object's property on individual cells, rows, merged cell regions, or columns to override the worksheet object's protection on those objects. For example, if you need all cells of a worksheet to be read-only except for the cells of one column, you can protect the worksheet and then set the object's property to **false** on a specific object. This will allow your users to edit cells within the column while disabling editing of the other cells in the worksheet. @@ -94,6 +114,8 @@ worksheet.protect(); worksheet.columns(0).cellFormat.locked = false; ``` + + ## Filtering Worksheet Regions Filtering is done by setting a filter condition on a worksheet's which can be retrieved from the object's property. Filter conditions are only reapplied when they're added, removed, modified, or when the method is called on the worksheet. They are not constantly evaluated as data within the region changes. @@ -124,6 +146,8 @@ worksheet.filterSettings.setRegion("Sheet1!A1:A10"); worksheet.filterSettings.applyAverageFilter(0, AverageFilterType.AboveAverage); ``` + + ## Freezing and Splitting Panes You can freeze rows at the top of your worksheet or columns at the left using the freezing panes features. Frozen rows and columns remain visible at all times while the user is scrolling. The frozen rows and columns are separated from the rest of the worksheet by a single, solid line, which cannot be removed. @@ -146,6 +170,8 @@ worksheet.displayOptions.frozenPaneSettings.firstColumnInRightPane = 2; worksheet.displayOptions.frozenPaneSettings.firstRowInBottomPane = 6; ``` + + ## Setting the Worksheet Zoom Level You can change the zoom level for each worksheet independently using the property on the object's . This property takes a value between 10 and 400 and represents the percentage of zoom that you wish to apply. @@ -158,6 +184,8 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.displayOptions.magnificationInNormalView = 300; ``` + + ## Worksheet Level Sorting Sorting is done by setting a sorting condition on a worksheet level object on either columns or rows. You can sort columns or rows in ascending or descending order. @@ -175,6 +203,8 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.sortSettings.sortConditions().addItem(new RelativeIndex(0), new OrderedSortCondition(SortDirection.Ascending)); ``` + + ## Worksheet Protection You can protect a worksheet by calling the method on the object. This method exposes many nullable `bool` parameters that allow you to restrict or allow the following user operations: @@ -200,6 +230,8 @@ var worksheet = workbook.worksheets().add("Sheet1"); worksheet.protect(); ``` + + ## Worksheet Conditional Formatting You can configure the conditional formatting of a object by using the many "Add" methods exposed on the collection of that worksheet. The first parameter of these "Add" methods is the `string` region of the worksheet that you would like to apply the conditional format to. @@ -223,6 +255,9 @@ var format = worksheet.conditionalFormats().addAverageCondition("A1:A10", Format format.cellFormat.font.colorInfo = new WorkbookColorInfo(color); ``` + + + ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx b/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx index e9410a4dce..fa5d9e2aeb 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx @@ -15,8 +15,10 @@ The Infragistics Angular Excel Engine's + The XLSX format is required. Other formats are not supported at this time. @@ -40,6 +42,9 @@ var chart = ws.shapes().addChart(ChartType.ColumnClustered, chart.setSourceData("A2:M6", true); ``` + + + ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx b/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx index 8c17172c12..908a1576bd 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx @@ -14,8 +14,10 @@ TODO ## Angular Working with Grids Example + +
## Usage @@ -26,6 +28,7 @@ The following code demonstrates how to use ... TODO TODO ``` + ## API References
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx b/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx index c4a9debc56..868143eead 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx @@ -14,8 +14,12 @@ The Infragistics Angular Excel Library has support for adding sparklines to an E ## Angular Working with Sparklines Example + + + +
## Supported Sparklines @@ -36,6 +40,9 @@ sheet1.sparklineGroups().add(SparklineType.Column, "Sparklines!B1:B1", "Data!A2: workbook.save(workbook, "Sparklines.xlsx"); ``` + + + ## API References
diff --git a/docs/angular/src/content/en/components/excel-library.mdx b/docs/angular/src/content/en/components/excel-library.mdx index 399e7a73d4..eaf6bac051 100644 --- a/docs/angular/src/content/en/components/excel-library.mdx +++ b/docs/angular/src/content/en/components/excel-library.mdx @@ -15,10 +15,18 @@ The Infragistics Angular Excel Library allows you to work with spreadsheet data ## Angular Excel Library Example + + + +
+ + + + ## Dependencies When installing the excel package, the core package must also be installed. @@ -72,6 +80,14 @@ The Excel Library contains 5 modules that you can use to limit bundle size of yo - **IgxExcelXlsxModule** – This contains the load and save logic for xlsx (and related) type files – namely the Excel2007 related and StrictOpenXml WorkbookFormats. - **IgxExcelModule** – This references the other 4 modules and so basically ensures that all the functionality is loaded/available. + + + + + + + + ## Supported Versions of Microsoft Excel The following is a list of the supported versions of Excel.** @@ -98,8 +114,17 @@ The Excel Library does not support the Excel Binary Workbook (.xlsb) format at t ## Load and Save Workbooks Now that the Excel Library module is imported, next step is to load a workbook. + + + + + In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a . + + + + In order to load and save objects, you can utilize the save method of the actual object, as well as its static `Load` method. ```ts @@ -112,6 +137,10 @@ var workbook = ExcelUtility.load(file); ExcelUtility.save(workbook, "fileName"); ``` + + + + ## Managing Heap Due to the size of the Excel Library, it's recommended to disable the source map generation. @@ -144,6 +173,8 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect => } ``` + + ## API References
diff --git a/docs/angular/src/content/en/components/excel-utility.mdx b/docs/angular/src/content/en/components/excel-utility.mdx index 81a534c1ea..9ed7c6fada 100644 --- a/docs/angular/src/content/en/components/excel-utility.mdx +++ b/docs/angular/src/content/en/components/excel-utility.mdx @@ -11,6 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; This topic provides utility function for loading and saving Microsoft Excel files using [Excel Library](excel-library.md) + ```ts import { saveAs } from "file-saver"; // npm package: "file-saver": "^1.3.8" import { Workbook } from 'igniteui-angular-excel'; @@ -112,6 +113,18 @@ export class ExcelUtility { } ``` + + + + + + + + + + + + ## API References
diff --git a/docs/angular/src/content/en/components/general-changelog-dv.mdx b/docs/angular/src/content/en/components/general-changelog-dv.mdx index 34fc03e5ea..de8b2e8862 100644 --- a/docs/angular/src/content/en/components/general-changelog-dv.mdx +++ b/docs/angular/src/content/en/components/general-changelog-dv.mdx @@ -80,7 +80,7 @@ Added OthersCategoryBrush and OthersCategoryOutline to DataPieChart and Proporti In Ignite UI for Angular, you can now annotate the with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. -This is directly integrated with the available tools of the . +This is directly integrated with the available tools of the . Angular user-annotation-create @@ -174,6 +174,7 @@ There is a new property called