Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/angular/src/content/en/components/charts/chart-api.mdx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Chart API | Data Visualization Tools | Infragistics
_description: Use Infragistics Ignite UI for Angular chart provides useful API to configure and styles chart visuals
_keywords: Angular charts, chart API, API, Ignite UI for Angular, Infragistics
_license: commercial
description: Use Infragistics Ignite UI for Angular chart provides useful API to configure and styles chart visuals
keywords: Angular charts, chart API, API, Ignite UI for Angular, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Chart Animations | Data Visualization | Infragistics
_description: Infragistics' Angular Chart Animations
_keywords: Angular Charts, Animations, Infragistics
_license: commercial
description: Infragistics' Angular Chart Animations
keywords: Angular Charts, Animations, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Chart Annotations | Data Visualization | Infragistics
_description: Infragistics' Angular Chart Annotations
_keywords: Angular Charts, Annotations, Infragistics
_license: commercial
description: Infragistics' Angular Chart Annotations
keywords: Angular Charts, Annotations, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Axis Options | Data Visualization | Infragistics
_description: Infragistics' Angular Axis Options
_keywords: Angular Axis, Options, Title, Labels, Gap, Overlap, Range, Scale, Mode, Infragistics
_license: commercial
description: Infragistics' Angular Axis Options
keywords: Angular Axis, Options, Title, Labels, Gap, Overlap, Range, Scale, Mode, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Data Aggregations | Data Visualization | Infragistics
_description: Infragistics' Angular Data Aggregations
_keywords: Angular Charts, Markers, Infragistics
_license: commercial
description: Infragistics' Angular Data Aggregations
keywords: Angular Charts, Markers, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Chart Data Tooltip | Data Visualization Tools | Infragistics
_description: Use Infragistics Ignite UI for Angular chart with the data tooltip layer!
_keywords: Angular charts, chart legend, legend, legend types, Ignite UI for Angular, Infragistics
_license: commercial
description: Use Infragistics Ignite UI for Angular chart with the data tooltip layer!
keywords: Angular charts, chart legend, legend, legend types, Ignite UI for Angular, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Chart Highlighting | Data Visualization | Infragistics
_description: Infragistics' Angular Chart Highlighting
_keywords: Angular Charts, Highlighting, Infragistics
_license: commercial
description: Infragistics' Angular Chart Highlighting
keywords: Angular Charts, Highlighting, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Angular Chart Markers | Data Visualization | Infragistics
_description: Infragistics' Angular Chart Markers
_keywords: Angular Charts, Markers, Infragistics
_license: commercial

description: Infragistics' Angular Chart Markers
keywords: Angular Charts, Markers, Marker Size, Infragistics
license: commercial
mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"]
namespace: Infragistics.Controls.Charts
---
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
Expand All @@ -22,6 +22,38 @@ The colors of the markers are also managed by setting the <ApiLink type="Categor

<Sample src="/charts/category-chart/marker-options" height={500} alt="Angular Configuration Options Example" />

## Angular Chart Marker Size

You can control the exact device-independent pixel dimensions of data point markers by setting the `MarkerSize` property on any series that supports markers. This gives you precise control over how large markers appear on screen, regardless of the marker template or style being used.

By default, marker sizing is determined by the series marker template. When you set `MarkerSize` to a specific numeric value, all markers in that series render at that exact device-independent pixel width and height. Setting `MarkerSize` back to `NaN` restores the default template-driven sizing.

The `MarkerSize` property is available on all series types that derive from `MarkerSeries`, including `LineSeries`, `SplineSeries`, `AreaSeries`, `ColumnSeries`, `ScatterSeries`, `ScatterLineSeries`, `ScatterSplineSeries`, and polar/radial series types.

The following code examples show how to set `MarkerSize` to 30 device-independent pixels on a `ScatterLineSeries` in the `XamDataChart` control:

To reset markers to their default template-driven size, set `MarkerSize` to `NaN` (or remove the attribute in markup):

The following sample demonstrates `MarkerSize` on scatter series with an interactive editor:

<Sample src="/charts/data-chart/scatter-marker-options" height={500} alt="Angular Chart Marker Size Example" />

<DocsAside type="note">
For `BubbleSeries`, the `MarkerSize` property does not override the bubble radius, which is controlled by the radius data column and the `RadiusScale`. Bubble sizes remain entirely driven by the data and scale configuration.
</DocsAside>

<div class="divider--half"></div>

## Angular Chart Checkmark Marker Type

The Ignite UI for Angular charts include a `Checkmark` option in the `MarkerType` enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart.

You can apply the `Checkmark` marker type to an individual series by setting its `MarkerType` property to `MarkerType.Checkmark`. To use the checkmark shape for all series in the chart simultaneously, set the chart's `MarkerAutomaticBehavior` property to `MarkerAutomaticBehavior.Checkmark`.

