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
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ This example shows how configure the axis gridline to display major and minor gr

<Sample src="/charts/category-chart/axis-gridlines" height={450} alt="Angular Axis Gridlines Example" />

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

## Angular Axis Gridlines Properties

Setting the axis interval property specifies how often major gridlines and axis labels are rendered on an axis. Similarly, the axis minor interval property specifies how frequent minor gridlines are rendered on an axis.
Expand Down Expand Up @@ -70,8 +68,6 @@ The following example demonstrates a <ApiLink type="DataChart" /> with the above

<Sample src="/charts/data-chart/dash-array-axes" height={450} alt="Angular Axis Dash Array Example" />

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

## Angular Axis Tickmarks Example

Axis tick marks are enabled by setting the <ApiLink type="CategoryChart" member="xAxisTickLength" label="XAxisTickLength" /> and <ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" /> properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks.
Expand All @@ -82,8 +78,6 @@ The following example demonstrates how to customize the tickmarks by setting the

<Sample src="/charts/category-chart/axis-tickmarks" height={450} alt="Angular Axis Tickmarks Example" />

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

## Angular Axis Tickmarks Properties

You can customize how the axis tickmarks are displayed in our Angular chats by setting the following properties:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,6 @@ The following example depicts a stock price and trade volume chart with a [Stock

<Sample src="/charts/data-chart/axis-sharing" height={450} alt="Angular Axis Sharing Example" />

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

### Axis Crossing Example

In addition to placing axes outside plot area, the Angular <ApiLink type="DataChart" /> also provides options to position axes inside of plot area and make them cross at specific values. For example, you can create trigonometric chart by setting <ApiLink type="Axis" member="crossingAxis" label="CrossingAxis" /> and <ApiLink type="Axis" member="crossingValue" label="CrossingValue" /> properties on both x-axis and y-axis to render axis lines and axis labels such that they are crossing at (0, 0) origin point.
Expand All @@ -56,8 +54,6 @@ The following example shows a Sin and Cos wave represented by a [Scatter Spline

<Sample src="/charts/data-chart/axis-crossing" height={450} alt="Angular Axis Crossing Axes Example" />

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

## Additional Resources

You can find more information about related chart features in these topics:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,12 @@ The axis titles feature of the Angular charts, allows you to add contextual info

<Sample src="/charts/category-chart/axis-titles" height={450} alt="Angular Axis Titles Example" />

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

## 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.

<Sample src="/charts/category-chart/axis-labels" height={450} alt="Angular Axis Labels Example" />

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

## Axis Labels Management & Formatting

The axes of the chart have the ability to perform an enhanced calculation regarding the amount of space available to the labels of the owning axis. This enhanced calculation allows the axis to optimize the amount of space given to it in order to display more labels for the given axis.
Expand All @@ -47,8 +43,6 @@ The following example formats the yAxis with a <ApiLink pkg="geo-core" type="Num

<Sample src="/charts/category-chart/format-specifiers" height={450} alt="Angular Format Specifiers for Axis Labels" />

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

## Axis Range Example

In the Angular charts, you can define a range minimum and range maximum value of a numeric or time axis. The range minimum is the lowest value of the axis and the range maximum is the highest value of the axis. These are set by setting the <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" /> and <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" /> options.
Expand All @@ -57,8 +51,6 @@ By default, charts will calculate the minimum and maximum values for the numeric

<Sample src="/charts/category-chart/axis-range" height={450} alt="Angular Axis Range Example" />

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

## Axis Modes & Scale

In the <ApiLink type="FinancialChart" /> and <ApiLink type="CategoryChart" /> controls, you can choose if your data is plotted on logarithmic scale along the y-axis when the <ApiLink type="CategoryChart" member="yAxisIsLogarithmic" label="YAxisIsLogarithmic" /> property is set to true or on linear scale when this property is set to false (default value). With the <ApiLink type="CategoryChart" member="yAxisLogarithmBase" label="YAxisLogarithmBase" /> property, you can change base of logarithmic scale from default value of 10 to other integer value.
Expand All @@ -69,8 +61,6 @@ In addition to <ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMod

<Sample src="/charts/financial-chart/axis-types" height={450} alt="Angular Axis Range Example" />

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

## Axis Gap Example

The <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> property of the Angular charts, determines the amount of space between columns or bars of plotted series. This property accepts a numeric value between 0.0 and 1.0. The value represents a relative width of the gap out of the available number of pixels between the series. Setting this property to 0 would mean there is no gap rendered between the series, and setting it 1 would render the maximum available gap.
Expand All @@ -83,8 +73,6 @@ The following example shows the average maximum temperature in Celsius in New Yo

<Sample src="/charts/category-chart/axis-gap" height={450} alt="Angular Axis Gap Example" />

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

## Axis Overlap Example

The <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> property of the Angular charts, allows setting the overlap of the rendered columns or bars of plotted series. This property accepts a numeric value between -1.0 and 1.0. The value represents a relative overlap out of the available number of pixels dedicated to each series. Setting this property to a negative value (down to -1.0) results in the categories being pushed away from each other, producing a gap between themselves. Conversely, setting this property to a positive value (up to 1.0) results in the categories overlapping each other. A value of 1 directs the chart to render the categories on top of each other.
Expand All @@ -93,8 +81,6 @@ The following example shows a comparison of the highest grossing worldwide film

<Sample src="/charts/category-chart/axis-overlap" height={450} alt="Angular Axis Overlap Example" />

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

## Additional Resources

You can find more information about related chart features in these topics:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ For example, you can use DataAnnotationSliceLayer to annotate stock prices with

<Sample src="/charts/data-chart/data-annotation-slice-layer" height={500} alt="Angular Data Annotation Slice Layer Example" />

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

## Angular Data Annotation Strip Layer Example

In Angular, the <ApiLink type="DataAnnotationStripLayer" /> renders multiple vertical or horizontal strips between 2 values on an axis in the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the <ApiLink type="DataAnnotationStripLayer" /> also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property.
Expand All @@ -46,8 +44,6 @@ For example, you can use <ApiLink type="DataAnnotationStripLayer" /> to annotate

<Sample src="/charts/data-chart/data-annotation-strip-layer" height={500} alt="Angular Data Annotation Strip Layer Example" />

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

## Angular Data Annotation Line Layer Example

In Angular, <ApiLink type="DataAnnotationLineLayer" /> renders multiple lines between 2 points in plot area of the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> properties and the ending points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" /> properties.
Expand All @@ -56,8 +52,6 @@ For example, you can use DataAnnotationLineLayer to annotate growth and decline

<Sample src="/charts/data-chart/data-annotation-line-layer" height={500} alt="Angular Data Annotation Line Layer Example" />

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

## Angular Data Annotation Rect Layer Example

In Angular, the <ApiLink type="DataAnnotationRectLayer" /> renders multiple rectangles defined by starting and ending points in plot area of the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> properties and the ending points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" /> properties.
Expand All @@ -66,8 +60,6 @@ For example, you can use DataAnnotationRectLayer to annotate bearish patterns an

<Sample src="/charts/data-chart/data-annotation-rect-layer" height={500} alt="Angular Data Annotation Rect Layer Example" />

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

## Angular Data Annotation Band Layer Example

In Angular, the <ApiLink type="DataAnnotationBandLayer" /> renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> properties and the ending points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" /> properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property.
Expand All @@ -76,8 +68,6 @@ For example, you can use DataAnnotationBandLayer to annotate range of growth in

<Sample src="/charts/data-chart/data-annotation-band-layer" height={600} alt="Angular Data Annotation Band Layer Example" />

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

## API References

The following is a list of API members mentioned in the above sections:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@ The following sample demonstrates `MarkerSize` on scatter series with an interac
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.
Expand All @@ -54,8 +52,6 @@ You can apply the `Checkmark` marker type to an individual series by setting its

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
Expand Up @@ -19,8 +19,6 @@ The title and subtitle feature of the chart control allows you to add informatio

<Sample src="/charts/category-chart/line-chart-with-titles" height={600} alt="Angular Chart Synchronization Example" />

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

## API References

When adding a title or subtitle to the chart control, the content of the chart automatically resizes allowing for the title and subtitle information.
Expand Down
Loading
Loading