The `SeriesViewer.CheckmarkMarkerTemplate` property defines the marker template used for series with a checkmark marker type, and can be used to customize its appearance across the chart.

<div class="divider--half"></div>

## Angular Chart Marker Templates

In addition to marker properties, you can implement your own marker by setting a function to the <ApiLink type="CategoryChart" member="markerTemplate" label="MarkerTemplate" /> property of a series rendered in the <ApiLink type="CategoryChart" /> control as it is demonstrated in example below.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Data Chart | Data Visualization Tools | Navigation | Infragistics
_description: Navigate Infragistics' Angular charts by panning right and left and zooming horizontally and vertically using mouse or touch. Learn about Ignite UI for Angular graph navigation capabilities!
_keywords: Angular charts, data chart, navigation, Ignite UI for Angular, Infragistics
_license: commercial
description: Navigate Infragistics' Angular charts by panning right and left and zooming horizontally and vertically using mouse or touch. Learn about Ignite UI for Angular graph navigation capabilities!
keywords: Angular charts, data chart, navigation, Ignite UI for Angular, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Chart Overlays | Data Visualization Tools | Value Overlay | Infragistics
_description: Use Infragistics Ignite UI for Angular chart control's value overlay feature to place horizontal or vertical lines at a single numeric value. Learn about our Ignite UI for Angular graph types!
_keywords: Angular charts, data chart, value overlay, Ignite UI for Angular, Infragistics
_license: commercial
description: Use Infragistics Ignite UI for Angular chart control's value overlay feature to place horizontal or vertical lines at a single numeric value. Learn about our Ignite UI for Angular graph types!
keywords: Angular charts, data chart, value overlay, Ignite UI for Angular, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ The following table lists chart types in order from the fastest performance to s
| Pie Charts | - [Pie Chart](../types/pie-chart.md) <br /> - [Donut Chart](../types/donut-chart.md) <br /> - [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart) |
| Line Charts | - [Category Line Chart](../types/line-chart.md#angular-line-chart-example) <br /> - [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example) <br /> - [Step Line Chart](../types/step-chart.md#angular-step-line-chart) <br /> - [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart) <br /> - [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart) <br /> - [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart) <br /> - [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*) <br /> - [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart) <br /> - [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart) <br /> - [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart) <br /> |
| Area Charts | - [Category Area Chart](../types/area-chart.md#angular-area-chart-example) <br /> - [Step Area Chart](../types/step-chart.md#angular-step-area-chart) <br /> - [Range Area Chart](../types/area-chart.md#angular-range-area-chart) <br /> - [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart) <br /> - [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart) <br /> - [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*) <br /> - [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart) <br /> - [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart) <br /> - [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart) <br /> |
| Column Charts | - [Column Chart](../types/column-chart.md#angular-column-chart-example) <br /> - [Bar Chart](../types/bar-chart.md#angular-bar-chart-example) <br /> - [Waterfall Chart](../types/column-chart.md#angular-waterfall-chart) <br /> - [Range Column Chart](../types/column-chart.md#angular-range-column-chart) <br /> - [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart) <br /> - [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart) <br /> - [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart) <br /> - [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart) <br /> - [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) |
| Column Charts | - [Column Chart](../types/column-chart.md#angular-column-chart-example) <br /> - [Bar Chart](../types/bar-chart.md#angular-bar-chart-example) <br /> - [Waterfall Chart](../types/column-chart.md#angular-waterfall-chart) <br /> - [Range Column Chart](../types/column-chart.md#angular-range-column-chart) <br /> - [Range Bar Chart](../types/bar-chart.md#angular-range-bar-chart) <br /> - [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart) <br /> - [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart) <br /> - [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart) <br /> - [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart) <br /> - [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) |
| Spline Charts | - [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example) <br /> - [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart) <br /> - [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart) <br /> - [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart) <br /> - [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart) <br /> |
| Point Charts | - [Category Point Chart](../types/point-chart.md) <br /> - [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart) <br /> - [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart) <br /> - [Scatter Bubble Chart](../types/bubble-chart.md) <br /> - [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart) <br /> |
| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md) <br /> - [Stock Chart in Column Mode](../types/stock-chart.md) <br /> - [Stock Chart in Bar Mode](../types/stock-chart.md) <br /> - [Stock Chart in Candle Mode](../types/stock-chart.md) <br /> - [Stock Chart with Overlays](../types/stock-chart.md) <br /> - [Stock Chart with Zoom Pane](../types/stock-chart.md) <br /> - [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane) <br /> - [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane) <br /> |
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Chart Trendlines | Data Visualization | Infragistics
_description: Infragistics' Angular Chart Trendlines
_keywords: Angular Charts, Trendlines, Infragistics
_license: commercial
description: Infragistics' Angular Chart Trendlines
keywords: Angular Charts, Trendlines, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: "Angular Bar Chart and Graph | Ignite UI for Angular"
description: "Angular Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories. Try for FREE."
keywords: "Angular Charts, Bar Chart, Bar Graph, Horizontal Chart, Infragistics"
license: commercial
mentionedTypes: ["DataChart", "BarSeries", "StackedBarSeries", "Stacked100BarSeries", "Series"]
mentionedTypes: ["DataChart", "BarSeries", "StackedBarSeries", "Stacked100BarSeries", "RangeBarSeries", "Series"]
namespace: Infragistics.Controls.Charts
---
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
Expand Down Expand Up @@ -95,6 +95,20 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by

<Sample src="/charts/data-chart/stacked-100-bar-chart" height={600} alt="Angular Stacked 100 Bar Chart" />

<div class="divider--half"></div>

## Angular Range Bar Chart

The Angular Range Bar Chart belongs to a group of range charts and is rendered using horizontal rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the left like the traditional [Category Bar Chart](bar-chart.md#angular-bar-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items.

Range values are represented on the X-Axis and categories are displayed on the Y-Axis. Because each bar visualizes both a low value and a high value, this chart is useful for scenarios such as showing daily temperature ranges, minimum and maximum prices, or any bounded measurements where a single value is not sufficient.

The Range Bar Chart is identical to the [Range Column Chart](column-chart.md#angular-range-column-chart) in all aspects except that the ranges are represented as a set of horizontal bars rather than vertical columns.

You can create this type of chart in the <ApiLink pkg="charts" type="DataChart" /> control by binding your data to a <ApiLink pkg="charts" type="RangeBarSeries" />. The series reads low and high values from `LowMemberPath` and `HighMemberPath`, and it typically uses a `NumericXAxis` with a `CategoryYAxis`, as shown in the example below:

<Sample src="/charts/data-chart/range-bar-chart" height={600} alt="Angular Range Bar Chart" />

## Additional Resources

You can find more information about related chart types in these topics:
Expand All @@ -111,4 +125,5 @@ You can find more information about related chart types in these topics:
<ApiLink type="CalloutLayer" />
<ApiLink type="StackedBarSeries" />
<ApiLink type="Stacked100BarSeries" />
<ApiLink type="RangeBarSeries" />
<ApiLink type="BarSeries" member="dataSource" label="DataSource" />
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Bubble Chart | Data Visualization | Infragistics
_description: Infragistics' Angular Bubble Chart
_keywords: Angular Charts, Bubble Chart, Infragistics
_license: commercial
description: Infragistics' Angular Bubble Chart
keywords: Angular Charts, Bubble Chart, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Pie Charts and Graphs | Ignite UI for Angular
_description: The Ignite UI for Angular data pie chart is a specialized UI control that renders a pie chart, consisting of a circular area divided into sections. Try for FREE.
_keywords: Angular charts, pie chart, Ignite UI for Angular, Infragistics, data binding, slice selection, animation, highlighting, legend
_license: commercial
description: The Ignite UI for Angular data pie chart is a specialized UI control that renders a pie chart, consisting of a circular area divided into sections. Try for FREE.
keywords: Angular charts, pie chart, Ignite UI for Angular, Infragistics, data binding, slice selection, animation, highlighting, legend
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Shape Chart | Data Visualization | Infragistics
_description: Infragistics' Angular Shape Chart
_keywords: Angular Charts, Shape Chart, Infragistics
_license: commercial
description: Infragistics' Angular Shape Chart
keywords: Angular Charts, Shape Chart, Infragistics
license: commercial

namespace: Infragistics.Controls.Charts
---
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Angular Excel Library| Working with Charts | Infragistics
_description: Use the Infragistics' Angular excel library's chart feature to add visual charting representations of data trends across regions of cells in a worksheet. Visualize Ignite UI for Angular excel data in over 70 chart types!
_keywords: Excel library, charts, Ignite UI for Angular, Infragistics
_license: commercial
description: Use the Infragistics' Angular excel library's chart feature to add visual charting representations of data trends across regions of cells in a worksheet. Visualize Ignite UI for Angular excel data in over 70 chart types!
keywords: Excel library, charts, Ignite UI for Angular, Infragistics
license: commercial

---
import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
Expand Down
17 changes: 0 additions & 17 deletions docs/angular/src/content/en/components/excel-library.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -43,23 +43,6 @@ import { IgxExcelModule } from 'igniteui-angular-excel';
export class AppModule {}
```

```ts
import { IgrExcelModule } from 'igniteui-react-excel';

IgrExcelModule.register();
```

```ts
// Module Manager for registering the modules of the chart
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcExcelModule } from 'igniteui-webcomponents-excel';

// register the modules
ModuleManager.register(
IgcExcelModule
);
```

## Modules Implementation

The Excel Library contains 5 modules that you can use to limit bundle size of your app:
Expand Down
Loading
Loading