diff --git a/chart-sdk/react/3d-charts/Chart-types/bar.md b/chart-sdk/react/3d-charts/Chart-types/bar.md index 5d0fbb490..634037a94 100644 --- a/chart-sdk/react/3d-charts/Chart-types/bar.md +++ b/chart-sdk/react/3d-charts/Chart-types/bar.md @@ -1,14 +1,14 @@ --- layout: post -title: Bar chart in React 3D Chart component | Syncfusion -description: Learn here all about bar chart in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Bar Chart in React 3D Charts | Syncfusion +description: Learn how to render a 3D bar chart in Syncfusion React 3D Charts to compare values across categories with a horizontal cylindrical look. +control: Bar Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bar Chart in React 3D Chart component +# Bar Chart in React 3D Charts ## Bar chart diff --git a/chart-sdk/react/3d-charts/Chart-types/column.md b/chart-sdk/react/3d-charts/Chart-types/column.md index 77d4fb20a..3d9a88c36 100644 --- a/chart-sdk/react/3d-charts/Chart-types/column.md +++ b/chart-sdk/react/3d-charts/Chart-types/column.md @@ -1,14 +1,14 @@ --- layout: post -title: Column Chart in React 3D Chart component | Syncfusion -description: Learn here all about column chart in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Column Chart in React 3D Charts | Syncfusion +description: Learn how to render a 3D column chart in Syncfusion React 3D Charts to compare values across categories with a vertical cylindrical look. +control: Column Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Column Chart in React 3D Chart control +# Column Chart in React 3D Charts ## Column chart diff --git a/chart-sdk/react/3d-charts/Chart-types/stack-bar.md b/chart-sdk/react/3d-charts/Chart-types/stack-bar.md index f44acb701..4fada0e12 100644 --- a/chart-sdk/react/3d-charts/Chart-types/stack-bar.md +++ b/chart-sdk/react/3d-charts/Chart-types/stack-bar.md @@ -1,13 +1,13 @@ --- layout: post -title: Stacked Bar Chart in React 3D Chart component | Syncfusion -description: Learn here all about stacked bar chart in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Stacked Bar Chart in React 3D Charts | Syncfusion +description: Learn how to render a stacked 3D bar chart in Syncfusion React 3D Charts to show the contribution of multiple series to a total horizontal value. +control: Stack Bar Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked bar chart in React Chart component +# Stacked Bar Chart in React 3D Charts ## Stacked bar chart diff --git a/chart-sdk/react/3d-charts/Chart-types/stack-column.md b/chart-sdk/react/3d-charts/Chart-types/stack-column.md index 6af65e9fa..af73d779c 100644 --- a/chart-sdk/react/3d-charts/Chart-types/stack-column.md +++ b/chart-sdk/react/3d-charts/Chart-types/stack-column.md @@ -1,14 +1,14 @@ --- layout: post -title: Stacked Column Chart in React 3D Chart component | Syncfusion -description: Learn here all about stacked column chart in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Stacked Column Chart in React 3D Charts | Syncfusion +description: Learn how to render a stacked 3D column charts in Syncfusion React 3D Chart to show the contribution of multiple series to a total vertical value. +control: Stack Column Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked column chart in React 3D Chart control +# Stacked Column Chart in React 3D Charts ## Stacked column chart diff --git a/chart-sdk/react/3d-charts/Chart-types/stacked-bar.md b/chart-sdk/react/3d-charts/Chart-types/stacked-bar.md index 10f100e6f..5dd58f9a1 100644 --- a/chart-sdk/react/3d-charts/Chart-types/stacked-bar.md +++ b/chart-sdk/react/3d-charts/Chart-types/stacked-bar.md @@ -1,14 +1,14 @@ --- layout: post -title: 100% Stacked Bar Chart in React 3D Chart component | Syncfusion -description: Learn here all about 100% stacked bar chart in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: 100% Stacked Bar Chart in React 3D Charts | Syncfusion +description: Learn how to render a 100% stacked 3D bar chart in Syncfusion React 3D Charts to show the relative share of each category as a full horizontal bar. +control: Stack Bar Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# 100% Stacked bar chart in React 3D Chart control +# 100% Stacked Bar Chart in React 3D Charts ## 100% Stacked bar chart diff --git a/chart-sdk/react/3d-charts/Chart-types/stacked-column.md b/chart-sdk/react/3d-charts/Chart-types/stacked-column.md index 18a7c1ddb..2e52e4842 100644 --- a/chart-sdk/react/3d-charts/Chart-types/stacked-column.md +++ b/chart-sdk/react/3d-charts/Chart-types/stacked-column.md @@ -1,14 +1,14 @@ --- layout: post -title: 100% Stacked Column Chart in React 3D Chart component | Syncfusion -description: Learn here all about 100% stacked column chart in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: 100% Stacked Column Chart in React 3D Charts | Syncfusion +description: Learn how to render a 100% stacked 3D column chart in Syncfusion React 3D Charts to show the relative share of each category as a full vertical bar. +control: Stack Column Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# 100% Stacked column chart in React 3D Chart control +# 100% Stacked Column Chart in React 3D Charts ## 100% Stacked column chart diff --git a/chart-sdk/react/3d-charts/accessibility.md b/chart-sdk/react/3d-charts/accessibility.md index bb0e917eb..5db2c5d8a 100644 --- a/chart-sdk/react/3d-charts/accessibility.md +++ b/chart-sdk/react/3d-charts/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React 3D Chart component | Syncfusion -description: Learn here all about accessibility in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Accessibility in React 3D Charts | Syncfusion +description: Learn how Syncfusion React 3D Charts support accessibility with WAI-ARIA roles, attributes, and keyboard navigation for screen readers. +control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React 3D Chart control +# Accessibility in React 3D Charts Accessibility is achieved in the 3D chart control through WAI-ARIA standard and keyboard navigation. The 3D chart features can be effectively accessed through assistive technologies such as screen readers. diff --git a/chart-sdk/react/3d-charts/appearance.md b/chart-sdk/react/3d-charts/appearance.md index bb099851b..0b1294482 100644 --- a/chart-sdk/react/3d-charts/appearance.md +++ b/chart-sdk/react/3d-charts/appearance.md @@ -1,14 +1,14 @@ --- layout: post -title: Appearance in React 3D Chart component | Syncfusion -description: Learn here all about appearance in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Appearance in React 3D Charts | Syncfusion +description: Learn how to customize the appearance of Syncfusion React 3D Charts with custom palettes, point colors, chart area, animation, rotation, and title styling. +control: Appearance platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in React 3D Chart control +# Appearance in React 3D Charts ## Custom color palette diff --git a/chart-sdk/react/3d-charts/axis-customization.md b/chart-sdk/react/3d-charts/axis-customization.md index 71553e5d8..cb15e4e5b 100644 --- a/chart-sdk/react/3d-charts/axis-customization.md +++ b/chart-sdk/react/3d-charts/axis-customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Axis customization in React 3D Chart component | Syncfusion -description: Learn here all about axis customization in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Axis Customization in React 3D Charts | Syncfusion +description: Learn how to customize axes in Syncfusion React 3D Charts with axis titles, tick lines, grid lines, multiple axes, inversed direction, and opposed position. +control: Axis Customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in React 3D Chart control +# Axis Customization in React 3D Charts ## Title diff --git a/chart-sdk/react/3d-charts/axis-labels.md b/chart-sdk/react/3d-charts/axis-labels.md index e321511a3..b38a449d9 100644 --- a/chart-sdk/react/3d-charts/axis-labels.md +++ b/chart-sdk/react/3d-charts/axis-labels.md @@ -1,14 +1,14 @@ --- layout: post -title: Axis labels in React 3D Chart component | Syncfusion -description: Learn here all about axis labels in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Axis Labels in React 3D Charts | Syncfusion +description: Learn how to handle axis labels in Syncfusion React 3D Charts with smart label placement, edge label fitting, and maximum labels per pixel range. +control: Axis Labels platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis labels in React 3D Chart control +# Axis Labels in React 3D Charts Axis labels are the labels that are positioned adjacent to the y-axis and beneath the x-axis. It provides descriptive information about the axis. diff --git a/chart-sdk/react/3d-charts/category-axis.md b/chart-sdk/react/3d-charts/category-axis.md index 825ecdcd4..7035d8a7f 100644 --- a/chart-sdk/react/3d-charts/category-axis.md +++ b/chart-sdk/react/3d-charts/category-axis.md @@ -1,14 +1,14 @@ --- layout: post -title: Category axis in React 3D Chart component | Syncfusion -description: Learn here all about category axis in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Category Axis in React 3D Charts | Syncfusion +description: Learn how to configure the category axis in the Syncfusion React 3D Charts to render text labels along the horizontal axis with flexible label placement. +control: Category Axis platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Category axis in React 3D Chart control +# Category Axis in React 3D Charts The category axis is the horizontal axis of a 3D chart that shows text values rather than numerical values. Compared to the vertical axis, this axis has fewer labels. The following sample shows to render the 3D chart using category axis. diff --git a/chart-sdk/react/3d-charts/data-label.md b/chart-sdk/react/3d-charts/data-label.md index 1a2eae0d0..0a96df541 100644 --- a/chart-sdk/react/3d-charts/data-label.md +++ b/chart-sdk/react/3d-charts/data-label.md @@ -1,14 +1,14 @@ --- layout: post -title: Data labels in React 3D Chart component | Syncfusion -description: Learn here all about data labels in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Data Labels in React 3D Charts | Syncfusion +description: Learn how to show point values on the Syncfusion React 3D Charts series using data labels with smart placement, text mapping, and template customization. +control: Data Label platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data labels in React 3D Chart control +# Data Labels in React 3D Charts Data labels are fields that includes information about the sample point connected to an output. It can be added to a chart series by enabling the [`visible`](https://helpej2.syncfusion.com/react/documentation/api/chart3d/dataLabelStyleModel#visible) option in the dataLabel. By default, the labels will arrange smartly without overlapping. diff --git a/chart-sdk/react/3d-charts/datetime-axis.md b/chart-sdk/react/3d-charts/datetime-axis.md index 7b20141b4..f37525e5e 100644 --- a/chart-sdk/react/3d-charts/datetime-axis.md +++ b/chart-sdk/react/3d-charts/datetime-axis.md @@ -1,14 +1,14 @@ --- layout: post -title: DateTime axis in React 3D Chart component | Syncfusion -description: Learn here all about DateTime axis in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: DateTime Axis in React 3D Charts | Syncfusion +description: Learn how to use the DateTime axis in the Syncfusion React 3D Charts to display time-scale values on the axis with a configurable date-time label format. +control: Datetime Axis platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# DateTime axis in React 3D Chart control +# DateTime Axis in React 3D Charts ## DateTime axis diff --git a/chart-sdk/react/3d-charts/dimensions.md b/chart-sdk/react/3d-charts/dimensions.md index f3d96ab33..d648a63e8 100644 --- a/chart-sdk/react/3d-charts/dimensions.md +++ b/chart-sdk/react/3d-charts/dimensions.md @@ -1,14 +1,14 @@ --- layout: post -title: Dimensions in React 3D Chart component | Syncfusion -description: Learn here all about dimensions in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Dimensions in React 3D Charts | Syncfusion +description: Learn how to set the Syncfusion React 3D Charts size to a fixed container, the parent element, or a custom width and height using CSS or inline style. +control: Dimensions platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dimensions in React 3D Chart control +# Dimensions in React 3D Charts ## Size for container diff --git a/chart-sdk/react/3d-charts/getting-started.md b/chart-sdk/react/3d-charts/getting-started.md index 2cf654cfa..4497fdec4 100644 --- a/chart-sdk/react/3d-charts/getting-started.md +++ b/chart-sdk/react/3d-charts/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with React 3D Chart component | Syncfusion -description: Check out and learn about the Getting started with the React 3D Chart component of Syncfusion Essential JS 2 and more details. -control: Getting started +title: Getting Started with React 3D Charts | Syncfusion +description: Learn how to get started with the Syncfusion React 3D Charts Component. Explore setup, features, examples, and customization options. +control: Getting Started platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting started with React 3D Chart component +# Getting Started with React 3D Charts This section describes the steps to create a simple 3D Chart component and demonstrates its basic usage. diff --git a/chart-sdk/react/3d-charts/legend.md b/chart-sdk/react/3d-charts/legend.md index 263a3238f..9cafdb61d 100644 --- a/chart-sdk/react/3d-charts/legend.md +++ b/chart-sdk/react/3d-charts/legend.md @@ -1,15 +1,15 @@ --- layout: post -title: Legend in React 3D Chart component | Syncfusion -description: Learn here all about legend in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Legend in React 3D Charts | Syncfusion +description: Learn how to enable the legend in the Syncfusion React 3D Charts to identify each series, with options for position, shape, paging, and click toggling. +control: Legend platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in React 3D Chart control +# Legend in React 3D Charts diff --git a/chart-sdk/react/3d-charts/logarithmic-axis.md b/chart-sdk/react/3d-charts/logarithmic-axis.md index d9f0b4430..733b993f2 100644 --- a/chart-sdk/react/3d-charts/logarithmic-axis.md +++ b/chart-sdk/react/3d-charts/logarithmic-axis.md @@ -1,14 +1,14 @@ --- layout: post -title: Logarithmic axis in React 3D Chart component | Syncfusion -description: Learn here all about logarithmic axis in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Logarithmic Axis in React 3D Charts | Syncfusion +description: Learn how to use the logarithmic axis in the Syncfusion React 3D Charts to plot data that spans several orders of magnitude on a customizable log scale. +control: Logarithmic Axis platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Logarithmic axis in React 3D Chart control +# Logarithmic Axis in React 3D Charts Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106). diff --git a/chart-sdk/react/3d-charts/multiple-pane.md b/chart-sdk/react/3d-charts/multiple-pane.md index 8799dcb82..39ba85e52 100644 --- a/chart-sdk/react/3d-charts/multiple-pane.md +++ b/chart-sdk/react/3d-charts/multiple-pane.md @@ -1,14 +1,14 @@ --- layout: post -title: Multiple panes in React 3D Chart component | Syncfusion -description: Learn here all about multiple panes in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Multiple Panes in React 3D Charts | Syncfusion +description: Learn how to split the Syncfusion React 3D Charts plot area into rows and columns of sized panes to compare multiple series in a single chart. +control: Multiple Panes platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Multiple panes in React 3D Chart control +# Multiple Panes in React 3D Charts The chart area can be divided into multiple panes using [`rows`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#rows) and [`columns`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#columns). diff --git a/chart-sdk/react/3d-charts/numeric-axis.md b/chart-sdk/react/3d-charts/numeric-axis.md index 208a383b8..d87b3ed40 100644 --- a/chart-sdk/react/3d-charts/numeric-axis.md +++ b/chart-sdk/react/3d-charts/numeric-axis.md @@ -1,8 +1,8 @@ --- layout: post -title: Numeric axis in React 3D Chart component | Syncfusion -description: Learn here all about numeric axis in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Numeric Axis in React 3D Charts | Syncfusion +description: Learn how to use the numeric axis in the Syncfusion React 3D Charts to plot double values with optional range padding, formatting, and label customization. +control: Numeric Axis platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Numeric axis in React 3D Chart control +# Numeric Axis in React 3D Charts The numeric axis can be used to represent the numeric values of data in 3D chart. By default, the `valueType` of an axis is **Double**. diff --git a/chart-sdk/react/3d-charts/print-export.md b/chart-sdk/react/3d-charts/print-export.md index 20bc8d9e2..6fa18afeb 100644 --- a/chart-sdk/react/3d-charts/print-export.md +++ b/chart-sdk/react/3d-charts/print-export.md @@ -1,14 +1,14 @@ --- layout: post -title: Print and Export in React 3D Chart component | Syncfusion -description: Learn here all about print and export in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Print and Export in React 3D Charts | Syncfusion +description: Learn how to print or export the Syncfusion React 3D Charts to PDF, image, or SVG using the public print and export methods on the chart instance. +control: Print platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and Export in React 3D Chart control +# Print and Export in React 3D Charts ## Print diff --git a/chart-sdk/react/3d-charts/selection.md b/chart-sdk/react/3d-charts/selection.md index 266f1380c..fecba3308 100644 --- a/chart-sdk/react/3d-charts/selection.md +++ b/chart-sdk/react/3d-charts/selection.md @@ -1,8 +1,8 @@ --- layout: post -title: Selection in React 3D Chart component | Syncfusion -description: Learn here all about selection in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Selection in React 3D Charts | Syncfusion +description: Learn how to select series or data points in the Syncfusion React 3D Charts on mouse click with selection modes for series, point, or cluster. +control: Selection platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Selection in React 3D Chart control +# Selection in React 3D Charts The 3D chart provides selection support for the series and its data points on mouse click. diff --git a/chart-sdk/react/3d-charts/tool-tip.md b/chart-sdk/react/3d-charts/tool-tip.md index 15018bdf8..f1b35f851 100644 --- a/chart-sdk/react/3d-charts/tool-tip.md +++ b/chart-sdk/react/3d-charts/tool-tip.md @@ -1,14 +1,14 @@ --- layout: post -title: Tooltip in React 3D Chart component | Syncfusion -description: Learn here all about tooltip in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Tooltip in React 3D Charts | Syncfusion +description: Learn how to enable tooltip in the Syncfusion React 3D Charts to show point details on hover, with template and format options for richer context. +control: Tooltip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in React 3D Chart control +# Tooltip in React 3D Charts diff --git a/chart-sdk/react/3d-charts/workig-with-data.md b/chart-sdk/react/3d-charts/workig-with-data.md index c6831b4cf..888e43e79 100644 --- a/chart-sdk/react/3d-charts/workig-with-data.md +++ b/chart-sdk/react/3d-charts/workig-with-data.md @@ -1,15 +1,15 @@ --- layout: post -title: Working with data source in React 3D Chart component | Syncfusion -description: Learn here all about working with data source in Syncfusion React 3D Chart component of Syncfusion Essential JS 2 and more. -control: 3D Chart +title: Working with Data in React 3D Charts | Syncfusion +description: Learn how to bind local or remote JSON data in the Syncfusion React 3D Charts by mapping fields to xName and yName on the series dataSource property. +control: Working with data platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Working with data in React 3D Chart control +# Working with Data in React 3D Charts ## Local Data diff --git a/chart-sdk/react/3d-circular-charts/data-label.md b/chart-sdk/react/3d-circular-charts/data-label.md index 4e5fcdcc3..c9fb9d141 100644 --- a/chart-sdk/react/3d-circular-charts/data-label.md +++ b/chart-sdk/react/3d-circular-charts/data-label.md @@ -1,14 +1,14 @@ --- layout: post -title: Data Label in React 3D Circular Chart component | Syncfusion -description: Learn here all about data label in Syncfusion React 3D Circular Chart component of Syncfusion Essential JS 2 and more. +title: Data Label in React 3D Circular Charts | Syncfusion +description: Learn how to show point values on the Syncfusion React 3D Circular Charts series using data labels with smart placement and template customization. control: Data Label platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data Label in React 3D Circular Chart component +# Data Label in React 3D Circular Charts A data label refers to a label associated with specific data points. It can be added to a 3D Circular Chart series by enabling the `visible` option in the `dataLabel` property. By default, the labels will arrange themselves smartly to avoid overlapping. diff --git a/chart-sdk/react/3d-circular-charts/empty-points.md b/chart-sdk/react/3d-circular-charts/empty-points.md index a88f6358d..5103fa709 100644 --- a/chart-sdk/react/3d-circular-charts/empty-points.md +++ b/chart-sdk/react/3d-circular-charts/empty-points.md @@ -1,14 +1,14 @@ --- layout: post -title: Empty points in React 3D Circular Chart component | Syncfusion -description: Learn here all about empty points in Syncfusion React 3D Circular Chart component of Syncfusion Essential JS 2 and more. +title: Empty Points in React 3D Circular Charts | Syncfusion +description: Learn how to handle missing or zero values in the Syncfusion React 3D Circular Charts by configuring empty-point mode, fill, and border. control: Empty points platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Empty points in React 3D Circular Chart component +# Empty Points in React 3D Circular Charts Data points containing `null` or `undefined` values are considered empty points. These empty data points are ignored and not plotted in the 3D Circular Chart. You can customize the handling of empty points using the `emptyPointSettings` property in the series. The default mode for empty points is `Gap`. Other supported modes include `Average`, `Drop`, and `Zero`. diff --git a/chart-sdk/react/3d-circular-charts/getting-started.md b/chart-sdk/react/3d-circular-charts/getting-started.md index 5993c6670..42cf6ef3c 100644 --- a/chart-sdk/react/3d-circular-charts/getting-started.md +++ b/chart-sdk/react/3d-circular-charts/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with React 3D Circular Chart component | Syncfusion -description: Check out and learn about getting started with the React 3D Circular Chart component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React 3D Circular Charts Component | Syncfusion +description: Learn how to get started with the Syncfusion React 3D Circular Charts control. Explore setup, features, examples, and customization options. control: Getting started platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting started with React 3D Circular Chart component +# Getting Started with React 3D Circular Charts This section describes the steps to create a simple 3D Circular Chart and demonstrates the basic usage of the 3D Circular Chart component. diff --git a/chart-sdk/react/3d-circular-charts/legend.md b/chart-sdk/react/3d-circular-charts/legend.md index ea60e2c83..fd2348cb9 100644 --- a/chart-sdk/react/3d-circular-charts/legend.md +++ b/chart-sdk/react/3d-circular-charts/legend.md @@ -1,14 +1,14 @@ --- layout: post -title: Legend in React 3D Circular Chart component | Syncfusion -description: Learn here all about legend in Syncfusion React 3D Circular Chart component of Syncfusion Essential JS 2 and more. +title: Legend in React 3D Circular Charts Component | Syncfusion +description: Learn how to enable the legend in the Syncfusion React 3D Circular Charts to identify each slice, with options for position, shape, paging and more. control: Legend platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in React 3D Circular Chart component +# Legend in React 3D Circular Charts The legend provides information about the data points rendered in the 3D Circular Chart. It can be added by enabling the `visible` option in the `legendSettings` property. diff --git a/chart-sdk/react/3d-circular-charts/pie-donut-chart.md b/chart-sdk/react/3d-circular-charts/pie-donut-chart.md index f9740dc95..4b4ed9c40 100644 --- a/chart-sdk/react/3d-circular-charts/pie-donut-chart.md +++ b/chart-sdk/react/3d-circular-charts/pie-donut-chart.md @@ -1,14 +1,14 @@ --- layout: post -title: Pie and Donut in React 3D Circular Chart component | Syncfusion -description: Learn here all about Pie and Donut in Syncfusion React 3D Circular Chart component of Syncfusion Essential JS 2 and more. +title: Pie and Donut in React 3D Circular Charts Component | Syncfusion +description: Learn how to render pie and donut series in the Syncfusion React 3D Circular Charts to compare category shares with inner-radius and explode options. control: Pie and Donut platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pie and Donut in React 3D Circular Chart component +# Pie and Donut in React 3D Circular Charts ## Pie chart diff --git a/chart-sdk/react/3d-circular-charts/print-and-export.md b/chart-sdk/react/3d-circular-charts/print-and-export.md index 5bab3d453..9c9ea81cd 100644 --- a/chart-sdk/react/3d-circular-charts/print-and-export.md +++ b/chart-sdk/react/3d-circular-charts/print-and-export.md @@ -1,14 +1,14 @@ --- layout: post -title: Print and Export in React 3D Circular Chart | Syncfusion -description: Learn here all about print and export in Syncfusion React 3D Circular Chart component of Syncfusion Essential JS 2 and more. +title: Print and Export in React 3D Circular Charts | Syncfusion +description: Learn how to print or export the Syncfusion React 3D Circular Charts to PDF, image, or SVG using the public print and export methods. control: Print and Export platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and Export in React 3D Circular Chart component +# Print and Export in React 3D Circular Charts ## Print diff --git a/chart-sdk/react/3d-circular-charts/title-and-subtitle.md b/chart-sdk/react/3d-circular-charts/title-and-subtitle.md index e9ef256e3..9ed71bbf6 100644 --- a/chart-sdk/react/3d-circular-charts/title-and-subtitle.md +++ b/chart-sdk/react/3d-circular-charts/title-and-subtitle.md @@ -1,14 +1,14 @@ --- layout: post -title: Title and subtitle in React 3D Circular Chart component | Syncfusion -description: Learn here all about title and subtitle in Syncfusion React 3D Circular Chart component of Syncfusion Essential JS 2 and more. +title: Title and Subtitle in React 3D Circular Charts | Syncfusion +description: Learn how to add and customize a title and subtitle for the Syncfusion React 3D Circular Charts using text, alignment, and style options. control: Title and subtitle platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title and subtitle in React 3D Circular Chart component +# Title and Subtitle in React 3D Circular Charts ## Title diff --git a/chart-sdk/react/3d-circular-charts/tooltip.md b/chart-sdk/react/3d-circular-charts/tooltip.md index ccd35bd8d..f9a56832e 100644 --- a/chart-sdk/react/3d-circular-charts/tooltip.md +++ b/chart-sdk/react/3d-circular-charts/tooltip.md @@ -1,14 +1,14 @@ --- layout: post -title: Tooltip in React 3D Circular Chart component | Syncfusion -description: Learn here all about tooltip in Syncfusion React 3D Circular Chart component of Syncfusion Essential JS 2 and more. +title: Tooltip in React 3D Circular Charts | Syncfusion +description: Learn how to enable tooltips in the Syncfusion React 3D Circular Charts to show point details on hover with template and format options. control: Tooltip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in React 3D Circular Chart component +# Tooltip in React 3D Circular Charts The 3D Circular Chart will display details about the points through a tooltip, when the mouse is moved over a specific point. By default, the tooltip is not visible. It can be enabled by using the `enable` property in `tooltip` to **true**. diff --git a/chart-sdk/react/accumulation-charts/accessibility.md b/chart-sdk/react/accumulation-charts/accessibility.md index cce94132d..f2c6539c0 100644 --- a/chart-sdk/react/accumulation-charts/accessibility.md +++ b/chart-sdk/react/accumulation-charts/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React Accumulation chart component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. -control: Accessibility +title: Accessibility in React Accumulation Charts | Syncfusion +description: Learn how the Syncfusion React Accumulation Charts support accessibility with WAI-ARIA roles, attributes, and keyboard navigation for screen readers. +control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React Accumulation chart component +# Accessibility in React Accumulation Charts The Accumulation chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/react/accumulation-charts/advanced-accessibility-configuration.md b/chart-sdk/react/accumulation-charts/advanced-accessibility-configuration.md index 95392f2fc..cd1060875 100644 --- a/chart-sdk/react/accumulation-charts/advanced-accessibility-configuration.md +++ b/chart-sdk/react/accumulation-charts/advanced-accessibility-configuration.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility customization | Syncfusion -description: Learn here all about Accessibility customization in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. +title: Accessibility Customization in React Accumulation Charts | Syncfusion +description: Learn how to configure advanced accessibility options in the Syncfusion React Accumulation Charts with custom ARIA attributes, roles, and keyboard patterns. control: Accessibility customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility customization +# Accessibility Customization in React Accumulation Charts The Syncfusion® React Accumulation Chart control is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the React Accumulation Chart control's accessibility customization are briefly explained in this section. diff --git a/chart-sdk/react/accumulation-charts/annotation.md b/chart-sdk/react/accumulation-charts/annotation.md index c17d284a6..7e7fd3f9a 100644 --- a/chart-sdk/react/accumulation-charts/annotation.md +++ b/chart-sdk/react/accumulation-charts/annotation.md @@ -1,14 +1,14 @@ --- layout: post -title: Annotation in React Accumulation chart component | Syncfusion -description: Learn here all about Annotation in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. -control: Annotation +title: Annotation in React Accumulation Charts | Syncfusion +description: Learn how to add text, shape, or image annotations to the Syncfusion React Accumulation Charts using region, coordinate units, and alignment options. +control: Annotation platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Annotation in React Accumulation chart component +# Annotation in React Accumulation Charts The annotations are used to mark the specific area of interest in the chart area with texts, shapes or images. diff --git a/chart-sdk/react/accumulation-charts/appearance.md b/chart-sdk/react/accumulation-charts/appearance.md index ce61f5e9c..b4890b2a4 100644 --- a/chart-sdk/react/accumulation-charts/appearance.md +++ b/chart-sdk/react/accumulation-charts/appearance.md @@ -1,14 +1,14 @@ --- layout: post -title: Appearance in React Accumulation chart component | Syncfusion -description: Learn here all about Appearance in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. -control: Appearance +title: Appearance in React Accumulation Charts | Syncfusion +description: Learn how to customize the appearance of the Syncfusion React Accumulation Charts with custom palettes and animation. +control: Appearance platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in React Accumulation chart component +# Appearance in React Accumulation Charts ## Custom Color Palette diff --git a/chart-sdk/react/accumulation-charts/centerlabel.md b/chart-sdk/react/accumulation-charts/centerlabel.md index d7a33d73a..d779d0ecd 100644 --- a/chart-sdk/react/accumulation-charts/centerlabel.md +++ b/chart-sdk/react/accumulation-charts/centerlabel.md @@ -1,14 +1,14 @@ --- layout: post -title: Center label in React Accumulation chart component | Syncfusion -description: Learn here all about Center label in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. -control: Center label +title: Center Label in React Accumulation Charts | Syncfusion +description: Learn how to show a center label in the Syncfusion React Accumulation Charts doughnut to display total, percentage, or custom text in the inner radius. +control: Center label platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Center label in React Accumulation chart component +# Center Label in React Accumulation Charts ## Center label diff --git a/chart-sdk/react/accumulation-charts/chart-print.md b/chart-sdk/react/accumulation-charts/chart-print.md index 4a9777db7..f7c9df6c7 100644 --- a/chart-sdk/react/accumulation-charts/chart-print.md +++ b/chart-sdk/react/accumulation-charts/chart-print.md @@ -1,14 +1,14 @@ --- layout: post -title: Chart print in React Accumulation chart component | Syncfusion -description: Learn here all about Chart print in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. +title: Print and Export in React Accumulation Charts | Syncfusion +description: Learn how to print or export the Syncfusion React Accumulation Charts to PDF, image, or SVG using the public print and export methods. control: Chart print platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart print in React Accumulation chart component +# Print and Export in React Accumulation Charts ## Print diff --git a/chart-sdk/react/accumulation-charts/data-label.md b/chart-sdk/react/accumulation-charts/data-label.md index 7e0233c51..b689315bc 100644 --- a/chart-sdk/react/accumulation-charts/data-label.md +++ b/chart-sdk/react/accumulation-charts/data-label.md @@ -1,14 +1,14 @@ --- layout: post -title: Data label in React Accumulation chart component | Syncfusion -description: Learn here all about Data label in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. +title: Data Label in React Accumulation Charts | Syncfusion +description: Learn how to show point values on the Syncfusion React Accumulation Charts series using data labels with smart placement and template customization. control: Data label platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data label in React Accumulation chart component +# Data Label in React Accumulation Charts Data label can be added to a chart series by enabling the [`visible`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationDataLabelSettings#visible) option in the dataLabel property. diff --git a/chart-sdk/react/accumulation-charts/dynamic-data-update.md b/chart-sdk/react/accumulation-charts/dynamic-data-update.md index 1114cbcfb..3654eefcb 100644 --- a/chart-sdk/react/accumulation-charts/dynamic-data-update.md +++ b/chart-sdk/react/accumulation-charts/dynamic-data-update.md @@ -1,15 +1,15 @@ --- layout: post -title: Dynamic data update in Accumulation Chart component | Syncfusion -description: Learn here all about dynamic data update in Syncfusion Accumulation Chart component in Syncfusion Essential JS 2 and more. -platform: chart-sdk +title: Dynamic Data Update in React Accumulation Charts | Syncfusion +description: Learn how to update the Syncfusion React Accumulation Charts data dynamically at runtime using the addPoint, removePoint, and setData methods. +platform: ej2-react control: Dynamic Data Update documentation: ug publishingplatform: chart-sdk domainurl: https://help.syncfusion.com/chart-sdk --- -# Dynamic data update in React Accumulation Chart component +# Dynamic Data Update in React Accumulation Charts ## Adding a new data point diff --git a/chart-sdk/react/accumulation-charts/ej1-api-migration.md b/chart-sdk/react/accumulation-charts/ej1-api-migration.md index bb6349de1..7aba5c0fb 100644 --- a/chart-sdk/react/accumulation-charts/ej1-api-migration.md +++ b/chart-sdk/react/accumulation-charts/ej1-api-migration.md @@ -1,14 +1,14 @@ --- layout: post -title: Ej1 api migration in React Accumulation chart component | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. +title: Migration from Essential JS 1 in React Accumulation Charts | Syncfusion +description: Learn how to migrate the Syncfusion React Accumulation Charts from Essential JS 1 to EJ2 with API mapping and code rewrite guidance. control: Ej1 api migration platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in React Accumulation chart component +# Migration from Essential JS 1 in React Accumulation Charts This article describes the API migration process of Chart component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/react/accumulation-charts/empty-points.md b/chart-sdk/react/accumulation-charts/empty-points.md index ceeb09fc0..8598902bf 100644 --- a/chart-sdk/react/accumulation-charts/empty-points.md +++ b/chart-sdk/react/accumulation-charts/empty-points.md @@ -1,14 +1,14 @@ --- layout: post -title: Empty points in React Accumulation chart component | Syncfusion -description: Learn here all about Empty points in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. +title: Empty Points in React Accumulation Charts | Syncfusion +description: Learn how to handle null or undefined values in the Syncfusion React Accumulation Charts with empty-point modes Gap, Average, and Zero. control: Empty points platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Empty points in React Accumulation chart component +# Empty Points in React Accumulation Charts The data points those uses the `null` or `undefined` as value are considered as empty points. The empty data points are ignored and not plotted in the chart. You can customize those points, using the `emptyPointSettings` property in series. The default mode of the empty point is `Gap`. Other supported modes are `Average` and `Zero`. diff --git a/chart-sdk/react/accumulation-charts/funnel.md b/chart-sdk/react/accumulation-charts/funnel.md index 79c270b6c..fded9c64b 100644 --- a/chart-sdk/react/accumulation-charts/funnel.md +++ b/chart-sdk/react/accumulation-charts/funnel.md @@ -1,14 +1,14 @@ --- layout: post -title: Funnel in React Accumulation chart component | Syncfusion -description: Learn here all about Funnel in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. +title: Funnel in React Accumulation Charts | Syncfusion +description: Learn how to render a funnel chart in the Syncfusion React Accumulation Charts to visualize values across progressive stages of a process. control: Funnel platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Funnel in React Accumulation chart component +# Funnel in React Accumulation Charts To render a funnel series, use the series [`type`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type) as `Funnel` and inject the `FunnelSeries` module into the `services`. diff --git a/chart-sdk/react/accumulation-charts/getting-started.md b/chart-sdk/react/accumulation-charts/getting-started.md index 069257ac6..0fa3ff081 100644 --- a/chart-sdk/react/accumulation-charts/getting-started.md +++ b/chart-sdk/react/accumulation-charts/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with React Accumulation Chart component | Syncfusion -description: Check out and learn about the Getting started with React Accumulation Chart component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React Accumulation Charts | Syncfusion +description: Learn how to get started with the Syncfusion React Accumulation Charts Component. Explore setup, features, examples, and customization options. control: Getting started platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with React Accumulation Chart Component +# Getting Started with React Accumulation Charts This section describes the steps to create a simple Accumulation Chart component. diff --git a/chart-sdk/react/accumulation-charts/gradient.md b/chart-sdk/react/accumulation-charts/gradient.md index d467e84f8..291ba443e 100644 --- a/chart-sdk/react/accumulation-charts/gradient.md +++ b/chart-sdk/react/accumulation-charts/gradient.md @@ -1,7 +1,7 @@ --- layout: post -title: Gradient in React Accumulation chart component | Syncfusion -description: Learn here all about Gradient in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. +title: Gradient in React Accumulation Charts | Syncfusion +description: Learn how to apply linear and radial gradients to slices of the Syncfusion React Accumulation Charts for richer visual styling. control: Gradient platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Gradient in React Accumulation chart control +# Gradient in React Accumulation Charts diff --git a/chart-sdk/react/accumulation-charts/grouping.md b/chart-sdk/react/accumulation-charts/grouping.md index d140efa5c..c3005f233 100644 --- a/chart-sdk/react/accumulation-charts/grouping.md +++ b/chart-sdk/react/accumulation-charts/grouping.md @@ -1,14 +1,14 @@ --- layout: post -title: Grouping in React Accumulation chart component | Syncfusion -description: Learn here all about Grouping in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. -control: Grouping +title: Grouping in React Accumulation Charts | Syncfusion +description: Learn how to group small slices in the Syncfusion React Accumulation Charts into a single slice using groupMode for cleaner category comparison. +control: Grouping platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Grouping in React Accumulation chart component +# Grouping in React Accumulation Charts You can club/group few points of the series based on [`groupTo`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#groupto) property. For example, if the club value is 11, then the points with value less than 11 is grouped together and will be showed as a single point with label `others`. The property also takes value in percentage (percentage of total data points value). diff --git a/chart-sdk/react/accumulation-charts/legend.md b/chart-sdk/react/accumulation-charts/legend.md index c6c931a69..7e6e9c4a3 100644 --- a/chart-sdk/react/accumulation-charts/legend.md +++ b/chart-sdk/react/accumulation-charts/legend.md @@ -1,14 +1,14 @@ --- layout: post -title: Legend in React Accumulation chart component | Syncfusion -description: Learn here all about Legend in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. -control: Legend +title: Legend in React Accumulation Charts | Syncfusion +description: Learn how to enable and customize the legend in the Syncfusion React Accumulation Charts to identify each slice, with options for position, shape, and more. +control: Legend platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in React Accumulation chart component +# Legend in React Accumulation Charts As like a chart, the legend is also available for accumulation charts, which gives information about the points. By default, the legend will be placed on the right, if the width of the chart is high or will be placed on the bottom, if the height of the chart is high. Other customization features regarding the legend element are same as the [`chart legend`](http://ej2.syncfusion.com/documentation/chart/legend.html#position-and-alignment). diff --git a/chart-sdk/react/accumulation-charts/pie-dough-nut.md b/chart-sdk/react/accumulation-charts/pie-dough-nut.md index abc49cea2..6287374d0 100644 --- a/chart-sdk/react/accumulation-charts/pie-dough-nut.md +++ b/chart-sdk/react/accumulation-charts/pie-dough-nut.md @@ -1,14 +1,14 @@ --- layout: post -title: Pie dough nut in React Accumulation chart component | Syncfusion -description: Learn here all about Pie dough nut in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. -control: Pie dough nut +title: Pie and Doughnut in React Accumulation Charts | Syncfusion +description: Learn how to render pie and doughnut series in the Syncfusion React Accumulation Charts to compare category shares with inner-radius and explode options. +control: Pie dough nut platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pie dough nut in React Accumulation chart component +# Pie and Doughnut in React Accumulation Charts ## Pie chart diff --git a/chart-sdk/react/accumulation-charts/pyramid.md b/chart-sdk/react/accumulation-charts/pyramid.md index e0e095874..220822cb2 100644 --- a/chart-sdk/react/accumulation-charts/pyramid.md +++ b/chart-sdk/react/accumulation-charts/pyramid.md @@ -1,14 +1,14 @@ --- layout: post -title: Pyramid in React Accumulation chart component | Syncfusion -description: Learn here all about Pyramid in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. +title: Pyramid in React Accumulation Charts | Syncfusion +description: Learn how to render a pyramid chart in the Syncfusion React Accumulation Charts to compare values that decrease proportionally from base to apex. control: Pyramid platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pyramid in React Accumulation chart component +# Pyramid in React Accumulation Charts To render a pyramid series, use the series [`type`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type) as `Pyramid` and inject `PyramidSeries` module into the `services`. diff --git a/chart-sdk/react/accumulation-charts/title-and-sub-title.md b/chart-sdk/react/accumulation-charts/title-and-sub-title.md index b94f76d8f..a38b4af20 100644 --- a/chart-sdk/react/accumulation-charts/title-and-sub-title.md +++ b/chart-sdk/react/accumulation-charts/title-and-sub-title.md @@ -1,14 +1,14 @@ --- layout: post -title: Title and sub title in React Accumulation chart component | Syncfusion -description: Learn here all about Title and sub title in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. -control: Title and sub title +title: Title and Subtitle in React Accumulation Charts | Syncfusion +description: Learn how to add a chart title or subtitle to the Syncfusion React Accumulation Charts with custom position, alignment, and style options. +control: Title and sub title platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title and sub title in React Accumulation chart component +# Title and Subtitle in React Accumulation Charts ## Title diff --git a/chart-sdk/react/accumulation-charts/tool-tip.md b/chart-sdk/react/accumulation-charts/tool-tip.md index 5000bca38..c0e30e1a0 100644 --- a/chart-sdk/react/accumulation-charts/tool-tip.md +++ b/chart-sdk/react/accumulation-charts/tool-tip.md @@ -1,14 +1,14 @@ --- layout: post -title: Tooltip in React Accumulation chart component | Syncfusion -description: Learn here all about Tooltip in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more. -control: Tooltip +title: Tooltip in React Accumulation Charts | Syncfusion +description: Learn how to enable tooltips in the Syncfusion React Accumulation Charts to show point details on hover with template and format options. +control: Tooltip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in React Accumulation chart component +# Tooltip in React Accumulation Charts Tooltip for the accumulation chart can be enabled by using the [`enable`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/tooltipSettingsModel#enable) property. diff --git a/chart-sdk/react/bullet-chart/accessibility.md b/chart-sdk/react/bullet-chart/accessibility.md index e5ffe8ef3..afe76f879 100644 --- a/chart-sdk/react/bullet-chart/accessibility.md +++ b/chart-sdk/react/bullet-chart/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React Bullet chart component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Bullet chart component of Syncfusion Essential JS 2 and more. +title: Accessibility in React Bullet Chart | Syncfusion +description: Learn how the Syncfusion React Bullet Chart Component supports accessibility with WAI-ARIA, Section 508, WCAG 2.2, and keyboard navigation. control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React Bullet chart component +# Accessibility in React Bullet Chart The Bullet chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/react/bullet-chart/axis-customization.md b/chart-sdk/react/bullet-chart/axis-customization.md index 35bb6a2f9..550b6e82a 100644 --- a/chart-sdk/react/bullet-chart/axis-customization.md +++ b/chart-sdk/react/bullet-chart/axis-customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Axis customization in React Bullet chart component | Syncfusion -description: Learn here all about Axis customization in Syncfusion React Bullet chart component of Syncfusion Essential JS 2 and more. +title: Axis Customization in React Bullet Chart | Syncfusion +description: Learn how to customize the axis in the Syncfusion React Bullet Chart Component with title, labels, ranges, and tick lines. control: Axis customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in React Bullet chart component +# Axis Customization in React Bullet Chart ## MajorTickLines and MinorTickLines Customization diff --git a/chart-sdk/react/bullet-chart/bullet-chart-dimensions.md b/chart-sdk/react/bullet-chart/bullet-chart-dimensions.md index 798d8f064..03c693b95 100644 --- a/chart-sdk/react/bullet-chart/bullet-chart-dimensions.md +++ b/chart-sdk/react/bullet-chart/bullet-chart-dimensions.md @@ -1,14 +1,14 @@ --- layout: post -title: Bullet chart dimensions in React Bullet chart component | Syncfusion -description: Learn here all about Bullet chart dimensions in Syncfusion React Bullet chart component of Syncfusion Essential JS 2 and more. +title: Dimensions in React Bullet Chart | Syncfusion +description: Learn how to set the Syncfusion React Bullet Chart Component size to a fixed container or a custom width and height using CSS or inline style. control: Bullet chart dimensions platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bullet chart dimensions in React Bullet chart component +# Dimensions in React Bullet Chart ## Size for Container diff --git a/chart-sdk/react/bullet-chart/comparative-bar.md b/chart-sdk/react/bullet-chart/comparative-bar.md index c8186c67e..d8fc54a82 100644 --- a/chart-sdk/react/bullet-chart/comparative-bar.md +++ b/chart-sdk/react/bullet-chart/comparative-bar.md @@ -1,14 +1,14 @@ --- layout: post -title: Comparative bar in React Bullet chart component | Syncfusion -description: Learn here all about Comparative bar in Syncfusion React Bullet chart component of Syncfusion Essential JS 2 and more. -control: Comparative bar +title: Target Bar in React Bullet Chart | Syncfusion +description: Learn how to render the target bar in the Syncfusion React Bullet Chart Component to compare against the actual value with custom color and width. +control: Target bar platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Comparative bar in React Bullet chart component +# Target Bar in React Bullet Chart The line marker that runs perpendicular to the orientation of the graph is known as the **Comparative Measure** and it is used as a target marker to compare against the feature measure value. This is also called as the **Target Bar** in the Bullet Chart. To display the target bar, the [`targetField`](https://ej2.syncfusion.com/react/documentation/api/bullet-chart#targetfield) should be mapped to the appropriate field from the datasource. diff --git a/chart-sdk/react/bullet-chart/customization.md b/chart-sdk/react/bullet-chart/customization.md index 86b55571d..a14cf5d17 100644 --- a/chart-sdk/react/bullet-chart/customization.md +++ b/chart-sdk/react/bullet-chart/customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Customization in React Bullet chart component | Syncfusion -description: Learn here all about Customization in Syncfusion React Bullet chart component of Syncfusion Essential JS 2 and more. +title: Customization in React Bullet Chart | Syncfusion +description: Learn how to customize the Syncfusion React Bullet Chart Component with themes, orientation, and animation options. control: Customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Customization in React Bullet chart component +# Customization in React Bullet Chart ## Orientation diff --git a/chart-sdk/react/bullet-chart/data-binding.md b/chart-sdk/react/bullet-chart/data-binding.md index 84d933315..2dd50b075 100644 --- a/chart-sdk/react/bullet-chart/data-binding.md +++ b/chart-sdk/react/bullet-chart/data-binding.md @@ -1,14 +1,14 @@ --- layout: post -title: Data binding in React Bullet chart component | Syncfusion -description: Learn here all about Data binding in Syncfusion React Bullet chart component of Syncfusion Essential JS 2 and more. +title: Data Binding in React Bullet Chart | Syncfusion +description: Learn how to bind data to the Syncfusion React Bullet Chart Component using dataSource, valueField, and targetField properties. control: Data binding platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data binding in React Bullet chart component +# Data Binding in React Bullet Chart The [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/bullet-chart#datasource) property accepts a collection of values as input that helps to display measures, and compares them to a target bar. To display the actual and target bar, specify the property from the datasource into the [`valueField`](https://ej2.syncfusion.com/react/documentation/api/bullet-chart#valuefield) and [`targetField`](https://ej2.syncfusion.com/react/documentation/api/bullet-chart#targetfield) respectively. diff --git a/chart-sdk/react/bullet-chart/data-label.md b/chart-sdk/react/bullet-chart/data-label.md index 29b83b330..93206cea1 100644 --- a/chart-sdk/react/bullet-chart/data-label.md +++ b/chart-sdk/react/bullet-chart/data-label.md @@ -1,14 +1,14 @@ --- layout: post -title: Data label in React Bullet chart component | Syncfusion -description: Learn here all about Data label in Syncfusion React Bullet chart component of Syncfusion Essential JS 2 and more. +title: Data Labels in React Bullet Chart | Syncfusion +description: Learn how to show point values on the Syncfusion React Bullet Chart Component using data labels with customization. control: Data label platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data label in React Bullet chart component +# Data Labels in React Bullet Chart Data Labels are used to identify the value of actual bar in the Bullet Chart component. The Data Labels will be shown by specifying the [`dataLabel`](https://ej2.syncfusion.com/react/documentation/api/bullet-chart#datalabel) setting's [`enable`](https://ej2.syncfusion.com/react/documentation/api/bullet-chart/bulletDataLabelModel#enable) property to **true**. diff --git a/chart-sdk/react/bullet-chart/getting-started.md b/chart-sdk/react/bullet-chart/getting-started.md index fad4e4f74..24a63077d 100644 --- a/chart-sdk/react/bullet-chart/getting-started.md +++ b/chart-sdk/react/bullet-chart/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with React Bullet Chart component | Syncfusion -description: Check out and learn about getting started with the React Bullet Chart component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React Bullet Chart | Syncfusion +description: Learn how to get started with the Syncfusion React Bullet Chart Component. Explore setup, features, examples, and customization options. control: Getting Started platform: chart-sdk documentation: ug @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Getting started with React Bullet Chart component +# Getting Started with React Bullet Chart This section describes the steps to create a simple Bullet Chart component. diff --git a/chart-sdk/react/bullet-chart/ranges.md b/chart-sdk/react/bullet-chart/ranges.md index 6318ef57e..819230fa1 100644 --- a/chart-sdk/react/bullet-chart/ranges.md +++ b/chart-sdk/react/bullet-chart/ranges.md @@ -1,14 +1,14 @@ --- layout: post -title: Ranges in React Bullet chart component | Syncfusion -description: Learn here all about Ranges in Syncfusion React Bullet chart component of Syncfusion Essential JS 2 and more. -control: Ranges +title: Ranges in React Bullet Chart | Syncfusion +description: Learn how to configure ranges in the Syncfusion React Bullet Chart Component to compare actual and target values against thresholds with custom colors. +control: Ranges platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ranges in React Bullet chart component +# Ranges in React Bullet Chart Ranges represent the quality of a specific range such as **Good**, **Bad** and **Satisfactory** in the Bullet Chart scale. The ending point of a qualitative range is specified in the [`end`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/rangeModel#end) property in [`ranges`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#ranges). The [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#minimum) value of a quantitative scale is considered the starting point of the first range or the previous range end point. diff --git a/chart-sdk/react/bullet-chart/title.md b/chart-sdk/react/bullet-chart/title.md index 178ecfb4f..e12a46977 100644 --- a/chart-sdk/react/bullet-chart/title.md +++ b/chart-sdk/react/bullet-chart/title.md @@ -1,14 +1,14 @@ --- layout: post -title: Title in React Bullet chart component | Syncfusion -description: Learn here all about Title in Syncfusion React Bullet chart component of Syncfusion Essential JS 2 and more. -control: Title +title: Title and Subtitle in React Bullet Chart | Syncfusion +description: Learn how to add and customize a title and subtitle for the Syncfusion React Bullet Chart Component using text, position, and style options. +control: Title platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title in React Bullet chart component +# Title and Subtitle in React Bullet Chart ## Title diff --git a/chart-sdk/react/bullet-chart/tool-tip.md b/chart-sdk/react/bullet-chart/tool-tip.md index da97288fe..cb9755c54 100644 --- a/chart-sdk/react/bullet-chart/tool-tip.md +++ b/chart-sdk/react/bullet-chart/tool-tip.md @@ -1,14 +1,14 @@ --- layout: post -title: Tool tip in React Bullet chart component | Syncfusion -description: Learn here all about Tool tip in Syncfusion React Bullet chart component of Syncfusion Essential JS 2 and more. -control: Tool tip +title: Tooltip in React Bullet Chart | Syncfusion +description: Learn how to enable and customize tooltips on the Syncfusion React Bullet Chart Component with template options. +control: Tooltip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip in React Bullet chart component +# Tooltip in React Bullet Chart When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays important summary about the actual and the target bar values. diff --git a/chart-sdk/react/bullet-chart/value-bar.md b/chart-sdk/react/bullet-chart/value-bar.md index 2862bf088..980b2b4bf 100644 --- a/chart-sdk/react/bullet-chart/value-bar.md +++ b/chart-sdk/react/bullet-chart/value-bar.md @@ -1,14 +1,14 @@ --- layout: post -title: Value bar in React Bullet chart component | Syncfusion -description: Learn here all about Value bar in Syncfusion React Bullet chart component of Syncfusion Essential JS 2 and more. -control: Value bar +title: Actual Bar in React Bullet Chart | Syncfusion +description: Learn how to render the actual bar in the Syncfusion React Bullet Chart Component to show a primary value. +control: Actual bar platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Value bar in React Bullet chart component +# Actual Bar in React Bullet Chart To display the primary data or the current value of the data being measured known as the **Feature Measure** that should be encoded as a bar. This is called as the **Actual Bar** or the **Feature Bar** in the Bullet Chart, and to display the actual bar the [`valueField`](https://ej2.syncfusion.com/react/documentation/api/bullet-chart#valuefield) should be mapped to the appropriate field from the data source. diff --git a/chart-sdk/react/charts/accessibility.md b/chart-sdk/react/charts/accessibility.md index c57b2a848..762f8c807 100644 --- a/chart-sdk/react/charts/accessibility.md +++ b/chart-sdk/react/charts/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React Chart component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Accessibility +title: Accessibility in React Charts | Syncfusion +description: Learn how to make Syncfusion React Charts accessible with WCAG 2.2, Section 508, WAI-ARIA attributes, and full keyboard navigation support. +control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React Chart component +# Accessibility in React Charts The Chart component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22), and relevant [WAI-ARIA](https://www.w3.org/TR/wai-aria#roles) roles. diff --git a/chart-sdk/react/charts/advanced-accessibility-configuration.md b/chart-sdk/react/charts/advanced-accessibility-configuration.md index 1e0f64798..9edc91e48 100644 --- a/chart-sdk/react/charts/advanced-accessibility-configuration.md +++ b/chart-sdk/react/charts/advanced-accessibility-configuration.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility customization in React Chart component | Syncfusion -description: Learn here all about Accessibility customization in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Accessibility Customization in React Charts | Syncfusion +description: Learn how to customize accessibility in Syncfusion React Charts with descriptions, roles, focus borders, and tab order for chart elements, series, title, and legend. control: Accessibility customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility customization in React Chart component +# Accessibility Customization in React Charts The [React Charts](https://www.syncfusion.com/react-components/react-charts) component visualizes data graphically and provides accessibility customization options to improve usability for people with disabilities. The primary accessibility attributes are described in this section. diff --git a/chart-sdk/react/charts/api.md b/chart-sdk/react/charts/api.md index 63b9b484b..6a73c8d85 100644 --- a/chart-sdk/react/charts/api.md +++ b/chart-sdk/react/charts/api.md @@ -1,14 +1,14 @@ --- layout: post -title: Api in React Chart component | Syncfusion -description: Learn here all about Api in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Api +title: API in React Charts | Syncfusion +description: Learn how to use the Syncfusion React Charts API reference, including the public classes, interfaces, and members exposed by the component. +control: Api platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Api in React Chart component +# API in React Charts ## Components diff --git a/chart-sdk/react/charts/axis-customization.md b/chart-sdk/react/charts/axis-customization.md index 0eddbbe6d..3efcb333a 100644 --- a/chart-sdk/react/charts/axis-customization.md +++ b/chart-sdk/react/charts/axis-customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Axis customization in React Chart component | Syncfusion -description: Learn here all about Axis customization in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Axis Customization in React Charts | Syncfusion +description: Learn how to customize Syncfusion React Charts axes with titles, tick lines, grid lines, multiple axes, opposed position, and inverse axis options. control: Axis customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in React Chart component +# Axis Customization in React Charts ## Axis Crossing diff --git a/chart-sdk/react/charts/axis-labels.md b/chart-sdk/react/charts/axis-labels.md index 0b6f00faf..48cb9530f 100644 --- a/chart-sdk/react/charts/axis-labels.md +++ b/chart-sdk/react/charts/axis-labels.md @@ -1,14 +1,14 @@ --- layout: post -title: Axis labels in React Chart component | Syncfusion -description: Learn here all about Axis labels in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Axis labels +title: Axis Labels in React Charts | Syncfusion +description: Learn how to format and customize axis labels in Syncfusion React Charts with smart positioning, multilevel labels, sorting, edge placement, and label templates. +control: Axis labels platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis labels in React Chart component +# Axis Labels in React Charts To get start quickly with Axis Labels in React Charts, you can check on this video: diff --git a/chart-sdk/react/charts/category-axis.md b/chart-sdk/react/charts/category-axis.md index 08d05c31e..87597ddc8 100644 --- a/chart-sdk/react/charts/category-axis.md +++ b/chart-sdk/react/charts/category-axis.md @@ -1,14 +1,14 @@ --- layout: post -title: Category axis in React Chart component | Syncfusion -description: Learn here all about Category axis in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Category Axis in React Charts | Syncfusion +description: Learn how to use the category axis in Syncfusion React Charts to plot string-based values, customize label placement, set visible range, and enable indexed category axis. control: Category axis platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Category axis in React Chart component +# Category Axis in React Charts The category axis is used to represent string-based values instead of numeric values. It is commonly used for displaying discrete categories such as names, labels, or textual groupings along an axis. diff --git a/chart-sdk/react/charts/chart-annotations.md b/chart-sdk/react/charts/chart-annotations.md index e6efe40ba..4e6c607a1 100644 --- a/chart-sdk/react/charts/chart-annotations.md +++ b/chart-sdk/react/charts/chart-annotations.md @@ -1,14 +1,14 @@ --- layout: post -title: Chart annotations in React Chart component | Syncfusion -description: Learn here all about Chart annotations in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Chart Annotations in React Charts | Syncfusion +description: Learn how to add HTML annotations to Syncfusion React Charts with custom positioning, regions, and coordinate units. control: Chart annotations platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart annotations in React Chart component +# Chart Annotations in React Charts Chart annotations allow highlighting specific areas of the chart using text, shapes, images, or custom HTML elements. Annotations can be used to emphasize trends, mark thresholds, show custom notes, or display additional information directly inside the chart area. diff --git a/chart-sdk/react/charts/chart-appearance.md b/chart-sdk/react/charts/chart-appearance.md index c83e7a888..e49b23d54 100644 --- a/chart-sdk/react/charts/chart-appearance.md +++ b/chart-sdk/react/charts/chart-appearance.md @@ -1,14 +1,14 @@ --- layout: post -title: Chart appearance in React Chart component | Syncfusion -description: Learn here all about Chart appearance in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Chart Appearance in React Charts | Syncfusion +description: Learn how to style Syncfusion React Charts with custom color palettes, point and range color mapping, chart area customization, and animation options. control: Chart appearance platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart appearance in React Chart component +# Chart Appearance in React Charts ## Custom color palette diff --git a/chart-sdk/react/charts/chart-dimensions.md b/chart-sdk/react/charts/chart-dimensions.md index 6bec2167d..789ee6a68 100644 --- a/chart-sdk/react/charts/chart-dimensions.md +++ b/chart-sdk/react/charts/chart-dimensions.md @@ -1,14 +1,14 @@ --- layout: post -title: Chart dimensions in React Chart component | Syncfusion -description: Learn here all about Chart dimensions in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Chart Dimensions in React Charts | Syncfusion +description: Learn how to set Syncfusion React Charts size for its container, in pixels, or as a percentage of the parent container. control: Chart dimensions platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart dimensions in React Chart component +# Chart Dimensions in React Charts ## Size for Container diff --git a/chart-sdk/react/charts/chart-print.md b/chart-sdk/react/charts/chart-print.md index 8ce8f73de..0fee2ccaf 100644 --- a/chart-sdk/react/charts/chart-print.md +++ b/chart-sdk/react/charts/chart-print.md @@ -1,14 +1,14 @@ --- layout: post -title: Chart print in React Chart component | Syncfusion -description: Learn here all about Chart print in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Print and Export in React Charts | Syncfusion +description: Learn how to print and export Syncfusion React Charts to PDF, image, Excel, and CSV formats with multiple Charts on one page. control: Chart print platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart print in React Chart component +# Print and Export in React Charts ## Print diff --git a/chart-sdk/react/charts/chart-series.md b/chart-sdk/react/charts/chart-series.md index 73ea7ccc9..aa0f886e6 100644 --- a/chart-sdk/react/charts/chart-series.md +++ b/chart-sdk/react/charts/chart-series.md @@ -1,14 +1,14 @@ --- layout: post -title: Chart series in React Chart component | Syncfusion -description: Learn here all about Chart series in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Chart Series in React Charts | Syncfusion +description: Learn how to render multiple or combination of chart series in Syncfusion React Charts to compare distinct datasets in a single chart area. control: Chart series platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart series in React Chart component +# Chart Series in React Charts ## Multiple Series diff --git a/chart-sdk/react/charts/chart-types/area.md b/chart-sdk/react/charts/chart-types/area.md index 3cac65dac..c66f94629 100644 --- a/chart-sdk/react/charts/chart-types/area.md +++ b/chart-sdk/react/charts/chart-types/area.md @@ -1,8 +1,8 @@ --- layout: post title: Area Chart in React Charts | Syncfusion -description: Learn here all about Area Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. -control: Area Chart +description: Learn to render, customize, and bind Area series in Syncfusion React Charts to visualize trends with filled regions, gradient fills, and border styling. +control: Area Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk diff --git a/chart-sdk/react/charts/chart-types/bar.md b/chart-sdk/react/charts/chart-types/bar.md index 0c32cb985..e8aa08f48 100644 --- a/chart-sdk/react/charts/chart-types/bar.md +++ b/chart-sdk/react/charts/chart-types/bar.md @@ -1,7 +1,7 @@ --- layout: post title: Bar Chart in React Charts | Syncfusion -description: Learn here all about Bar Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Bar series in Syncfusion React Charts for comparing values across categories with adjustable width and spacing. control: Bar Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/box-whisker.md b/chart-sdk/react/charts/chart-types/box-whisker.md index da2edc821..d15acf8e9 100644 --- a/chart-sdk/react/charts/chart-types/box-whisker.md +++ b/chart-sdk/react/charts/chart-types/box-whisker.md @@ -1,7 +1,7 @@ --- layout: post title: Box and Whisker Chart in React Charts | Syncfusion -description: Learn here all about Box and Whisker in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Box and Whisker series in Syncfusion React Charts to visualize statistical distributions with plot modes and mean indicators. control: Box and Whisker platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/bubble.md b/chart-sdk/react/charts/chart-types/bubble.md index e478a387d..3e8a74e12 100644 --- a/chart-sdk/react/charts/chart-types/bubble.md +++ b/chart-sdk/react/charts/chart-types/bubble.md @@ -1,8 +1,8 @@ --- layout: post title: Bubble Chart in React Charts | Syncfusion -description: Learn here all about Bubble Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. -control: Bubble Chart +description: Learn to render, customize, and bind Bubble series in Syncfusion React Charts to plot three-variable data with size mapping, fill, and opacity. +control: Bubble Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk diff --git a/chart-sdk/react/charts/chart-types/candle.md b/chart-sdk/react/charts/chart-types/candle.md index 149509f29..94be28828 100644 --- a/chart-sdk/react/charts/chart-types/candle.md +++ b/chart-sdk/react/charts/chart-types/candle.md @@ -1,7 +1,7 @@ --- layout: post title: Candle Chart in React Charts | Syncfusion -description: Learn here all about Candle in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Candle series in Syncfusion React Charts to visualize stock price movements with high, low, open, and close values. control: Candle platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/column.md b/chart-sdk/react/charts/chart-types/column.md index 13de6f0cb..d347912ee 100644 --- a/chart-sdk/react/charts/chart-types/column.md +++ b/chart-sdk/react/charts/chart-types/column.md @@ -1,8 +1,8 @@ --- layout: post title: Column Chart in React Charts | Syncfusion -description: Learn here all about Column Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. -control: Column Chart +description: Learn to render, customize, and bind Column series in Syncfusion React Charts to compare category data with vertical bars, fill, and border styling. +control: Column Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk diff --git a/chart-sdk/react/charts/chart-types/error-bar.md b/chart-sdk/react/charts/chart-types/error-bar.md index 0d0682e67..584090c68 100644 --- a/chart-sdk/react/charts/chart-types/error-bar.md +++ b/chart-sdk/react/charts/chart-types/error-bar.md @@ -1,7 +1,7 @@ --- layout: post title: Error Bar Chart in React Charts | Syncfusion -description: Learn here all about Error Bar in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn how to render and customize Error Bar series in Syncfusion React Charts to visualize data variability and uncertainty. control: Error Bar platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/high-low-open-close.md b/chart-sdk/react/charts/chart-types/high-low-open-close.md index 606c8fe33..12f3483b8 100644 --- a/chart-sdk/react/charts/chart-types/high-low-open-close.md +++ b/chart-sdk/react/charts/chart-types/high-low-open-close.md @@ -1,7 +1,7 @@ --- layout: post title: High Low Open Close Chart in React Charts | Syncfusion -description: Learn here all about High Low Open Close Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Hilo Open Close series in Syncfusion React Charts to visualize stock price movements with high, low, open, and close values. control: High Low Open Close platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/high-low.md b/chart-sdk/react/charts/chart-types/high-low.md index 85ef2381e..0e902017c 100644 --- a/chart-sdk/react/charts/chart-types/high-low.md +++ b/chart-sdk/react/charts/chart-types/high-low.md @@ -1,7 +1,7 @@ --- layout: post title: High Low Chart in React Charts | Syncfusion -description: Learn here all about Hilo Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Hilo series in Syncfusion React Charts to display stock price ranges with high and low values, fill, and border styling. control: High Low Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/histogram.md b/chart-sdk/react/charts/chart-types/histogram.md index 7dc3091f6..04bf9c323 100644 --- a/chart-sdk/react/charts/chart-types/histogram.md +++ b/chart-sdk/react/charts/chart-types/histogram.md @@ -1,7 +1,7 @@ --- layout: post title: Histogram Chart in React Charts | Syncfusion -description: Learn here all about Histogram in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render and customize Histogram series in Syncfusion React Charts to display large data distributions with automatic binning and bin intervals. control: Histogram platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/line.md b/chart-sdk/react/charts/chart-types/line.md index 5d93bf8d5..502232fde 100644 --- a/chart-sdk/react/charts/chart-types/line.md +++ b/chart-sdk/react/charts/chart-types/line.md @@ -1,7 +1,7 @@ --- layout: post title: Line Chart in React Charts | Syncfusion -description: Learn here all about Line Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Line series in Syncfusion React Charts to visualize trends over time with width, dash array, fill, and marker styling. control: Line Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/pareto.md b/chart-sdk/react/charts/chart-types/pareto.md index 994c4e39c..6a6fdbea1 100644 --- a/chart-sdk/react/charts/chart-types/pareto.md +++ b/chart-sdk/react/charts/chart-types/pareto.md @@ -1,7 +1,7 @@ --- layout: post title: Pareto Chart in React Charts | Syncfusion -description: Learn here all about Pareto in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Pareto series in Syncfusion React Charts to show cumulative contributions via a combined column and line chart. control: Pareto platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/polar.md b/chart-sdk/react/charts/chart-types/polar.md index 7ecc189a0..a66be9744 100644 --- a/chart-sdk/react/charts/chart-types/polar.md +++ b/chart-sdk/react/charts/chart-types/polar.md @@ -1,8 +1,8 @@ --- layout: post -title: Polar Chart in React Chart | Syncfusion -description: Learn here all about Polar Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. -control: Polar Chart +title: Polar Chart in React Charts | Syncfusion +description: Learn to render, customize, and bind Polar series in Syncfusion React Charts to plot data on a circular grid with line, column, area, or spline draw types. +control: Polar Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk diff --git a/chart-sdk/react/charts/chart-types/radar.md b/chart-sdk/react/charts/chart-types/radar.md index a18ec3763..d52583489 100644 --- a/chart-sdk/react/charts/chart-types/radar.md +++ b/chart-sdk/react/charts/chart-types/radar.md @@ -1,8 +1,8 @@ --- layout: post title: Radar Chart in React Charts | Syncfusion -description: Learn here all about Radar Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. -control: Radar Chart +description: Learn to render, customize, and bind Radar series in Syncfusion React Charts to plot data on a circular grid with line, column, area, or spline draw types. +control: Radar Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk diff --git a/chart-sdk/react/charts/chart-types/range-area.md b/chart-sdk/react/charts/chart-types/range-area.md index 0023b7109..4594d9242 100644 --- a/chart-sdk/react/charts/chart-types/range-area.md +++ b/chart-sdk/react/charts/chart-types/range-area.md @@ -1,8 +1,8 @@ --- layout: post title: Range Area Chart in React Charts | Syncfusion -description: Learn here all about Range Area Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. -control: Range Area Chart +description: Learn to render, customize, and bind Range Area series in Syncfusion React Charts to visualize value ranges between high and low with smooth filled regions. +control: Range Area Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk diff --git a/chart-sdk/react/charts/chart-types/range-column.md b/chart-sdk/react/charts/chart-types/range-column.md index 0ac1501ef..3599b5508 100644 --- a/chart-sdk/react/charts/chart-types/range-column.md +++ b/chart-sdk/react/charts/chart-types/range-column.md @@ -1,7 +1,7 @@ --- layout: post title: Range Column Chart in React Charts | Syncfusion -description: Learn here all about Range Column Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Range Column series in Syncfusion React Charts to visualize data ranges with paired high and low columns per category. control: Range Column Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/range-step-area.md b/chart-sdk/react/charts/chart-types/range-step-area.md index fc70e83b1..4b5578bd4 100644 --- a/chart-sdk/react/charts/chart-types/range-step-area.md +++ b/chart-sdk/react/charts/chart-types/range-step-area.md @@ -1,7 +1,7 @@ --- layout: post title: Range Step Area Chart in React Charts | Syncfusion -description: Learn here all about Range Step Area Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Range Step Area series in Syncfusion React Charts to display data ranges with stepped high-low boundaries. control: Range Step Area Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/scatter.md b/chart-sdk/react/charts/chart-types/scatter.md index e58ec7a66..729df6967 100644 --- a/chart-sdk/react/charts/chart-types/scatter.md +++ b/chart-sdk/react/charts/chart-types/scatter.md @@ -1,7 +1,7 @@ --- layout: post title: Scatter Chart in React Charts | Syncfusion -description: Learn here all about Scatter Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Scatter series in Syncfusion React Charts to display individual data points with fill, opacity, and marker shape. control: Scatter Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/spline-area.md b/chart-sdk/react/charts/chart-types/spline-area.md index 6ce669338..cd35238bc 100644 --- a/chart-sdk/react/charts/chart-types/spline-area.md +++ b/chart-sdk/react/charts/chart-types/spline-area.md @@ -1,7 +1,7 @@ --- layout: post title: Spline Area Chart in React Charts | Syncfusion -description: Learn here all about Spline Area Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Spline Area series in Syncfusion React Charts to visualize trends with smooth curved filled regions. control: Spline Area Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/spline-range-area.md b/chart-sdk/react/charts/chart-types/spline-range-area.md index 33f7a7e66..fd47efd34 100644 --- a/chart-sdk/react/charts/chart-types/spline-range-area.md +++ b/chart-sdk/react/charts/chart-types/spline-range-area.md @@ -1,7 +1,7 @@ --- layout: post title: Spline Range Area Chart in React Charts | Syncfusion -description: Learn here all about Spline Range Area Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Spline Range Area series in Syncfusion React Charts to display continuous high-low value ranges with smooth curved boundaries. control: Spline Range Area Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/spline.md b/chart-sdk/react/charts/chart-types/spline.md index a2a0a3f64..2f0dd7c7f 100644 --- a/chart-sdk/react/charts/chart-types/spline.md +++ b/chart-sdk/react/charts/chart-types/spline.md @@ -1,7 +1,7 @@ --- layout: post title: Spline Chart in React Charts | Syncfusion -description: Learn here all about Spline Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render and bind Spline series in Syncfusion React Charts to visualize trends with smooth curves. control: Spline Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/stack-area.md b/chart-sdk/react/charts/chart-types/stack-area.md index 360c5d59d..ce319988e 100644 --- a/chart-sdk/react/charts/chart-types/stack-area.md +++ b/chart-sdk/react/charts/chart-types/stack-area.md @@ -1,7 +1,7 @@ --- layout: post title: Stacked Area Chart in React Charts | Syncfusion -description: Learn here all about Stacked Area Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Stacked Area series in Syncfusion React Charts to show each series contribution to a total over time. control: Stacked Area Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/stack-bar.md b/chart-sdk/react/charts/chart-types/stack-bar.md index 079433f04..3a56d1950 100644 --- a/chart-sdk/react/charts/chart-types/stack-bar.md +++ b/chart-sdk/react/charts/chart-types/stack-bar.md @@ -1,8 +1,8 @@ --- layout: post title: Stacked Bar Chart in React Charts | Syncfusion -description: Learn here all about Stacked Bar Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. -control: Stacked Bar Chart +description: Learn to render, customize, and bind Stacked Bar series in Syncfusion React Charts to compare segment contributions across categories using stacked bars. +control: Stacked Bar Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk diff --git a/chart-sdk/react/charts/chart-types/stack-column.md b/chart-sdk/react/charts/chart-types/stack-column.md index c365bf187..a05e99a12 100644 --- a/chart-sdk/react/charts/chart-types/stack-column.md +++ b/chart-sdk/react/charts/chart-types/stack-column.md @@ -1,8 +1,8 @@ --- layout: post title: Stacked Column Chart in React Charts | Syncfusion -description: Learn here all about Stacked Column Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. -control: Stacked Column Chart +description: Learn to render, customize, and bind Stacked Column series in Syncfusion React Charts to compare segment contributions across categories using stacked columns. +control: Stacked Column Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk diff --git a/chart-sdk/react/charts/chart-types/stack-line.md b/chart-sdk/react/charts/chart-types/stack-line.md index e5a5f9a01..b3243c8db 100644 --- a/chart-sdk/react/charts/chart-types/stack-line.md +++ b/chart-sdk/react/charts/chart-types/stack-line.md @@ -1,8 +1,8 @@ --- layout: post title: Stacked Line Chart in React Charts | Syncfusion -description: Learn here all about Stacked Line Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. -control: Stacked Line Chart +description: Learn to render, customize, and bind Stacked Line series in Syncfusion React Charts to compare each series contribution to a total trend over time. +control: Stacked Line Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk diff --git a/chart-sdk/react/charts/chart-types/stacked-area.md b/chart-sdk/react/charts/chart-types/stacked-area.md index 92bb9319c..80f33dec3 100644 --- a/chart-sdk/react/charts/chart-types/stacked-area.md +++ b/chart-sdk/react/charts/chart-types/stacked-area.md @@ -1,7 +1,7 @@ --- layout: post title: 100% Stacked Area Chart in React Charts | Syncfusion -description: Learn here all about 100% Stacked Area Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind 100% Stacked Area series in Syncfusion React Charts to compare proportional contributions as percentages over time. control: 100% Stacked Area Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/stacked-bar.md b/chart-sdk/react/charts/chart-types/stacked-bar.md index 430de7572..b855b90b7 100644 --- a/chart-sdk/react/charts/chart-types/stacked-bar.md +++ b/chart-sdk/react/charts/chart-types/stacked-bar.md @@ -1,7 +1,7 @@ --- layout: post title: 100% Stacked Bar Chart in React Charts | Syncfusion -description: Learn here all about 100% Stacked Bar Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind 100% Stacked Bar series in Syncfusion React Charts to compare proportional segment contributions across categories. control: 100% Stacked Bar chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/stacked-column.md b/chart-sdk/react/charts/chart-types/stacked-column.md index cfdfe41dc..b22afa9b9 100644 --- a/chart-sdk/react/charts/chart-types/stacked-column.md +++ b/chart-sdk/react/charts/chart-types/stacked-column.md @@ -1,7 +1,7 @@ --- layout: post title: 100% Stacked Column Chart in React Charts | Syncfusion -description: Learn here all about 100% Stacked Column Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind 100% Stacked Column series in Syncfusion React Charts to compare proportional segment contributions across categories. control: 100% Stacked Column Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/stacked-line.md b/chart-sdk/react/charts/chart-types/stacked-line.md index b74989556..7ad89f979 100644 --- a/chart-sdk/react/charts/chart-types/stacked-line.md +++ b/chart-sdk/react/charts/chart-types/stacked-line.md @@ -1,7 +1,7 @@ --- layout: post title: 100% Stacked Line Chart in React Charts | Syncfusion -description: Learn here all about 100% Stacked Line Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind 100% Stacked Line series in Syncfusion React Charts to compare proportional series contributions over time. control: 100% Stacked Line Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/stacked-step-area.md b/chart-sdk/react/charts/chart-types/stacked-step-area.md index 5bb1ada7d..02e28e3f2 100644 --- a/chart-sdk/react/charts/chart-types/stacked-step-area.md +++ b/chart-sdk/react/charts/chart-types/stacked-step-area.md @@ -1,7 +1,7 @@ --- layout: post title: Stacked Step Area Chart in React Charts | Syncfusion -description: Learn here all about Stacked Step Area Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Stacked Step Area series in Syncfusion React Charts to combine stacked areas with stepped boundaries. control: Stacked Step Area Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/step-area.md b/chart-sdk/react/charts/chart-types/step-area.md index 03f927638..4d9754238 100644 --- a/chart-sdk/react/charts/chart-types/step-area.md +++ b/chart-sdk/react/charts/chart-types/step-area.md @@ -1,7 +1,7 @@ --- layout: post title: Step Area Chart in React Charts | Syncfusion -description: Learn here all about Step Area Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Step Area series in Syncfusion React Charts to display data with stepped filled regions for discrete value changes. control: Step Area Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/step-line.md b/chart-sdk/react/charts/chart-types/step-line.md index 5838e49c6..131a316fa 100644 --- a/chart-sdk/react/charts/chart-types/step-line.md +++ b/chart-sdk/react/charts/chart-types/step-line.md @@ -1,7 +1,7 @@ --- layout: post title: Step Line Chart in React Charts | Syncfusion -description: Learn here all about Step Line Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Step Line series in Syncfusion React Charts to display data with stepped horizontal and vertical lines. control: Step Line Chart platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/vertical.md b/chart-sdk/react/charts/chart-types/vertical.md index 36b2e1493..b45697e49 100644 --- a/chart-sdk/react/charts/chart-types/vertical.md +++ b/chart-sdk/react/charts/chart-types/vertical.md @@ -1,7 +1,7 @@ --- layout: post title: Vertical Chart in React Charts | Syncfusion -description: Learn here all about Vertical Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render any series in vertical orientation in Syncfusion React Charts by setting the isTransposed property to swap x and y axes. control: Vertical platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/chart-types/waterfall.md b/chart-sdk/react/charts/chart-types/waterfall.md index fcbc4da3c..624b8e03e 100644 --- a/chart-sdk/react/charts/chart-types/waterfall.md +++ b/chart-sdk/react/charts/chart-types/waterfall.md @@ -1,7 +1,7 @@ --- layout: post title: Waterfall Chart in React Charts | Syncfusion -description: Learn here all about Waterfall in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Waterfall series in Syncfusion React Charts to visualize cumulative effects of positive and negative values. control: Waterfall platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/charts/cross-hair-and-track-ball.md b/chart-sdk/react/charts/cross-hair-and-track-ball.md index 98aed8289..8fd3a648d 100644 --- a/chart-sdk/react/charts/cross-hair-and-track-ball.md +++ b/chart-sdk/react/charts/cross-hair-and-track-ball.md @@ -1,14 +1,14 @@ --- layout: post -title: Cross hair and track ball in React Chart component | Syncfusion -description: Learn here all about Cross hair and track ball in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Crosshair and Trackball in React Charts | Syncfusion +description: Learn how to add crosshair and trackball interactions to Syncfusion React Charts to inspect data points precisely with axis tooltips and highlighting. control: Cross hair and track ball platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Cross hair and track ball in React Chart component +# Crosshair and Trackball in React Charts The crosshair feature displays vertical and horizontal guide lines that intersect at the mouse or touch position, helping to identify the corresponding axis values precisely. diff --git a/chart-sdk/react/charts/data-editing.md b/chart-sdk/react/charts/data-editing.md index d42b459c8..b92d379c3 100644 --- a/chart-sdk/react/charts/data-editing.md +++ b/chart-sdk/react/charts/data-editing.md @@ -1,7 +1,7 @@ --- layout: post -title: Data editing in React Chart component | Syncfusion -description: Learn here all about Data editing in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Data Editing in React Charts | Syncfusion +description: Learn how to enable interactive data editing in Syncfusion React Charts so users can drag and drop chart points to update values within a configured range. control: Data editing platform: chart-sdk documentation: ug @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Data editing in React Chart component +# Data Editing in React Charts ## Enable Data Editing diff --git a/chart-sdk/react/charts/data-labels.md b/chart-sdk/react/charts/data-labels.md index db74e0c9a..06de21b39 100644 --- a/chart-sdk/react/charts/data-labels.md +++ b/chart-sdk/react/charts/data-labels.md @@ -1,14 +1,14 @@ --- layout: post -title: Data labels in React Chart component | Syncfusion -description: Learn here all about Data labels in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Data Labels in React Charts | Syncfusion +description: Learn how to add and format data labels in Syncfusion React Charts with custom positions, templates, margins, rotation, and per-point styling. control: Data labels platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data labels in React Chart component +# Data Labels in React Charts Data labels display the values of data points directly on the chart, reducing the need to reference axes for exact values. Enable data labels by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#visible) option to `true` in the `dataLabel` configuration. Labels automatically adjust to avoid overlapping and maintain readability. diff --git a/chart-sdk/react/charts/data-markers.md b/chart-sdk/react/charts/data-markers.md index c24428748..c9461444c 100644 --- a/chart-sdk/react/charts/data-markers.md +++ b/chart-sdk/react/charts/data-markers.md @@ -1,14 +1,14 @@ --- layout: post -title: Data markers in React Chart component | Syncfusion -description: Learn here all about Data markers in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Data Markers in React Charts | Syncfusion +description: Learn how to add markers to Syncfusion React Charts with custom shapes, images, fill colors, borders, and per-point styling for clear data point visualization. control: Data markers platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data markers in React Chart component +# Data Markers in React Charts Data markers are visual indicators placed at each data point on a series, helping to clearly identify and highlight individual values in your chart. Markers improve readability and accessibility, especially in line and area charts where data points may otherwise be unclear. Customize marker shape, color, size, and appearance to match your design requirements. diff --git a/chart-sdk/react/charts/date-time-axis.md b/chart-sdk/react/charts/date-time-axis.md index 1d077c47d..b56354c4f 100644 --- a/chart-sdk/react/charts/date-time-axis.md +++ b/chart-sdk/react/charts/date-time-axis.md @@ -1,14 +1,14 @@ --- layout: post -title: Date time axis in React Chart component | Syncfusion -description: Learn here all about Date time axis in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Date time axis +title: DateTime Axis in React Charts | Syncfusion +description: Learn how to use DateTime and DateTimeCategory axes in Syncfusion React Charts for time-based data with custom range, interval, and label formatting. +control: Date time axis platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Date time axis in React Chart component +# DateTime Axis in React Charts ## DateTime Axis diff --git a/chart-sdk/react/charts/dynamic-data-update.md b/chart-sdk/react/charts/dynamic-data-update.md index f4345570c..7d1c19adf 100644 --- a/chart-sdk/react/charts/dynamic-data-update.md +++ b/chart-sdk/react/charts/dynamic-data-update.md @@ -1,14 +1,14 @@ --- layout: post -title: Dynamic data update in React Chart component | Syncfusion -description: Learn here all about dynamic data update in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Dynamic Data Update in React Charts | Syncfusion +description: Learn how to dynamically add, remove, or replace data points in Syncfusion React Charts without re-rendering the entire chart. control: Dynamic Data Update platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dynamic data update in React Chart component +# Dynamic Data Update in React Charts The [React Charts](https://www.syncfusion.com/react-components/react-charts) component provides methods to dynamically modify data without requiring a full chart refresh. This enables real-time data visualization, interactive features, and responsive user experiences. Common scenarios include adding sensor readings, removing outdated data points, replacing entire datasets, and enabling click-based data manipulation. diff --git a/chart-sdk/react/charts/ej1-api-migration.md b/chart-sdk/react/charts/ej1-api-migration.md index 8fccfb231..e004cdbc1 100644 --- a/chart-sdk/react/charts/ej1-api-migration.md +++ b/chart-sdk/react/charts/ej1-api-migration.md @@ -1,14 +1,14 @@ --- layout: post -title: Ej1 api migration in React Chart component | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Ej1 api migration +title: EJ1 API Migration in React Charts | Syncfusion +description: Learn how to migrate Syncfusion React Charts from Essential JS 1 to Essential JS 2, covering property, method, event, and series API changes. +control: Ej1 api migration platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in React Chart component +# EJ1 API Migration in React Charts This article describes the API migration process of the Chart component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/react/charts/feature-modules.md b/chart-sdk/react/charts/feature-modules.md index 862d5ee3f..c9f8281e4 100644 --- a/chart-sdk/react/charts/feature-modules.md +++ b/chart-sdk/react/charts/feature-modules.md @@ -1,14 +1,14 @@ --- layout: post -title: Module in React Chart component | Syncfusion -description: Learn here all about Module in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Module +title: Feature Modules in React Charts | Syncfusion +description: Learn how to load Syncfusion React Charts feature modules on demand to keep your bundle size small and load only what you need. +control: Module platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Module in React Chart component +# Feature Modules in React Charts The following available modules should be injected to extend the Chart's functionality. diff --git a/chart-sdk/react/charts/financial-types.md b/chart-sdk/react/charts/financial-types.md index 76a763506..4e1ff6820 100644 --- a/chart-sdk/react/charts/financial-types.md +++ b/chart-sdk/react/charts/financial-types.md @@ -1,14 +1,14 @@ --- layout: post -title: Financial types in React Chart component | Syncfusion -description: Learn here all about Financial types in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Financial Types in React Charts | Syncfusion +description: Learn how to render Hilo, candle, and Hilo Open-Close financial chart types in Syncfusion React Charts for market data visualization. control: Financial types platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Financial types in React Chart component +# Financial Types in React Charts Financial charts are used to illustrate the movements in the price of a financial instrument over time. diff --git a/chart-sdk/react/charts/getting-started.md b/chart-sdk/react/charts/getting-started.md index df9a1ed79..63484ec50 100644 --- a/chart-sdk/react/charts/getting-started.md +++ b/chart-sdk/react/charts/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting Started with React Chart Component | Syncfusion -description: Check out and learn about the Getting Started with React Chart component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React Charts | Syncfusion +description: Learn how to add Syncfusion React Charts to a React app using the Syncfusion CLI or Vite, install the package, inject modules, bind data, and render your first chart. control: Getting started platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with the React Chart Component +# Getting Started with React Charts This section explains how to create a simple Chart component. diff --git a/chart-sdk/react/charts/gradient.md b/chart-sdk/react/charts/gradient.md index 30a3b0d06..fbb63ed1d 100644 --- a/chart-sdk/react/charts/gradient.md +++ b/chart-sdk/react/charts/gradient.md @@ -1,7 +1,7 @@ --- layout: post -title: Gradient in React Chart component | Syncfusion -description: Learn here all about Gradient in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Gradient in React Charts | Syncfusion +description: Learn how to apply linear and radial gradient fills to Syncfusion React Charts series for richer visual styling. control: Gradient platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Gradient in React Chart control +# Gradient in React Charts diff --git a/chart-sdk/react/charts/how-to/add-series.md b/chart-sdk/react/charts/how-to/add-series.md index 6969f3dad..3f30badfa 100644 --- a/chart-sdk/react/charts/how-to/add-series.md +++ b/chart-sdk/react/charts/how-to/add-series.md @@ -1,14 +1,14 @@ --- layout: post -title: Add series in React Chart component | Syncfusion -description: Learn here all about Add series in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to add or remove series in React Charts | Syncfusion +description: Learn how to add or remove series dynamically in Syncfusion React Charts at runtime without re-rendering the chart. control: Add series platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Add series in React Chart component +# How to add or remove series in React Charts You can add or remove the chart series dynamically by using the `addSeries` or `removeSeries` method. diff --git a/chart-sdk/react/charts/how-to/click-data.md b/chart-sdk/react/charts/how-to/click-data.md index 2c90f7b6a..df9d28089 100644 --- a/chart-sdk/react/charts/how-to/click-data.md +++ b/chart-sdk/react/charts/how-to/click-data.md @@ -1,14 +1,14 @@ --- layout: post -title: Click data in React Chart component | Syncfusion -description: Learn here all about Click data in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to handle point click in React Charts | Syncfusion +description: Learn how to handle point-click events on Syncfusion React Charts and read the clicked data point values in your app. control: Click data platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Click data in React Chart component +# How to handle point click in React Charts By using the [`pointClick`](https://ej2.syncfusion.com/react/documentation/api/chart#pointclick) event, you can get the chart data of clicked area. diff --git a/chart-sdk/react/charts/how-to/data-label-template.md b/chart-sdk/react/charts/how-to/data-label-template.md index 3d37753b2..0a6b4660a 100644 --- a/chart-sdk/react/charts/how-to/data-label-template.md +++ b/chart-sdk/react/charts/how-to/data-label-template.md @@ -1,14 +1,14 @@ --- layout: post -title: Data label template in React Chart component | Syncfusion -description: Learn here all about Data label template in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Data label template +title: How to use a data label template in React Charts | Syncfusion +description: Learn how to render a custom HTML template for data labels in Syncfusion React Charts with field-driven content. +control: Data label template platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data label template in React Chart component +# How to use a data label template in React Charts You can bind text and interior information for a point from dataSource other than x and y value. To change color for the background in the datalabel template, you can use `${point.text}`. To use point.text, you have to bind the property from dataSource to name in the datalabel options. diff --git a/chart-sdk/react/charts/how-to/footer.md b/chart-sdk/react/charts/how-to/footer.md index 33a9a3837..a5772fcff 100644 --- a/chart-sdk/react/charts/how-to/footer.md +++ b/chart-sdk/react/charts/how-to/footer.md @@ -1,14 +1,14 @@ --- layout: post -title: Footer in React Chart component | Syncfusion -description: Learn here all about Footer in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to add a footer in React Charts | Syncfusion +description: Learn how to add a footer to Syncfusion React Charts using custom HTML annotations on the chart area. control: Footer platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Footer in React Chart component +# How to add a footer in React Charts By using `annotation`, you can place any html elements to chart in a desired view. diff --git a/chart-sdk/react/charts/how-to/grid-data-chart.md b/chart-sdk/react/charts/how-to/grid-data-chart.md index 2ea95ef8a..b7ffb56e5 100644 --- a/chart-sdk/react/charts/how-to/grid-data-chart.md +++ b/chart-sdk/react/charts/how-to/grid-data-chart.md @@ -1,14 +1,14 @@ --- layout: post -title: Grid data chart in React Chart component | Syncfusion -description: Learn here all about Grid data chart in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to visualize Grid data in React Charts | Syncfusion +description: Learn how to visualize data from a Syncfusion React Grid in Syncfusion React Charts by using the Grid's actionComplete and dataBound events. control: Grid data chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Grid data chart in React Chart component +# How to visualize Grid data in React Charts You can visualize the data that returned by grid in chart. diff --git a/chart-sdk/react/charts/how-to/initial-scrollbar.md b/chart-sdk/react/charts/how-to/initial-scrollbar.md index 56fbc901b..7a6fac855 100644 --- a/chart-sdk/react/charts/how-to/initial-scrollbar.md +++ b/chart-sdk/react/charts/how-to/initial-scrollbar.md @@ -1,14 +1,14 @@ --- layout: post -title: Initial scrollbar in React Chart component | Syncfusion -description: Learn here all about Initial scrollbar in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to set initial scrollbar in React Charts | Syncfusion +description: Learn how to make the scrollbar visible on initial render of Syncfusion React Charts for zoomed chart views. control: Initial scrollbar platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Initial scrollbar in React Chart component +# How to set initial scrollbar in React Charts By setting `zoomFactor` in primaryXAxis and `isZoomed` value as `true` in [`load`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#load) event and `enableScrollbar` value as `true` in`zoomSettings`, you can make the scrollbar visible in initial rendering of chart. diff --git a/chart-sdk/react/charts/how-to/legend-customization.md b/chart-sdk/react/charts/how-to/legend-customization.md index 0bec626e9..4e50a8a57 100644 --- a/chart-sdk/react/charts/how-to/legend-customization.md +++ b/chart-sdk/react/charts/how-to/legend-customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Legend customization in React Chart component | Syncfusion -description: Learn here all about Legend customization in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to customize legend in React Charts | Syncfusion +description: Learn how to customize legend per series in Syncfusion React Charts for a more meaningful legend display. control: Legend customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend customization in React Chart component +# How to customize legend in React Charts By using the [`legendRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#legendrender), you can customize the legend shape. diff --git a/chart-sdk/react/charts/how-to/live-chart.md b/chart-sdk/react/charts/how-to/live-chart.md index 7a9363827..5e7e84dfd 100644 --- a/chart-sdk/react/charts/how-to/live-chart.md +++ b/chart-sdk/react/charts/how-to/live-chart.md @@ -1,14 +1,14 @@ --- layout: post -title: Live chart in React Chart component | Syncfusion -description: Learn here all about Live chart in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Live chart +title: How to create a live chart in React Charts | Syncfusion +description: Learn how to create a live Syncfusion React Charts that updates with new data in real time for dynamic dashboards and monitoring. +control: Live chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Live chart in React Chart component +# How to create a live chart in React Charts You can update a chart with live data by using the set interval. diff --git a/chart-sdk/react/charts/how-to/marker-customization.md b/chart-sdk/react/charts/how-to/marker-customization.md index 70d1d98ec..49e9d076e 100644 --- a/chart-sdk/react/charts/how-to/marker-customization.md +++ b/chart-sdk/react/charts/how-to/marker-customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Marker customization in React Chart component | Syncfusion -description: Learn here all about Marker customization in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to customize marker shape in React Charts | Syncfusion +description: Learn how to customize marker shape per data point in Syncfusion React Charts series for richer visual cues. control: Marker customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Marker customization in React Chart component +# How to customize marker shape in React Charts By using the [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#pointrender), you can customize the marker shape. diff --git a/chart-sdk/react/charts/how-to/percentage-tool-tip.md b/chart-sdk/react/charts/how-to/percentage-tool-tip.md index e7afc681b..3768c8b32 100644 --- a/chart-sdk/react/charts/how-to/percentage-tool-tip.md +++ b/chart-sdk/react/charts/how-to/percentage-tool-tip.md @@ -1,14 +1,14 @@ --- layout: post -title: Percentage tool tip in React Chart component | Syncfusion -description: Learn here all about Percentage tool tip in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to show percentage in pie tooltip in React Charts | Syncfusion +description: Learn how to show each point's percentage share in the Syncfusion React Charts pie tooltip for clearer comparison. control: Percentage tool tip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Percentage tool tip in React Chart component +# How to show percentage in pie tooltip in React Charts By using the [`tooltipRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#tooltiprender) event, you can show the percentage value for each point of pie series in tooltip. diff --git a/chart-sdk/react/charts/how-to/points-customization.md b/chart-sdk/react/charts/how-to/points-customization.md index 607eae042..76d71c7c4 100644 --- a/chart-sdk/react/charts/how-to/points-customization.md +++ b/chart-sdk/react/charts/how-to/points-customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Points customization in React Chart component | Syncfusion -description: Learn here all about Points customization in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to customize point colors in React Charts | Syncfusion +description: Learn how to customize individual point colors in Syncfusion React Charts series for clearer category highlighting. control: Points customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Points customization in React Chart component +# How to customize point colors in React Charts You can customize the series points by using the `pointColorMapping` property. diff --git a/chart-sdk/react/charts/how-to/prevent-data-label.md b/chart-sdk/react/charts/how-to/prevent-data-label.md index 5e72b8110..5c890860e 100644 --- a/chart-sdk/react/charts/how-to/prevent-data-label.md +++ b/chart-sdk/react/charts/how-to/prevent-data-label.md @@ -1,14 +1,14 @@ --- layout: post -title: Prevent data label in React Chart component | Syncfusion -description: Learn here all about Prevent data label in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to prevent data labels in React Charts | Syncfusion +description: Learn how to prevent Syncfusion React Charts data labels from showing zero values for cleaner numeric visualizations. control: Prevent data label platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Prevent data label in React Chart component +# How to prevent data labels in React Charts To prevent the chart data label when the data value is 0, follow the given steps: diff --git a/chart-sdk/react/charts/how-to/selected-data-grid.md b/chart-sdk/react/charts/how-to/selected-data-grid.md index fd43cb4ad..e16973e36 100644 --- a/chart-sdk/react/charts/how-to/selected-data-grid.md +++ b/chart-sdk/react/charts/how-to/selected-data-grid.md @@ -1,14 +1,14 @@ --- layout: post -title: Selected data grid in React Chart component | Syncfusion -description: Learn here all about Selected data grid in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to display selected data in a grid in React Charts | Syncfusion +description: Learn how to display Syncfusion React Charts range-selected data values inside a Syncfusion Grid using drag events. control: Selected data grid platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selected data grid in React Chart component +# How to display selected data in a grid in React Charts By using the [`dragComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#dragcomplete), you can get the selected data values for range selection. diff --git a/chart-sdk/react/charts/how-to/stacking-total.md b/chart-sdk/react/charts/how-to/stacking-total.md index 3482d1333..a2bde31ed 100644 --- a/chart-sdk/react/charts/how-to/stacking-total.md +++ b/chart-sdk/react/charts/how-to/stacking-total.md @@ -1,14 +1,14 @@ --- layout: post -title: Stacking total in React Chart component | Syncfusion -description: Learn here all about Stacking total in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +ttitle: How to show stacking series total in React Charts | Syncfusion +description: Learn how to show the total value on top of stacked Syncfusion React Charts series using annotations at each x point. control: Stacking total platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacking total in React Chart component +# How to show stacking series total in React Charts By using the `annotation`, you can show any element in desired view. diff --git a/chart-sdk/react/charts/how-to/threshold.md b/chart-sdk/react/charts/how-to/threshold.md index 28191b095..70d334ef8 100644 --- a/chart-sdk/react/charts/how-to/threshold.md +++ b/chart-sdk/react/charts/how-to/threshold.md @@ -1,14 +1,14 @@ --- layout: post -title: Threshold in React Chart component | Syncfusion -description: Learn here all about Threshold in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to add a threshold line in React Charts | Syncfusion +description: Learn how to mark a y-axis threshold line on Syncfusion React Charts using striplines to highlight reference values. control: Threshold platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Threshold in React Chart component +# How to add a threshold line in React Charts You can mark a threshold in chart by using the `stripline`. diff --git a/chart-sdk/react/charts/how-to/tool-tip-format.md b/chart-sdk/react/charts/how-to/tool-tip-format.md index 858133a79..c7a352aca 100644 --- a/chart-sdk/react/charts/how-to/tool-tip-format.md +++ b/chart-sdk/react/charts/how-to/tool-tip-format.md @@ -1,14 +1,14 @@ --- layout: post -title: Tool tip format in React Chart component | Syncfusion -description: Learn here all about Tool tip format in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to format date tooltips in React Charts | Syncfusion +description: Learn how to format date and time values in Syncfusion React Charts tooltips for clearer, locale-friendly data display. control: Tool tip format platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip format in React Chart component +# How to format date tooltips in React Charts Using [`tooltipRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#tooltiprender) event, you can able to format the datetime value instead of rendered value. diff --git a/chart-sdk/react/charts/how-to/tool-tip-table.md b/chart-sdk/react/charts/how-to/tool-tip-table.md index f0dea5f62..caa56df89 100644 --- a/chart-sdk/react/charts/how-to/tool-tip-table.md +++ b/chart-sdk/react/charts/how-to/tool-tip-table.md @@ -1,14 +1,14 @@ --- layout: post -title: Tool tip table in React Chart component | Syncfusion -description: Learn here all about Tool tip table in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: How to add a table in the tooltip in React Charts | Syncfusion +description: Learn how to show a custom HTML table inside Syncfusion React Charts tooltips using the template property. control: Tool tip table platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip table in React Chart component +# How to add a table in the tooltip in React Charts You can show the tooltip as table by using template property in tooltip. diff --git a/chart-sdk/react/charts/internationalization.md b/chart-sdk/react/charts/internationalization.md index a73944999..e3a7f0039 100644 --- a/chart-sdk/react/charts/internationalization.md +++ b/chart-sdk/react/charts/internationalization.md @@ -1,14 +1,14 @@ --- layout: post -title: Internationalization in React Chart component | Syncfusion -description: Learn here all about Internationalization in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Internationalization in React Charts | Syncfusion +description: Learn how to localize Syncfusion React Charts for global users with right-to-left layouts, locale-specific number formats, and culture data. control: Internationalization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in React Chart component +# Internationalization in React Charts Chart provides support for internationalization for the following elements: diff --git a/chart-sdk/react/charts/legend.md b/chart-sdk/react/charts/legend.md index 318671d3f..91049ca96 100644 --- a/chart-sdk/react/charts/legend.md +++ b/chart-sdk/react/charts/legend.md @@ -1,14 +1,14 @@ --- layout: post -title: Legend in React Chart component | Syncfusion -description: Learn here all about Legend in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Legend in React Charts | Syncfusion +description: Learn how to add and customize the legend in Syncfusion React Charts to identify series, control position, and toggle series visibility. control: Legend platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in React Chart component +# Legend in React Charts The legend provides information about the series rendered in the chart and helps users identify each series by its color, shape, or style. diff --git a/chart-sdk/react/charts/localization.md b/chart-sdk/react/charts/localization.md index 97198f5a7..1205ecad2 100644 --- a/chart-sdk/react/charts/localization.md +++ b/chart-sdk/react/charts/localization.md @@ -1,14 +1,14 @@ --- layout: post -title: Localization in React Chart component | Syncfusion -description: Learn here all about Localization in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Localization in React Charts | Syncfusion +description: Learn how to localize Syncfusion React Charts by translating axis labels, tooltips, and legends into different languages for global audiences. control: Localization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Localization in React Chart component +# Localization in React Charts The localization library localizes the Chart's default text content. Static text used by chart features (for example, zoom toolbar labels) can be translated by providing a locale value and a translation object. diff --git a/chart-sdk/react/charts/logarithmic-axis.md b/chart-sdk/react/charts/logarithmic-axis.md index c720678a4..509806b27 100644 --- a/chart-sdk/react/charts/logarithmic-axis.md +++ b/chart-sdk/react/charts/logarithmic-axis.md @@ -1,14 +1,14 @@ --- layout: post -title: Logarithmic axis in React Chart component | Syncfusion -description: Learn here all about Logarithmic axis in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Logarithmic Axis in React Charts | Syncfusion +description: Learn how to use a logarithmic axis in Syncfusion React Charts to plot data that spans several orders of magnitude on a compressed scale. control: Logarithmic axis platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Logarithmic axis in React Chart component +# Logarithmic Axis in React Charts diff --git a/chart-sdk/react/charts/multiple-panes.md b/chart-sdk/react/charts/multiple-panes.md index fd537b69b..e9fdc01a6 100644 --- a/chart-sdk/react/charts/multiple-panes.md +++ b/chart-sdk/react/charts/multiple-panes.md @@ -1,14 +1,14 @@ --- layout: post -title: Multiple panes in React Chart component | Syncfusion -description: Learn here all about Multiple panes in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Multiple Panes in React Charts | Syncfusion +description: Learn how to split Syncfusion React Charts into multiple panes to compare related series like price and volume in a single, aligned view. control: Multiple panes platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Multiple panes in React Chart component +# Multiple Panes in React Charts The chart area can be divided into multiple panes by defining rows and columns using the [`rows`](https://ej2.syncfusion.com/react/documentation/api/chart/row) and [`columns`](https://ej2.syncfusion.com/react/documentation/api/chart/column) collections. This feature is useful for displaying multiple related datasets within the same chart container while maintaining clear visual separation. diff --git a/chart-sdk/react/charts/nextjs-getting-started.md b/chart-sdk/react/charts/nextjs-getting-started.md index c2fb5d69e..24a13c901 100644 --- a/chart-sdk/react/charts/nextjs-getting-started.md +++ b/chart-sdk/react/charts/nextjs-getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: React Chart getting started with Next.js | Syncfusion -description: Check out and learn here all about how to use the Syncfusion React UI components in the Next.js project. +title: Getting Started with React Charts in Next.js | Syncfusion +description: Learn how to set up Syncfusion React Charts in a Next.js 14 or 15 project, install the package, and add the Chart component to a server-rendered page. control: Next.js platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with React Chart in Next.js +# Getting Started with React Charts in Next.js This section provides a step-by-step guide for setting up a Next.js application and integrating the [React Charts](https://www.syncfusion.com/react-components/react-charts) component. diff --git a/chart-sdk/react/charts/numeric-axis.md b/chart-sdk/react/charts/numeric-axis.md index e66719470..a001ef916 100644 --- a/chart-sdk/react/charts/numeric-axis.md +++ b/chart-sdk/react/charts/numeric-axis.md @@ -1,7 +1,7 @@ --- layout: post -title: Numeric axis in React Chart component | Syncfusion -description: Learn here all about Numeric axis in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Numeric axis in React Charts | Syncfusion +description: Learn how to configure a numeric axis in Syncfusion React Charts to plot continuous numeric values with a defined range and interval. control: Numeric axis platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Numeric axis in React Chart component +# Numeric axis in React Charts The numeric axis is used to represent numeric values in a chart. By default, the `valueType` of an axis is set to `Double`, which is suitable for displaying continuous numerical data. diff --git a/chart-sdk/react/charts/preact.md b/chart-sdk/react/charts/preact.md index a0408e652..3b03f3a6d 100644 --- a/chart-sdk/react/charts/preact.md +++ b/chart-sdk/react/charts/preact.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting Started with React Chart Component for Preact | Syncfusion -description: Check out and learn about getting started with the Preact Framework and React Chart Component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React Charts in Preact | Syncfusion +description: Learn how to set up Syncfusion React Charts in a Preact project, install the package, and render your first chart in this lightweight React alternative. control: Preact platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with React Chart Component in the Preact Framework +# Getting Started with React Charts in Preact This article provides a step-by-step guide for setting up a [Preact](https://preactjs.com) project and integrating the [React Charts](https://www.syncfusion.com/react-components/react-charts) component. diff --git a/chart-sdk/react/charts/render-methods.md b/chart-sdk/react/charts/render-methods.md index 07e0b0837..26fa88972 100644 --- a/chart-sdk/react/charts/render-methods.md +++ b/chart-sdk/react/charts/render-methods.md @@ -1,7 +1,7 @@ --- layout: post -title: Render methods in React Chart component | Syncfusion -description: Learn here all about Render methods in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Render methods in React Charts | Syncfusion +description: Learn how to use the render and refresh methods on Syncfusion React Charts to re-render the chart manually after data or option changes. control: Render methods platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Render methods in React Chart component +# Render methods in React Charts Chart uses following two rendering methods. diff --git a/chart-sdk/react/charts/selection.md b/chart-sdk/react/charts/selection.md index ce7a0a468..2fc9a5e87 100644 --- a/chart-sdk/react/charts/selection.md +++ b/chart-sdk/react/charts/selection.md @@ -1,15 +1,15 @@ --- layout: post -title: Selection in React Chart component | Syncfusion -description: Learn here all about Selection in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Selection +title: Selection in React Charts | Syncfusion +description: Learn how to select points, series, or rectangular and lasso regions in Syncfusion React Charts using Point, Series, Cluster, Drag, and Lasso selection modes. +control: Selection platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selection in React Chart component +# Selection in React Charts The chart provides selection support for both series and individual data points when users interact with the chart using mouse clicks. diff --git a/chart-sdk/react/charts/series-label.md b/chart-sdk/react/charts/series-label.md index ef6ffe7c5..2a912c06b 100644 --- a/chart-sdk/react/charts/series-label.md +++ b/chart-sdk/react/charts/series-label.md @@ -1,14 +1,14 @@ --- layout: post -title: Series label in React Chart component | Syncfusion -description: Learn here all about Series label in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Series label in React Charts | Syncfusion +description: Learn how to add labels to the series in Syncfusion React Charts to make every series self-describing without relying on the legend. control: Series label platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Series label in React Chart component +# Series label in React Charts The series label displays the name of each series inline, positioned near the end of the series path or the last visible data point. This helps identify each series without referring to the legend. diff --git a/chart-sdk/react/charts/strip-line.md b/chart-sdk/react/charts/strip-line.md index 2ac91e27a..1ad473dee 100644 --- a/chart-sdk/react/charts/strip-line.md +++ b/chart-sdk/react/charts/strip-line.md @@ -1,8 +1,8 @@ --- layout: post -title: Strip line in React Chart component | Syncfusion -description: Learn here all about Strip line in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Strip line +title: Strip line in React Charts | Syncfusion +description: Learn how to add horizontal, vertical, or segmented strip lines in Syncfusion React Charts to mark thresholds, ranges, or reference values. +control: Strip line platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Strip line in React Chart component +# Strip line in React Charts The [React Charts](https://www.syncfusion.com/react-components/react-charts) component supports horizontal and vertical strip lines, providing visual guides to highlight specific ranges in the chart area. Strip lines can be added to both axes and fully customized based on visual and functional requirements. To use strip line features, inject the `StripLine` module into the `services`. diff --git a/chart-sdk/react/charts/synchronized-chart.md b/chart-sdk/react/charts/synchronized-chart.md index 60f107a4a..504e92f45 100644 --- a/chart-sdk/react/charts/synchronized-chart.md +++ b/chart-sdk/react/charts/synchronized-chart.md @@ -1,14 +1,14 @@ --- layout: post -title: Synchronized Charts in React Chart component | Syncfusion -description: Learn here all about Synchronized Charts in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Synchronized Charts in React Charts | Syncfusion +description: Learn how to synchronize Syncfusion React Charts across multiple panels so tooltip, crosshair, and selection events move together for linked views. control: Synchronized charts platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Synchronized Charts in React Chart component +# Synchronized Charts in React Charts Synchronized charts allow multiple chart instances to share common interactions so that actions performed on one chart are reflected across the others. This approach is useful for comparing related datasets and analyzing trends consistently across multiple visualizations. diff --git a/chart-sdk/react/charts/technical-indicators.md b/chart-sdk/react/charts/technical-indicators.md index 49dfd364a..f07e90ea3 100644 --- a/chart-sdk/react/charts/technical-indicators.md +++ b/chart-sdk/react/charts/technical-indicators.md @@ -1,15 +1,15 @@ --- layout: post -title: Technical indicators in React Chart component | Syncfusion -description: Learn here all about Technical indicators in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Technical indicators +title: Technical indicators in React Charts | Syncfusion +description: Learn how to overlay technical indicators on Syncfusion React Charts for financial analysis. +control: Technical indicators platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Technical indicators in React Chart component +# Technical indicators in React Charts A technical indicator is a mathematical calculation based on historical price, volume, or open‑interest information that aims to forecast financial market direction. diff --git a/chart-sdk/react/charts/title-subtitle.md b/chart-sdk/react/charts/title-subtitle.md index 83bfd4626..0cf6c2d84 100644 --- a/chart-sdk/react/charts/title-subtitle.md +++ b/chart-sdk/react/charts/title-subtitle.md @@ -1,14 +1,14 @@ --- layout: post -title: Title and subtitle in React Chart component | Syncfusion -description: Learn here all about Title and subtitle in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Title and subtitle in React Charts | Syncfusion +description: Learn how to add a title, subtitle, and custom text to Syncfusion React Charts with options for alignment, font, and background styling. control: Title and subtitle platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title and Subtitle in React Chart Component +# Title and subtitle in React Charts Chart titles and subtitles help provide context for the visualized data. The title typically indicates the main subject or metric represented in the chart, while the subtitle adds supporting details such as data sources, time ranges, or explanatory notes. Both elements can be customized in terms of position, alignment, and style to align with application design requirements. diff --git a/chart-sdk/react/charts/tool-tip.md b/chart-sdk/react/charts/tool-tip.md index c0dcfdf01..214fc96e8 100644 --- a/chart-sdk/react/charts/tool-tip.md +++ b/chart-sdk/react/charts/tool-tip.md @@ -1,14 +1,14 @@ --- layout: post -title: Tooltip in React Chart component | Syncfusion -description: Learn here all about Tooltip in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Tooltip +title: Tooltip in React Charts | Syncfusion +description: Learn how to enable tooltips in Syncfusion React Charts with custom formats, HTML templates, highlighting, fixed position, and follow-pointer behavior. +control: Tooltip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in React Chart component +# Tooltip in React Charts The chart displays detailed information about a data point through a tooltip when the mouse pointer moves over the point. diff --git a/chart-sdk/react/charts/trend-lines.md b/chart-sdk/react/charts/trend-lines.md index 0368af495..a0867ab43 100644 --- a/chart-sdk/react/charts/trend-lines.md +++ b/chart-sdk/react/charts/trend-lines.md @@ -1,7 +1,7 @@ --- layout: post -title: Trend lines in React Chart component | Syncfusion -description: Learn here all about Trend lines in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Trend lines in React Charts | Syncfusion +description: Learn how to add linear, exponential, logarithmic, power, moving average and polynomial trend lines to Syncfusion React Charts to highlight data direction. control: Trend lines platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Trend lines in React Chart component +# Trend lines in React Charts Trendlines help identify patterns, direction, and overall trends in numerical data. They project the general movement of data values and are widely used in analytics, forecasting, and financial charts. Trendlines can be added to Cartesian series types such as Line, Column, Scatter, Area, Candle, and Hilo (excluding bar series). Multiple trendlines can be added to a single series based on the analysis needs. diff --git a/chart-sdk/react/charts/understanding-chart.md b/chart-sdk/react/charts/understanding-chart.md index f218b8de7..c1909378a 100644 --- a/chart-sdk/react/charts/understanding-chart.md +++ b/chart-sdk/react/charts/understanding-chart.md @@ -1,14 +1,14 @@ --- layout: post -title: Understanding React Chart component | Syncfusion -description: Explore and understand the Syncfusion React Chart component in Essential JS 2 and discover its powerful features. +title: Understanding React Charts | Syncfusion +description: Learn the core building blocks of Syncfusion React Charts, including series, axes, legends, tooltips, and how they fit into a chart layout. platform: chart-sdk control: Understanding documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Understanding of React Chart +# Understanding React Charts The [React Charts](https://www.syncfusion.com/react-components/react-charts) component is a versatile visualization tool that presents data using a wide range of graphical formats. Each chart is composed of essential elements—such as the title, series, tooltip, legend, and axes—that work together to provide clear, interactive, and meaningful insights. Understanding these elements helps in configuring and customizing charts for various analytical needs. diff --git a/chart-sdk/react/charts/user-interaction.md b/chart-sdk/react/charts/user-interaction.md index d78ec7ff3..7b9440225 100644 --- a/chart-sdk/react/charts/user-interaction.md +++ b/chart-sdk/react/charts/user-interaction.md @@ -1,7 +1,7 @@ --- layout: post -title: User interaction in React Chart component | Syncfusion -description: Learn here all about User interaction in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: User interaction in React Charts | Syncfusion +description: Learn how Syncfusion React Charts respond to user interactions including tooltips, zooming, panning, crosshair, trackball, selection, and data editing. control: User interaction platform: chart-sdk documentation: ug @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# User interaction in React Chart component +# User interaction in React Charts ## Tooltip diff --git a/chart-sdk/react/charts/working-with-data.md b/chart-sdk/react/charts/working-with-data.md index 11e66cb4e..7c745b144 100644 --- a/chart-sdk/react/charts/working-with-data.md +++ b/chart-sdk/react/charts/working-with-data.md @@ -1,7 +1,7 @@ --- layout: post -title: Working with data in React Chart component | Syncfusion -description: Learn here all about Working with data in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +title: Working with data in React Charts | Syncfusion +description: Learn how to bind local, remote, and observable data sources to Syncfusion React Charts and map fields to series and axes. control: Working with data platform: chart-sdk documentation: ug @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Working with data in React Chart component +# Working with data in React Charts The [React Charts](https://www.syncfusion.com/react-components/react-charts) component supports multiple data binding approaches to suit different application scenarios. Data can be bound from local JSON arrays, dynamically loaded on demand with lazy loading, or fetched from remote services using various adaptor patterns. This guide covers all available data binding methods, helping you choose the right approach for your use case based on data size, performance requirements, and backend architecture. diff --git a/chart-sdk/react/charts/zooming.md b/chart-sdk/react/charts/zooming.md index 8f89285a9..3d318d458 100644 --- a/chart-sdk/react/charts/zooming.md +++ b/chart-sdk/react/charts/zooming.md @@ -1,14 +1,14 @@ --- layout: post -title: Zooming in React Chart component | Syncfusion -description: Learn here all about Zooming in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -control: Zooming +title: Zooming in React Charts | Syncfusion +description: Learn how to enable mouse-wheel, pinch, selection, and toolbar zooming in Syncfusion React Charts, with options for pan and reset. +control: Zooming platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Zooming in React Chart component +# Zooming in React Charts To get start quickly with React Chart Zooming and Panning, you can check on this video: diff --git a/chart-sdk/react/circular-gauge/accessibility.md b/chart-sdk/react/circular-gauge/accessibility.md index 44866af5d..f76adfcd9 100644 --- a/chart-sdk/react/circular-gauge/accessibility.md +++ b/chart-sdk/react/circular-gauge/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React Circular Gauge component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Circular Gauge component of Syncfusion Essential JS 2 and more. +title: Accessibility in React Circular Gauge | Syncfusion +description: Learn how the React Circular Gauge meets WCAG 2.2, Section 508, ARIA, and screen reader support, with WAI-ARIA attribute details and compliance validation. control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React Circular Gauge component +# Accessibility in React Circular Gauge The Circular Gauge component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/react/circular-gauge/ej1-api-migration.md b/chart-sdk/react/circular-gauge/ej1-api-migration.md index 571c5306d..41f120661 100644 --- a/chart-sdk/react/circular-gauge/ej1-api-migration.md +++ b/chart-sdk/react/circular-gauge/ej1-api-migration.md @@ -1,14 +1,14 @@ --- layout: post -title: Ej1 api migration in React Circular gauge component | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion React Circular gauge component of Syncfusion Essential JS 2 and more. -control: Ej1 api migration +title: Migration from Essential JS 1 in React Circular Gauge | Syncfusion +description: Migrate the React Circular Gauge from Essential JS 1 to JS 2 with side-by-side property mapping for axes, ticks, labels, ranges, pointers, and other settings. +control: Ej1 api migration platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in React Circular gauge component +# Migration from Essential JS 1 in React Circular Gauge This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/react/circular-gauge/gauge-animation.md b/chart-sdk/react/circular-gauge/gauge-animation.md index 297e43768..0a8f1ee3a 100644 --- a/chart-sdk/react/circular-gauge/gauge-animation.md +++ b/chart-sdk/react/circular-gauge/gauge-animation.md @@ -1,14 +1,14 @@ --- layout: post -title: Animation in React Circular Gauge component | Syncfusion -description: Learn here all about animation in the Syncfusion React Circular Gauge component of Syncfusion Essential JS 2 and more. +title: Animation in React Circular Gauge | Syncfusion +description: Animate React Circular Gauge elements sequentially using the animationDuration property to render axis lines, ticks, labels, ranges, pointers, and annotations. control: Circular Gauge platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Animation in React Circular Gauge component +# Animation in React Circular Gauge All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](https://ej2.syncfusion.com/react/documentation/api/circular-gauge#animationduration) property. The animation for the Circular Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. diff --git a/chart-sdk/react/circular-gauge/gauge-annotations.md b/chart-sdk/react/circular-gauge/gauge-annotations.md index b4305593e..052e77d2d 100644 --- a/chart-sdk/react/circular-gauge/gauge-annotations.md +++ b/chart-sdk/react/circular-gauge/gauge-annotations.md @@ -1,14 +1,14 @@ --- layout: post -title: Gauge annotations in React Circular gauge component | Syncfusion -description: Learn here all about Gauge annotations in Syncfusion React Circular gauge component of Syncfusion Essential JS 2 and more. +title: Annotations in React Circular Gauge | Syncfusion +description: Mark specific areas in the React Circular Gauge with custom text, shapes, or images by adding the Annotations module and configuring annotation content. control: Gauge annotations platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge annotations in React Circular gauge component +# Annotations in React Circular Gauge Annotations are used to mark a specific area of interest in the gauge with texts, shapes or images. diff --git a/chart-sdk/react/circular-gauge/gauge-appearance.md b/chart-sdk/react/circular-gauge/gauge-appearance.md index e5c1ec850..38504dd8a 100644 --- a/chart-sdk/react/circular-gauge/gauge-appearance.md +++ b/chart-sdk/react/circular-gauge/gauge-appearance.md @@ -1,14 +1,14 @@ --- layout: post -title: Gauge appearance in React Circular gauge component | Syncfusion -description: Learn here all about Gauge appearance in Syncfusion React Circular gauge component of Syncfusion Essential JS 2 and more. -control: Gauge appearance +title: Appearance in React Circular Gauge | Syncfusion +description: Customize React Circular Gauge appearance with title text, position, background, margins, and other style properties to match your application design. +control: Gauge appearance platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge appearance in React Circular gauge component +# Appearance in React Circular Gauge ## Gauge Title diff --git a/chart-sdk/react/circular-gauge/gauge-axes.md b/chart-sdk/react/circular-gauge/gauge-axes.md index 57edfcec0..819060944 100644 --- a/chart-sdk/react/circular-gauge/gauge-axes.md +++ b/chart-sdk/react/circular-gauge/gauge-axes.md @@ -1,14 +1,14 @@ --- layout: post -title: Gauge axes in React Circular gauge component | Syncfusion -description: Learn here all about Gauge axes in Syncfusion React Circular gauge component of Syncfusion Essential JS 2 and more. +title: Axes in React Circular Gauge | Syncfusion +description: Configure axes in the React Circular Gauge with lineStyle, background, major and minor ticks, labels, and multiple-axis support for richer visualizations. control: Gauge axes platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge axes in React Circular Gauge component +# Axes in React Circular Gauge By default, gauge will be displayed with an axis. Each axis contains its own ranges, pointers and annotation. diff --git a/chart-sdk/react/circular-gauge/gauge-dimensions.md b/chart-sdk/react/circular-gauge/gauge-dimensions.md index 1869dd4b2..b45b44589 100644 --- a/chart-sdk/react/circular-gauge/gauge-dimensions.md +++ b/chart-sdk/react/circular-gauge/gauge-dimensions.md @@ -1,7 +1,7 @@ --- layout: post -title: Gauge dimensions in React Circular gauge component | Syncfusion -description: Learn here all about Gauge dimensions in Syncfusion React Circular gauge component of Syncfusion Essential JS 2 and more. +title: Dimensions in React Circular Gauge | Syncfusion +description: Set the React Circular Gauge size via inline width and height, CSS, or container-based sizing for responsive layouts in pixels or percentages. control: Gauge dimensions platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge dimensions in React Circular gauge component +# Dimensions in React Circular Gauge ## Size for Container diff --git a/chart-sdk/react/circular-gauge/gauge-legend.md b/chart-sdk/react/circular-gauge/gauge-legend.md index 8cd43d04e..c5b5eee72 100644 --- a/chart-sdk/react/circular-gauge/gauge-legend.md +++ b/chart-sdk/react/circular-gauge/gauge-legend.md @@ -1,14 +1,14 @@ --- layout: post -title: Gauge legend in React Circular gauge component | Syncfusion -description: Learn here all about Gauge legend in Syncfusion React Circular gauge component of Syncfusion Essential JS 2 and more. +title: Legend in React Circular Gauge | Syncfusion +description: Add and customize legends in the React Circular Gauge to identify range categories using position, alignment, shape, and other style options. control: Gauge legend platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge legend in React Circular gauge component +# Legend in React Circular Gauge Legend provides valuable information for interpreting what the circular gauge axis range displays, and they can be represented in various colors, shapes, and other identifiers based on the data. It gives a breakdown of what each symbol represents in the axis range of circular gauge. diff --git a/chart-sdk/react/circular-gauge/gauge-pointers.md b/chart-sdk/react/circular-gauge/gauge-pointers.md index 8067d5108..845404b7f 100644 --- a/chart-sdk/react/circular-gauge/gauge-pointers.md +++ b/chart-sdk/react/circular-gauge/gauge-pointers.md @@ -1,7 +1,7 @@ --- layout: post -title: Gauge pointers in React Circular gauge component | Syncfusion -description: Learn here all about Gauge pointers in Syncfusion React Circular gauge component of Syncfusion Essential JS 2 and more. +title: Pointers in React Circular Gauge | Syncfusion +description: Use Needle, RangeBar, and Marker pointers in the React Circular Gauge to indicate axis values, with multiple pointers, animation, and pointer drag support. control: Gauge pointers platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge pointers in React Circular gauge component +# Pointers in React Circular Gauge Pointers are used to indicate values on the axis. Value of the pointer can be modified using the [`value`](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/pointer#value-number) property. diff --git a/chart-sdk/react/circular-gauge/gauge-print-and-export.md b/chart-sdk/react/circular-gauge/gauge-print-and-export.md index 25bc55add..ee71a2024 100644 --- a/chart-sdk/react/circular-gauge/gauge-print-and-export.md +++ b/chart-sdk/react/circular-gauge/gauge-print-and-export.md @@ -1,14 +1,14 @@ --- layout: post -title: Gauge print and export in React Circular gauge component | Syncfusion -description: Learn here all about Gauge print and export in Syncfusion React Circular gauge component of Syncfusion Essential JS 2 and more. -control: Gauge print and export +title: Print and Export in React Circular Gauge | Syncfusion +description: Print the React Circular Gauge or export it as image or PDF files using the Print and Export modules with allowPrint, allowImageExport, and allowPdfExport. +control: Gauge print and export platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge print and export in React Circular gauge component +# Print and Export in React Circular Gauge ## Print diff --git a/chart-sdk/react/circular-gauge/gauge-ranges.md b/chart-sdk/react/circular-gauge/gauge-ranges.md index 18332a029..29b621a04 100644 --- a/chart-sdk/react/circular-gauge/gauge-ranges.md +++ b/chart-sdk/react/circular-gauge/gauge-ranges.md @@ -1,7 +1,7 @@ --- layout: post -title: Gauge ranges in React Circular gauge component | Syncfusion -description: Learn here all about Gauge ranges in Syncfusion React Circular gauge component of Syncfusion Essential JS 2 and more. +title: Ranges in React Circular Gauge | Syncfusion +description: Highlight value intervals on the React Circular Gauge axis using ranges with start, end, color, and other style properties for clearer data visualization. control: Gauge ranges platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge ranges in React Circular gauge component +# Ranges in React Circular Gauge You can categories certain interval on gauge axis using [`ranges`](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/range#properties) property. diff --git a/chart-sdk/react/circular-gauge/gauge-user-interaction.md b/chart-sdk/react/circular-gauge/gauge-user-interaction.md index 22553ceeb..c3541d41e 100644 --- a/chart-sdk/react/circular-gauge/gauge-user-interaction.md +++ b/chart-sdk/react/circular-gauge/gauge-user-interaction.md @@ -1,7 +1,7 @@ --- layout: post -title: Gauge user interaction in React Circular gauge component | Syncfusion -description: Learn here all about Gauge user interaction in Syncfusion React Circular gauge component of Syncfusion Essential JS 2 and more. +title: User Interaction in React Circular Gauge | Syncfusion +description: Enable user interaction in the React Circular Gauge with tooltips for pointers and ranges, pointer drag support, and customizable tooltip templates and styles. control: Gauge user interaction platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge user interaction in React Circular gauge component +# User Interaction in React Circular Gauge ## Tooltip for pointers diff --git a/chart-sdk/react/circular-gauge/getting-started.md b/chart-sdk/react/circular-gauge/getting-started.md index e4af1562d..4c1e8702d 100644 --- a/chart-sdk/react/circular-gauge/getting-started.md +++ b/chart-sdk/react/circular-gauge/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting Started with React Circular Gauge component | Syncfusion -description: Check out and learn about getting started with the React Circular Gauge component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React Circular Gauge | Syncfusion +description: Learn how to get started with the Syncfusion React Circular Gauge control, including setup, dependencies, module registration, and a quick start sample. control: Getting Started platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with React Circular Gauge component +# Getting Started with React Circular Gauge This section explains the steps required to create a simple React Circular Gauge component and demonstrate its basic usage in a React environment. diff --git a/chart-sdk/react/circular-gauge/internationalization.md b/chart-sdk/react/circular-gauge/internationalization.md index ee9873704..34a2f539e 100644 --- a/chart-sdk/react/circular-gauge/internationalization.md +++ b/chart-sdk/react/circular-gauge/internationalization.md @@ -1,14 +1,14 @@ --- layout: post -title: Internationalization in React Circular Gauge component | Syncfusion -description: Learn here all about Internationalization in Syncfusion React Circular Gauge component of Syncfusion Essential JS 2 and more. +title: Internationalization in React Circular Gauge | Syncfusion +description: Globalize the React Circular Gauge by localizing axis labels and tooltips with format strings, numeric and culture formatting, and per-locale number formats. control: Internationalization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in React Circular Gauge component +# Internationalization in React Circular Gauge Circular Gauge provides internationalization support for below elements. diff --git a/chart-sdk/react/circular-gauge/nextjs-getting-started.md b/chart-sdk/react/circular-gauge/nextjs-getting-started.md index 6c7780bb8..d157c18f0 100644 --- a/chart-sdk/react/circular-gauge/nextjs-getting-started.md +++ b/chart-sdk/react/circular-gauge/nextjs-getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: React Circular gauge getting started with Next.js | Syncfusion -description: Check out and learn here all about about how to use the Syncfusion React UI components in the Next.js project. +title: Getting Started with Next.js and React Circular Gauge | Syncfusion +description: Set up a Next.js app and integrate the Syncfusion React Circular Gauge with a step-by-step guide on prerequisites, package install, and configuration. control: Next.js platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Creating a Next.js Application Using Syncfusion® React Components +# Getting Started with Next.js and React Circular Gauge This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion® React Circular Gauge component. diff --git a/chart-sdk/react/heatmap-chart/accessibility.md b/chart-sdk/react/heatmap-chart/accessibility.md index 1913a5ea8..ca655a185 100644 --- a/chart-sdk/react/heatmap-chart/accessibility.md +++ b/chart-sdk/react/heatmap-chart/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React HeatMap component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React HeatMap component of Syncfusion Essential JS 2 and more. +title: Accessibility in React HeatMap Chart | Syncfusion +description: Use the React HeatMap Chart with WAI-ARIA roles, keyboard navigation, screen reader support, and WCAG 2.2, Section 508, and ADA compliance. control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React HeatMap component +# Accessibility in React HeatMap Chart The HeatMap component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/react/heatmap-chart/appearance.md b/chart-sdk/react/heatmap-chart/appearance.md index ef1c10268..e27e172c1 100644 --- a/chart-sdk/react/heatmap-chart/appearance.md +++ b/chart-sdk/react/heatmap-chart/appearance.md @@ -1,14 +1,14 @@ --- layout: post -title: Appearance in React Heatmap chart component | Syncfusion -description: Learn here all about Appearance in Syncfusion React Heatmap chart component of Syncfusion Essential JS 2 and more. +title: Appearance in React HeatMap Chart | Syncfusion +description: Style React HeatMap Chart cells with cellSettings including border, radius, hover highlighting, and Table/Row/Column color gradient modes. control: Appearance platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in React Heatmap chart component +# Appearance in React HeatMap Chart ## Cell customization diff --git a/chart-sdk/react/heatmap-chart/axis.md b/chart-sdk/react/heatmap-chart/axis.md index eeee88602..8314e6ebd 100644 --- a/chart-sdk/react/heatmap-chart/axis.md +++ b/chart-sdk/react/heatmap-chart/axis.md @@ -1,14 +1,14 @@ --- layout: post -title: Axis in React HeatMap chart component | Syncfusion -description: Learn here all about axis in Syncfusion React HeatMap chart component of Syncfusion Essential JS 2 and more. -control: Axis +title: Axis in React HeatMap Chart | Syncfusion +description: Configure X and Y axes on the React HeatMap Chart as Category, Numeric, or DateTime, and invert or oppose them with valueType and label options. +control: Axis platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis in React HeatMap chart component +# Axis in React HeatMap Chart HeatMap consists of two axes namely, X-axis and Y-axis that displays the row headers and column headers to plot the data points respectively. You can define the type, format, and other customizing options for both axes in the HeatMap. diff --git a/chart-sdk/react/heatmap-chart/bubble-heatmap.md b/chart-sdk/react/heatmap-chart/bubble-heatmap.md index a5c3de8e2..106146f57 100644 --- a/chart-sdk/react/heatmap-chart/bubble-heatmap.md +++ b/chart-sdk/react/heatmap-chart/bubble-heatmap.md @@ -1,14 +1,14 @@ --- layout: post -title: Bubble heatmap in React Heatmap chart component | Syncfusion -description: Learn here all about Bubble heatmap in Syncfusion React Heatmap chart component of Syncfusion Essential JS 2 and more. +title: Bubble HeatMap in React HeatMap Chart | Syncfusion +description: Render data points in the React HeatMap Chart as bubbles whose size, color, or sector encodes the value, by setting tileType to Bubble. control: Bubble heatmap platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bubble heatmap in React Heatmap chart component +# Bubble HeatMap in React HeatMap Chart Data points represent the data source values with **gradient** or **fixed** colors in the HeatMap. You can customize the appearance of these data points by changing the `color` and `size` attributes. diff --git a/chart-sdk/react/heatmap-chart/dimensions.md b/chart-sdk/react/heatmap-chart/dimensions.md index be696683c..eb207b5c2 100644 --- a/chart-sdk/react/heatmap-chart/dimensions.md +++ b/chart-sdk/react/heatmap-chart/dimensions.md @@ -1,14 +1,14 @@ --- layout: post -title: Dimensions in React Heatmap chart component | Syncfusion -description: Learn here all about Dimensions in Syncfusion React Heatmap chart component of Syncfusion Essential JS 2 and more. +title: Dimensions in React HeatMap Chart | Syncfusion +description: Set the React HeatMap Chart size in pixels or as a percentage of its container using the width and height properties, or by sizing the container. control: Dimensions platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dimensions in React Heatmap chart component +# Dimensions in React HeatMap Chart ## Size for container @@ -22,7 +22,7 @@ Heat map can be rendered to its container size. You can set the size through inl ## Size for heat map -You can set the size of heat map directly by using the [width](https://ej2.syncfusion.com/react/documentation/api/heatmap/#width) and [height](https://ej2.syncfusion.com/react/documentation/api/heatmap/#height) properties. +You can set the size of heat map directly by using the [width](https://ej2.syncfusion.com/react/documentation/api/heatmap#width) and [height](https://ej2.syncfusion.com/react/documentation/api/heatmap#height) properties. ## In pixel diff --git a/chart-sdk/react/heatmap-chart/ej1-api-migration.md b/chart-sdk/react/heatmap-chart/ej1-api-migration.md index 981bcd530..64331495e 100644 --- a/chart-sdk/react/heatmap-chart/ej1-api-migration.md +++ b/chart-sdk/react/heatmap-chart/ej1-api-migration.md @@ -1,14 +1,14 @@ --- layout: post -title: Ej1 api migration in React Heatmap chart component | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion React Heatmap chart component of Syncfusion Essential JS 2 and more. +title: EJ1 API Migration in React HeatMap Chart | Syncfusion +description: Migrate Syncfusion React HeatMap Chart properties and events from Essential JS 1 to Essential JS 2, including data, palette, and legend APIs. control: Ej1 api migration platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in React Heatmap chart component +# EJ1 API Migration in React HeatMap Chart This article describes the API migration process of heat map component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/react/heatmap-chart/events.md b/chart-sdk/react/heatmap-chart/events.md index 4a1e01862..23688ffde 100644 --- a/chart-sdk/react/heatmap-chart/events.md +++ b/chart-sdk/react/heatmap-chart/events.md @@ -1,14 +1,14 @@ --- layout: post -title: Events in React HeatMap chart component | Syncfusion -description: Learn here all about Events in Syncfusion React HeatMap chart component of Syncfusion Essential JS 2 and more. +title: Events in React HeatMap Chart | Syncfusion +description: Handle React HeatMap Chart events such as cellClick, cellRender, cellSelected, and created to react to user interaction and cell lifecycle. control: Events platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Events in React HeatMap chart component +# Events in React HeatMap Chart This section describes the HeatMap chart event, which occurs when the required actions are performed. diff --git a/chart-sdk/react/heatmap-chart/getting-started.md b/chart-sdk/react/heatmap-chart/getting-started.md index c818fd7cd..25caa4a06 100644 --- a/chart-sdk/react/heatmap-chart/getting-started.md +++ b/chart-sdk/react/heatmap-chart/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with React HeatMap chart component | Syncfusion -description: Check out and learn about getting started with the React HeatMap chart component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React HeatMap Chart | Syncfusion +description: Learn how to get started with the Syncfusion React HeatMap Chart control. Explore setup, features, examples, and customization options. control: HeatMap platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with React HeatMap chart component +# Getting Started with React HeatMap Chart This section explains the steps required to create a HeatMap and demonstrates the basic usage of the HeatMap component. diff --git a/chart-sdk/react/heatmap-chart/how-to/legend-customization.md b/chart-sdk/react/heatmap-chart/how-to/legend-customization.md index d0d384854..da0c593f7 100644 --- a/chart-sdk/react/heatmap-chart/how-to/legend-customization.md +++ b/chart-sdk/react/heatmap-chart/how-to/legend-customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Legend customization in React Heatmap chart component | Syncfusion -description: Learn here all about Legend customization in Syncfusion React Heatmap chart component of Syncfusion Essential JS 2 and more. +title: Customize legend labels in React HeatMap Chart | Syncfusion +description: Customize or hide React HeatMap Chart legend labels at runtime by handling the legendRender client-side event with custom text and styles. control: Legend customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend customization in React Heatmap chart component +# How to customize legend labels in React HeatMap Chart You can change the legend label using the `legendRender` client-side event. You can also hide the legend label using this client-side event. diff --git a/chart-sdk/react/heatmap-chart/how-to/tool-tip-table.md b/chart-sdk/react/heatmap-chart/how-to/tool-tip-table.md index 1ed9771e7..cb1a440dd 100644 --- a/chart-sdk/react/heatmap-chart/how-to/tool-tip-table.md +++ b/chart-sdk/react/heatmap-chart/how-to/tool-tip-table.md @@ -1,14 +1,14 @@ --- layout: post -title: Tool tip table in React Heatmap chart component | Syncfusion -description: Learn here all about Tool tip table in Syncfusion React Heatmap chart component of Syncfusion Essential JS 2 and more. +title: Create a table in tooltip in React HeatMap Chart | Syncfusion +description: Render the React HeatMap Chart tooltip as an HTML table by setting the template id in tooltipSettings to show multi-column cell data. control: Tool tip table platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip table in React Heatmap chart component +# How to create a table in tooltip in React HeatMap Chart You can show a tooltip as a table using the `template` property in `tooltipSettings`. diff --git a/chart-sdk/react/heatmap-chart/legend.md b/chart-sdk/react/heatmap-chart/legend.md index 79f9251e4..ae03160b4 100644 --- a/chart-sdk/react/heatmap-chart/legend.md +++ b/chart-sdk/react/heatmap-chart/legend.md @@ -1,16 +1,16 @@ --- layout: post -title: Legend in React Heatmap chart component | Syncfusion -description: Learn here all about Legend in Syncfusion React Heatmap chart component of Syncfusion Essential JS 2 and more. +title: Legend in React HeatMap Chart | Syncfusion +description: Show a gradient or list legend on the React HeatMap Chart to map colors to cell values, and configure position, alignment, and dimensions. control: Legend platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in React Heatmap chart component +# Legend in React HeatMap Chart -The legend is used to provide the information about the heat map cell. You can enable the legend by setting the [visible](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#visible) property to **true** and injecting the `Legend` module into the `services`. +The legend is used to provide the information about the heat map cell. You can enable the legend by setting the [visible](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#visible) property to **true** and injecting the `Legend` module into the `services`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -30,7 +30,7 @@ Heat map supports two legend types: Gradient and list type. * Gradient - This is a continuous color legend with smooth color transition between palette color values. * List - List is a fixed color legend. Each palette color information is shown separately in the list item. -You can change the legend type by using the [type](https://ej2.syncfusion.com/react/documentation/api/heatmap/paletteSettings/#type) property in the `paletteSettings` property. +You can change the legend type by using the [type](https://ej2.syncfusion.com/react/documentation/api/heatmap/paletteSettings#type) property in the `paletteSettings` property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -45,7 +45,7 @@ You can change the legend type by using the [type](https://ej2.syncfusion.com/re ## Placement -You can place the legend at left, right, top, or bottom to the heat map layout by using the [position](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#position) property. The legend is positioned at the right to the heat map by default. +You can place the legend at left, right, top, or bottom to the heat map layout by using the [position](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#position) property. The legend is positioned at the right to the heat map by default. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -60,7 +60,7 @@ You can place the legend at left, right, top, or bottom to the heat map layout b ## Alignment -You can align the legend as center, far, or near to the heat map using the [alignment](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#alignment) property. +You can align the legend as center, far, or near to the heat map using the [alignment](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#alignment) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -75,7 +75,7 @@ You can align the legend as center, far, or near to the heat map using the [alig ## Legend dimensions -You can change the legend dimensions with values in pixels or percentage by using the[width](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#width) and [height](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#height) properties. +You can change the legend dimensions with values in pixels or percentage by using the[width](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#width) and [height](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#height) properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -105,9 +105,9 @@ Paging is available only for the list type legend in the heat map, and it can be ## Smart Legend -Smart legend is another way of showing list type legend with responsiveness and readability, when the palette has more number of items. You can enable this smart legend by using the [enableSmartLegend](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#enablesmartlegend) property when the palette type is set to **Fixed**. +Smart legend is another way of showing list type legend with responsiveness and readability, when the palette has more number of items. You can enable this smart legend by using the [enableSmartLegend](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#enablesmartlegend) property when the palette type is set to **Fixed**. -In smart legend, you can change the display type of legend labels by using the [labelDisplayType](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#labeldisplaytype) property. +In smart legend, you can change the display type of legend labels by using the [labelDisplayType](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#labeldisplaytype) property. The following are the legend label display types: * All: Displays all labels in the legend. @@ -127,7 +127,7 @@ The following are the legend label display types: ## Legend Selection -In the HeatMap, the legend selection is used to toggle the visibility of cell for viewing the specific range value. You can enable the legend selection using the [toggleVisibility](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#togglevisibility) property. +In the HeatMap, the legend selection is used to toggle the visibility of cell for viewing the specific range value. You can enable the legend selection using the [toggleVisibility](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#togglevisibility) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -142,7 +142,7 @@ In the HeatMap, the legend selection is used to toggle the visibility of cell fo ## Legend Title -The legend title displays a specific information about the legend. You can enable the legend title by setting the [title](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#title) property by providing the text and customizing the legend title text style using the [textStyle](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/titleModel/#textStyle) property. +The legend title displays a specific information about the legend. You can enable the legend title by setting the [title](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#title) property by providing the text and customizing the legend title text style using the [textStyle](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/titleModel#textStyle) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/heatmap-chart/palette.md b/chart-sdk/react/heatmap-chart/palette.md index 27c2da1af..0b71d54d5 100644 --- a/chart-sdk/react/heatmap-chart/palette.md +++ b/chart-sdk/react/heatmap-chart/palette.md @@ -1,14 +1,14 @@ --- layout: post -title: Palette in React Heatmap chart component | Syncfusion -description: Learn here all about Palette in Syncfusion React Heatmap chart component of Syncfusion Essential JS 2 and more. +title: Palette in React HeatMap Chart | Syncfusion +description: Define gradient or fixed color palettes for React HeatMap Chart cells using paletteSettings, with color stops, value ranges, and colorValuePath mapping. control: Palette platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Palette in React Heatmap chart component +# Palette in React HeatMap Chart In heat map, each data point is displayed as a cell with applied color based on the data value. The palette in the heat map is used to define the color range for cells and gradient type for colors. You can define the colors either in RGB or hex codes using the [color](https://ej2.syncfusion.com/react/documentation/api/heatmap/paletteCollection#color) property in the `palette`. The defined colors are applied to the cell background based on the palette type and cell value. diff --git a/chart-sdk/react/heatmap-chart/rendering-mode.md b/chart-sdk/react/heatmap-chart/rendering-mode.md index f9a17d4a1..f049d71b3 100644 --- a/chart-sdk/react/heatmap-chart/rendering-mode.md +++ b/chart-sdk/react/heatmap-chart/rendering-mode.md @@ -1,16 +1,16 @@ --- layout: post -title: Rendering mode in React Heatmap chart component | Syncfusion -description: Learn here all about Rendering mode in Syncfusion React Heatmap chart component of Syncfusion Essential JS 2 and more. +title: Rendering Mode in React HeatMap Chart | Syncfusion +description: Switch the React HeatMap Chart between SVG and Canvas rendering, or set renderingMode to Auto to pick based on data point count for performance. control: Rendering mode platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Rendering mode in React Heatmap chart component +# Rendering Mode in React HeatMap Chart -Heat map can be displayed using **Canvas** or **Scalable Vector Graphics (SVG)** rendering logic to improve the initial load performance and scalability. Heat map can also be automatically switched between **Canvas** and **SVG** modes based on dataset size. You can enable this mode by setting the [renderingMode](https://ej2.syncfusion.com/react/documentation/api/heatmap/#renderingmode) property to **Auto**. +Heat map can be displayed using **Canvas** or **Scalable Vector Graphics (SVG)** rendering logic to improve the initial load performance and scalability. Heat map can also be automatically switched between **Canvas** and **SVG** modes based on dataset size. You can enable this mode by setting the [renderingMode](https://ej2.syncfusion.com/react/documentation/api/heatmap#renderingmode) property to **Auto**. > If the **Auto** mode is enabled in the heat map and there are more than 10,000 data points, then the heat map will be rendered in a **Canvas** mode; Otherwise, the heat map will be rendered in a **SVG** mode. diff --git a/chart-sdk/react/heatmap-chart/selection.md b/chart-sdk/react/heatmap-chart/selection.md index b871c8250..1c39ce1a5 100644 --- a/chart-sdk/react/heatmap-chart/selection.md +++ b/chart-sdk/react/heatmap-chart/selection.md @@ -1,14 +1,14 @@ --- layout: post -title: Selection in React HeatMap chart component | Syncfusion -description: Learn here all about Selection in Syncfusion React HeatMap chart component of Syncfusion Essential JS 2 and more. +title: Selection in React HeatMap Chart | Syncfusion +description: Select one or more cells in the React HeatMap Chart with mouse, touch, or Ctrl+click, and toggle single or multi selection using enableMultiSelect. control: Selection platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selection in React HeatMap chart component +# Selection in React HeatMap Chart In the HeatMap, the cell selection is used to select single or multiple HeatMap cells at runtime and get the selected cell details using the [cellSelected](https://ej2.syncfusion.com/react/documentation/api/heatmap#cellselected) event. You can enable the cell selection using the [allowSelection](https://ej2.syncfusion.com/react/documentation/api/heatmap#allowselection) property. diff --git a/chart-sdk/react/heatmap-chart/title.md b/chart-sdk/react/heatmap-chart/title.md index a59dbe561..b3bdaba35 100644 --- a/chart-sdk/react/heatmap-chart/title.md +++ b/chart-sdk/react/heatmap-chart/title.md @@ -1,14 +1,14 @@ --- layout: post -title: Title in React Heatmap chart component | Syncfusion -description: Learn here all about Title in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. +title: Title in React HeatMap Chart | Syncfusion +description: Add a title to the React HeatMap Chart via titleSettings to give quick context about the plotted data and style text with textStyle. control: Title platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title in React Heatmap chart component +# Title in React HeatMap Chart ## Add Heatmap title diff --git a/chart-sdk/react/heatmap-chart/tooltip.md b/chart-sdk/react/heatmap-chart/tooltip.md index 60da1a301..847548569 100644 --- a/chart-sdk/react/heatmap-chart/tooltip.md +++ b/chart-sdk/react/heatmap-chart/tooltip.md @@ -1,14 +1,14 @@ --- layout: post -title: Tooltip in React Heatmap chart component | Syncfusion -description: Learn here all about Tooltip in Syncfusion React Heatmap chart component of Syncfusion Essential JS 2 and more. +title: Tooltip in React HeatMap Chart | Syncfusion +description: Show tooltips on the React HeatMap Chart by enabling showTooltip, customize content with tooltipRender, and style via fill, border, and textStyle. control: Tooltip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in React Heatmap chart component +# Tooltip in React HeatMap Chart Tooltip is used to provide the details of the heatmap cell, and this can be displayed, while hovering the cursor over the cell or performing tap action in touch devices. diff --git a/chart-sdk/react/heatmap-chart/working-with-data.md b/chart-sdk/react/heatmap-chart/working-with-data.md index 7d6f49d72..f908b3708 100644 --- a/chart-sdk/react/heatmap-chart/working-with-data.md +++ b/chart-sdk/react/heatmap-chart/working-with-data.md @@ -1,14 +1,14 @@ --- layout: post -title: Working with data in React HeatMap chart component | Syncfusion -description: Learn here all about Working with data in Syncfusion React HeatMap chart component of Syncfusion Essential JS 2 and more. +title: Working With Data in React HeatMap Chart | Syncfusion +description: Bind data to the React HeatMap Chart from JSON objects or two-dimensional arrays using Table or Cell adaptor types, and handle empty points. control: Working with data platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Working with data in React HeatMap chart component +# Working With Data in React HeatMap Chart Heat map visualizes the JSON data and two-dimensional array data. Using the data adaptor support, data can be bound to the heat map. diff --git a/chart-sdk/react/linear-gauge/accessibility.md b/chart-sdk/react/linear-gauge/accessibility.md index b6d1b14e0..e71fb676a 100644 --- a/chart-sdk/react/linear-gauge/accessibility.md +++ b/chart-sdk/react/linear-gauge/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React Linear Gauge component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Linear Gauge component of Syncfusion Essential JS 2 and more. +title: Accessibility in React Linear Gauge | Syncfusion +description: Build accessible React Linear Gauge apps using WAI-ARIA attributes, screen reader support, and WCAG 2.2 compliance with axe-core validation. control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React Linear Gauge component +# Accessibility in React Linear Gauge The Linear Gauge component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/react/linear-gauge/animation.md b/chart-sdk/react/linear-gauge/animation.md index 46f9bfdfb..adf537b5f 100644 --- a/chart-sdk/react/linear-gauge/animation.md +++ b/chart-sdk/react/linear-gauge/animation.md @@ -1,14 +1,14 @@ --- layout: post -title: Animation in React Linear Gauge component | Syncfusion -description: Learn here all about animation in the Syncfusion React Linear Gauge component of Syncfusion Essential JS 2 and more. -control: Linear Gauge +title: Animation in React Linear Gauge | Syncfusion +description: Animate the React Linear Gauge elements sequentially, including axis, ticks, labels, ranges, pointers, and annotations, using animationDuration. +control: Linear Gauge platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Animation in React Linear Gauge component +# Animation in React Linear Gauge All of the elements in the Linear Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#animationduration) property. The animation for the Linear Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. diff --git a/chart-sdk/react/linear-gauge/annotations.md b/chart-sdk/react/linear-gauge/annotations.md index f7f9a1c94..1cfac3006 100644 --- a/chart-sdk/react/linear-gauge/annotations.md +++ b/chart-sdk/react/linear-gauge/annotations.md @@ -1,14 +1,14 @@ --- layout: post -title: Annotations in React Linear gauge component | Syncfusion -description: Learn here all about Annotations in Syncfusion React Linear gauge component of Syncfusion Essential JS 2 and more. +title: Annotations in React Linear Gauge | Syncfusion +description: Add text, image, or custom HTML annotations to mark areas of interest on the React Linear Gauge with precise pixel or axis-based positioning. control: Annotations platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Annotations in React Linear gauge component +# Annotations in React Linear Gauge @@ -16,7 +16,7 @@ Annotations are used to mark the specific area of interest in the Linear Gauge w ## Adding annotation -To render the custom HTML elements in the Linear Gauge component, use the [`content`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#content) property in the [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation). The annotation can be rendered either by specifying the id of the element or specifying the code to create a new element that needs to be displayed in the gauge area. +To render the custom HTML elements in the Linear Gauge component, use the [`content`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#content) property in the [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gaugeannotation). The annotation can be rendered either by specifying the id of the element or specifying the code to create a new element that needs to be displayed in the gauge area. @@ -54,16 +54,16 @@ root.render(); The following properties are used to customize the annotation. -* [`zIndex`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#zindex) - Bring the annotation to the front or back, when annotation overlaps with another element. -* [`axisValue`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#axisvalue) - To place the annotation in the specified axis value with respect to the provided axis index. -* [`axisIndex`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#axisindex) - To place the annotation in the specified axis with respect to the provided axis value. -* [`horizontalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#horizontalalignment) - To place the annotation horizontally. -* [`verticalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#verticalalignment) - To place the annotation vertically. -* [`x`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#x-number), [`y`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#y-number) - To place the annotation in the specified location. +* [`zIndex`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#zindex) - Bring the annotation to the front or back, when annotation overlaps with another element. +* [`axisValue`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#axisvalue) - To place the annotation in the specified axis value with respect to the provided axis index. +* [`axisIndex`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#axisindex) - To place the annotation in the specified axis with respect to the provided axis value. +* [`horizontalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#horizontalalignment) - To place the annotation horizontally. +* [`verticalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#verticalalignment) - To place the annotation vertically. +* [`x`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#x-number), [`y`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#y-number) - To place the annotation in the specified location. ### Changing the z-index -To change the stack order of an annotation element, the [`zIndex`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#zindex) property of the [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/) can be used. +To change the stack order of an annotation element, the [`zIndex`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#zindex) property of the [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation) can be used. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -78,7 +78,7 @@ To change the stack order of an annotation element, the [`zIndex`](https://ej2. ### Positioning an annotation -The annotation can be placed anywhere in the Linear Gauge by setting the pixel value to the [`x`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#x) and [`y`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#y) properties in the [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/). +The annotation can be placed anywhere in the Linear Gauge by setting the pixel value to the [`x`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#x) and [`y`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#y) properties in the [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -95,7 +95,7 @@ The annotation can be placed anywhere in the Linear Gauge by setting the pixel v ### Alignment of annotation -The annotation can be aligned horizontally and vertically by using the [`horizontalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#horizontalalignment) and [`verticalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#verticalalignment) properties respectively. The possible values can be **Center**, **Far**, **Near**, and **None**. The [`horizontalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#horizontalalignment) and [`verticalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#verticalalignment) properties are not applicable when the [`x`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#x) and [`y`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/#y) properties are set in the [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/). +The annotation can be aligned horizontally and vertically by using the [`horizontalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#horizontalalignment) and [`verticalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#verticalalignment) properties respectively. The possible values can be **Center**, **Far**, **Near**, and **None**. The [`horizontalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#horizontalalignment) and [`verticalAlignment`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#verticalalignment) properties are not applicable when the [`x`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#x) and [`y`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation#y) properties are set in the [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -110,7 +110,7 @@ The annotation can be aligned horizontally and vertically by using the [`horizon ## Multiple annotations -Multiple annotations can be added to the Linear Gauge component by adding the multiple [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/) in the [`AnnotationsDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#annotations) and customization for the annotation can be done with the [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation/). +Multiple annotations can be added to the Linear Gauge component by adding the multiple [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation) in the [`AnnotationsDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#annotations) and customization for the annotation can be done with the [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/annotation). {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/linear-gauge/appearance.md b/chart-sdk/react/linear-gauge/appearance.md index e22a0908d..6f869ab70 100644 --- a/chart-sdk/react/linear-gauge/appearance.md +++ b/chart-sdk/react/linear-gauge/appearance.md @@ -1,24 +1,24 @@ --- layout: post -title: Appearance in React Linear gauge component | Syncfusion -description: Learn here all about Appearance in Syncfusion React Linear gauge component of Syncfusion Essential JS 2 and more. +title: Appearance in React Linear Gauge | Syncfusion +description: Style the React Linear Gauge area, title, and container with Normal, Rounded Rectangle, or Thermometer shapes, plus background, border, and margin options. control: Appearance platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in React Linear gauge component +# Appearance in React Linear Gauge ## Customizing the Linear Gauge area -The following properties are available in the [`LinearGaugeComponent`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/) to customize the Linear Gauge area. +The following properties are available in the [`LinearGaugeComponent`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge) to customize the Linear Gauge area. -* [`background`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#background) - Applies the background color for the Linear Gauge. -* [`border`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#border) - To customize the color and width of the border in Linear Gauge. -* [`margin`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#margin) - To customize the margins of the Linear Gauge. +* [`background`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#background) - Applies the background color for the Linear Gauge. +* [`border`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#border) - To customize the color and width of the border in Linear Gauge. +* [`margin`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#margin) - To customize the margins of the Linear Gauge. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -33,14 +33,14 @@ The following properties are available in the [`LinearGaugeComponent`](https://e ## Setting up the Linear Gauge title -The title for the Linear Gauge can be set using [`title`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#title) property in [`LinearGaugeComponent`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/). Its appearance can be customized using the [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#titlestyle) with the below properties. +The title for the Linear Gauge can be set using [`title`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#title) property in [`LinearGaugeComponent`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge). Its appearance can be customized using the [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#titlestyle) with the below properties. -* [`color`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel/#color) - Specifies the text color of the title. -* [`fontStyle`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel/#fontStyle) - Specifies the font style of the title. -* [`fontWeight`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel/#fontweight) - Specifies the font weight of the title. -* [`size`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel/#size) - Specifies the font size of the title. -* [`opacity`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel/#opacity) - Specifies the opacity of the title. -* [`fontFamily`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel/#fontfamily) - Specifies the font family of the title. +* [`color`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel#color) - Specifies the text color of the title. +* [`fontStyle`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel#fontStyle) - Specifies the font style of the title. +* [`fontWeight`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel#fontweight) - Specifies the font weight of the title. +* [`size`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel#size) - Specifies the font size of the title. +* [`opacity`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel#opacity) - Specifies the opacity of the title. +* [`fontFamily`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/fontModel#fontfamily) - Specifies the font family of the title. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -61,13 +61,13 @@ The area used to render the ranges and pointers at the center position of the ga * Rounded Rectangle * Thermometer - The type of the container can be modified by using the [`type`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel/#type) property in [`container`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel/). The container can be customized by using the following properties in [`container`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel/). + The type of the container can be modified by using the [`type`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel#type) property in [`container`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel). The container can be customized by using the following properties in [`container`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel). -* [`offset`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel/#offset) - To place the container with the specified distance from the axis of the Linear Gauge. -* [`width`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel/#width) - To set the thickness of the container. -* [`height`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel/#height) - To set the length of the container. -* [`backgroundColor`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel/#backgroundcolor) - To set the background color of the container. -* [`border`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/container/#border) - To set the color and width for the border of the container. +* [`offset`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel#offset) - To place the container with the specified distance from the axis of the Linear Gauge. +* [`width`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel#width) - To set the thickness of the container. +* [`height`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel#height) - To set the length of the container. +* [`backgroundColor`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel#backgroundcolor) - To set the background color of the container. +* [`border`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/container#border) - To set the color and width for the border of the container. ### Normal @@ -86,7 +86,7 @@ The **Normal** type will render the container as a rectangle and this is the def ### Rounded Rectangle -The **RoundedRectangle** type will render the container as a rectangle with rounded corner radius. The rounded corner radius of the container can be customized using the [`roundedCornerRadius`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/container/#roundedcornerradius) property in [`container`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel/). +The **RoundedRectangle** type will render the container as a rectangle with rounded corner radius. The rounded corner radius of the container can be customized using the [`roundedCornerRadius`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/container#roundedcornerradius) property in [`container`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/containerModel). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -116,7 +116,7 @@ The **Thermometer** type will render the container similar to the appearance of ## Fitting the Linear Gauge to the control -The Linear Gauge component is rendered with margin by default. To remove the margin around the Linear Gauge, the [`allowMargin`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#allowmargin) property in [`LinearGaugeComponent`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/) is set as **false**. +The Linear Gauge component is rendered with margin by default. To remove the margin around the Linear Gauge, the [`allowMargin`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#allowmargin) property in [`LinearGaugeComponent`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge) is set as **false**. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/linear-gauge/axis.md b/chart-sdk/react/linear-gauge/axis.md index fceba1eba..3468230d4 100644 --- a/chart-sdk/react/linear-gauge/axis.md +++ b/chart-sdk/react/linear-gauge/axis.md @@ -1,14 +1,14 @@ --- layout: post -title: Axis in React Linear gauge component | Syncfusion -description: Learn here all about Axis in Syncfusion React Linear gauge component of Syncfusion Essential JS 2 and more. +title: Axis in React Linear Gauge | Syncfusion +description: Customize the React Linear Gauge axis with formatted labels, major and minor ticks, range start and end values, and label positioning. control: Axis platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis in React Linear gauge component +# Axis in React Linear Gauge diff --git a/chart-sdk/react/linear-gauge/dimensions.md b/chart-sdk/react/linear-gauge/dimensions.md index 5517d30aa..0d038c5c2 100644 --- a/chart-sdk/react/linear-gauge/dimensions.md +++ b/chart-sdk/react/linear-gauge/dimensions.md @@ -1,20 +1,20 @@ --- layout: post -title: Dimensions in React Linear gauge component | Syncfusion -description: Learn here all about Dimensions in Syncfusion React Linear gauge component of Syncfusion Essential JS 2 and more. +title: Dimensions in React Linear Gauge | Syncfusion +description: Set the React Linear Gauge width and height in pixels or as a percentage of its parent container to create a responsive, fluid layout. control: Dimensions platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dimensions in React Linear gauge component +# Dimensions in React Linear Gauge ## Size for Linear Gauge -The height and width of the Linear Gauge can be set using the [`width`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#height) properties in [`LinearGaugeComponent`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/). +The height and width of the Linear Gauge can be set using the [`width`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#height) properties in [`LinearGaugeComponent`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge). diff --git a/chart-sdk/react/linear-gauge/ej1-api-migration.md b/chart-sdk/react/linear-gauge/ej1-api-migration.md index c400264eb..0a81a5394 100644 --- a/chart-sdk/react/linear-gauge/ej1-api-migration.md +++ b/chart-sdk/react/linear-gauge/ej1-api-migration.md @@ -1,14 +1,14 @@ --- layout: post -title: Ej1 api migration in React Linear gauge component | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion React Linear gauge component of Syncfusion Essential JS 2 and more. +title: Migration from Essential JS 1 in React Linear Gauge | Syncfusion +description: Migrate your React Linear Gauge code from the legacy v1 API to v2 with a side-by-side mapping of dimensions, axis, ranges, pointers, and more. control: Ej1 api migration platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in React Linear gauge component +# Migration from Essential JS 1 in React Linear Gauge This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/react/linear-gauge/events.md b/chart-sdk/react/linear-gauge/events.md index d017d3132..87730ec93 100644 --- a/chart-sdk/react/linear-gauge/events.md +++ b/chart-sdk/react/linear-gauge/events.md @@ -1,20 +1,20 @@ --- layout: post -title: Events in React Linear gauge component | Syncfusion -description: Learn here all about Events in Syncfusion React Linear gauge component of Syncfusion Essential JS 2 and more. +title: Events in React Linear Gauge | Syncfusion +description: Handle React Linear Gauge events for pointer animation, annotation rendering, axis labels, drag actions, mouse interactions, and component load lifecycle. control: Events platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Events in React Linear gauge component +# Events in React Linear Gauge This section describes the Linear Gauge component's event that gets triggered when corresponding operations are performed. ## animationComplete -When the pointer animation is completed, the [`animationComplete`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#animationcomplete) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iAnimationCompleteEventArgs/). +When the pointer animation is completed, the [`animationComplete`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#animationcomplete) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iAnimationCompleteEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -29,7 +29,7 @@ When the pointer animation is completed, the [`animationComplete`](https://ej2.s ## annotationRender -Before the annotation is rendered in the Linear Gauge, the [`annotationRender`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#annotationrender) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iAnnotationRenderEventArgs/). +Before the annotation is rendered in the Linear Gauge, the [`annotationRender`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#annotationrender) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iAnnotationRenderEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -44,7 +44,7 @@ Before the annotation is rendered in the Linear Gauge, the [`annotationRender`]( ## axisLabelRender -Before each axis label is rendered in the Linear Gauge, the [`axisLabelRender`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#axislabelrender) event is fired. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iAxisLabelRenderEventArgs/). +Before each axis label is rendered in the Linear Gauge, the [`axisLabelRender`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#axislabelrender) event is fired. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iAxisLabelRenderEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -59,7 +59,7 @@ Before each axis label is rendered in the Linear Gauge, the [`axisLabelRender`]( ## beforePrint -The [`beforePrint`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#beforeprint) event is fired before the print begins. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iPrintEventArgs/). +The [`beforePrint`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#beforeprint) event is fired before the print begins. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iPrintEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -74,7 +74,7 @@ The [`beforePrint`](https://ej2.syncfusion.com/react/documentation/api/linear-ga ## dragEnd -The [`dragEnd`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#dragend) event will be fired before the pointer drag is completed. To know more about the argument of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iPointerDragEventArgs/). +The [`dragEnd`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#dragend) event will be fired before the pointer drag is completed. To know more about the argument of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iPointerDragEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -89,7 +89,7 @@ The [`dragEnd`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/ ## dragMove -The [`dragMove`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#dragmove) event will be fired when the pointer is dragged. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iPointerDragEventArgs/). +The [`dragMove`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#dragmove) event will be fired when the pointer is dragged. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iPointerDragEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -104,7 +104,7 @@ The [`dragMove`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge ## dragStart -When the pointer drag begins, the [`dragStart`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#dragstart) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iPointerDragEventArgs/). +When the pointer drag begins, the [`dragStart`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#dragstart) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iPointerDragEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -119,7 +119,7 @@ When the pointer drag begins, the [`dragStart`](https://ej2.syncfusion.com/react ## gaugeMouseDown -When mouse is pressed down on the gauge, the [`gaugeMouseDown`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#gaugemousedown) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iMouseEventArgs/). +When mouse is pressed down on the gauge, the [`gaugeMouseDown`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#gaugemousedown) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iMouseEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -134,7 +134,7 @@ When mouse is pressed down on the gauge, the [`gaugeMouseDown`](https://ej2.sync ## gaugeMouseLeave -When mouse pointer moves over the gauge, the [`gaugemouseleave`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#gaugemouseleave) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iMouseEventArgs/). +When mouse pointer moves over the gauge, the [`gaugemouseleave`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#gaugemouseleave) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iMouseEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -149,7 +149,7 @@ When mouse pointer moves over the gauge, the [`gaugemouseleave`](https://ej2.syn ## gaugeMouseMove -When mouse pointer leaves the gauge, the [`gaugeMouseMove`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#gaugemousemove) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iMouseEventArgs/). +When mouse pointer leaves the gauge, the [`gaugeMouseMove`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#gaugemousemove) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iMouseEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -164,7 +164,7 @@ When mouse pointer leaves the gauge, the [`gaugeMouseMove`](https://ej2.syncfusi ## gaugeMouseUp -When the mouse pointer is released over the Linear Gauge, the [`gaugeMouseUp`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#gaugemouseup) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iMouseEventArgs/). +When the mouse pointer is released over the Linear Gauge, the [`gaugeMouseUp`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#gaugemouseup) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iMouseEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -179,7 +179,7 @@ When the mouse pointer is released over the Linear Gauge, the [`gaugeMouseUp`](h ## load -Before the Linear Gauge is loaded, the [`load`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#load) event is fired. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iLoadEventArgs/). +Before the Linear Gauge is loaded, the [`load`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#load) event is fired. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iLoadEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -194,7 +194,7 @@ Before the Linear Gauge is loaded, the [`load`](https://ej2.syncfusion.com/react ## loaded -After the Linear Gauge has been loaded, the [`loaded`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#loaded) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iLoadedEventArgs/). +After the Linear Gauge has been loaded, the [`loaded`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#loaded) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iLoadedEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -209,7 +209,7 @@ After the Linear Gauge has been loaded, the [`loaded`](https://ej2.syncfusion.co ## resized -After the window resizing, the [`resized`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#resized) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iResizeEventArgs/). +After the window resizing, the [`resized`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#resized) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iResizeEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -224,7 +224,7 @@ After the window resizing, the [`resized`](https://ej2.syncfusion.com/react/docu ## tooltipRender -The [`tooltipRender`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#tooltiprender) event is fired before the tooltip is rendered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iTooltipRenderEventArgs/). +The [`tooltipRender`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#tooltiprender) event is fired before the tooltip is rendered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iTooltipRenderEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -239,7 +239,7 @@ The [`tooltipRender`](https://ej2.syncfusion.com/react/documentation/api/linear- ## valueChange -The [`valueChange`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#valuechange) event is triggered when the pointer is dragged from one value to another. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iValueChangeEventArgs/). +The [`valueChange`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#valuechange) event is triggered when the pointer is dragged from one value to another. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/iValueChangeEventArgs). {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/linear-gauge/getting-started.md b/chart-sdk/react/linear-gauge/getting-started.md index b5ce4a168..ed156760b 100644 --- a/chart-sdk/react/linear-gauge/getting-started.md +++ b/chart-sdk/react/linear-gauge/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with React Linear Gauge component | Syncfusion -description: Check out and learn about Getting started with React Linear Gauge component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React Linear Gauge | Syncfusion +description: Learn how to get started with the Syncfusion React Linear Gauge control. Explore setup, features, examples, and customization options. control: Getting started platform: chart-sdk documentation: ug diff --git a/chart-sdk/react/linear-gauge/internationalization.md b/chart-sdk/react/linear-gauge/internationalization.md index fec992487..0c681c837 100644 --- a/chart-sdk/react/linear-gauge/internationalization.md +++ b/chart-sdk/react/linear-gauge/internationalization.md @@ -1,21 +1,21 @@ --- layout: post -title: Internationalization in React Linear gauge component | Syncfusion -description: Learn here all about Internationalization in Syncfusion React Linear gauge component of Syncfusion Essential JS 2 and more. +title: Internationalization in React Linear Gauge | Syncfusion +description: Format React Linear Gauge axis labels and tooltips for any culture using currency, percentage, or other numeric formats via the format property. control: Internationalization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in React Linear gauge component +# Internationalization in React Linear Gauge -Globalization is the process of designing and developing a component that works in different cultures. Internationalization is used to globalize the number content in Linear Gauge component using [`format`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/label/#format) property in [`LinearGaugeComponent`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/linearGaugeModel/). It has static text on some features such as +Globalization is the process of designing and developing a component that works in different cultures. Internationalization is used to globalize the number content in Linear Gauge component using [`format`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/label#format) property in [`LinearGaugeComponent`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/linearGaugeModel). It has static text on some features such as * Axis label * Tooltip -The static text on above features can be changed to any culture such as Arabic, Deutsch and French. To know more about the globalization in React components, refer [here](https://ej2.syncfusion.com/react/documentation/common/internationalization/). +The static text on above features can be changed to any culture such as Arabic, Deutsch and French. To know more about the globalization in React components, refer [here](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization). ## Numeric Format diff --git a/chart-sdk/react/linear-gauge/methods.md b/chart-sdk/react/linear-gauge/methods.md index 99a6efae3..3e2a2381e 100644 --- a/chart-sdk/react/linear-gauge/methods.md +++ b/chart-sdk/react/linear-gauge/methods.md @@ -1,19 +1,19 @@ --- layout: post -title: Methods in React Linear gauge component | Syncfusion -description: Learn here all about Methods in Syncfusion React Linear gauge component of Syncfusion Essential JS 2 and more. +title: Methods in React Linear Gauge | Syncfusion +description: Update the React Linear Gauge dynamically using setPointerValue, setAnnotationValue, and refresh methods to change state and re-render the component. control: Methods platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Methods in React Linear gauge component +# Methods in React Linear Gauge The following methods are available in the Linear Gauge component. ## setPointerValue -To change the pointer value dynamically, use the [`setPointerValue`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#setpointervalue) method in the Linear Gauge component. The following are the arguments for this method. +To change the pointer value dynamically, use the [`setPointerValue`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#setpointervalue) method in the Linear Gauge component. The following are the arguments for this method. | Argument name | Description | |----------------------| -----------------------------------------| @@ -34,7 +34,7 @@ To change the pointer value dynamically, use the [`setPointerValue`](https://ej2 ## setAnnotationValue -To change the annotation content dynamically, use the [`setAnnotationValue`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#setannotationvalue) method in the Linear Gauge component. The following are the arguments for this method. +To change the annotation content dynamically, use the [`setAnnotationValue`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#setannotationvalue) method in the Linear Gauge component. The following are the arguments for this method. | Argument name | Description | |----------------------| -----------------------------------------| diff --git a/chart-sdk/react/linear-gauge/pointers.md b/chart-sdk/react/linear-gauge/pointers.md index 003aaf39a..cb8b0b5cf 100644 --- a/chart-sdk/react/linear-gauge/pointers.md +++ b/chart-sdk/react/linear-gauge/pointers.md @@ -1,14 +1,14 @@ --- layout: post -title: Pointers in React Linear Gauge Component | Syncfusion -description: Learn here all about pointers in Syncfusion Essential React Linear Gauge component, its elements and more. +title: Pointers in React Linear Gauge | Syncfusion +description: Add marker or bar pointers to the React Linear Gauge to track axis values, with multiple pointers, animation, and gradient support. control: Pointers platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pointers in React Linear Gauge Component +# Pointers in React Linear Gauge ## Setting the Pointer Value diff --git a/chart-sdk/react/linear-gauge/print-and-export.md b/chart-sdk/react/linear-gauge/print-and-export.md index 3fd12b4f0..7d07f01c3 100644 --- a/chart-sdk/react/linear-gauge/print-and-export.md +++ b/chart-sdk/react/linear-gauge/print-and-export.md @@ -1,18 +1,18 @@ --- layout: post -title: Print and export in React Linear gauge component | Syncfusion -description: Learn here all about Print and export in Syncfusion React Linear gauge component of Syncfusion Essential JS 2 and more. +title: Print and Export in React Linear Gauge | Syncfusion +description: Print the React Linear Gauge directly or export it as JPEG, PNG, SVG, or PDF images, including base64 string output for image and PDF formats. control: Print and export platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and export in React Linear gauge component +# Print and Export in React Linear Gauge ## Print -The rendered Linear Gauge can be printed directly from the browser by calling the [`print`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#print) method. To use the print functionality, set the [`allowPrint`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#allowprint) property as **true** and inject the **Print** module into **services**. +The rendered Linear Gauge can be printed directly from the browser by calling the [`print`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#print) method. To use the print functionality, set the [`allowPrint`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#allowprint) property as **true** and inject the **Print** module into **services**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -29,7 +29,7 @@ The rendered Linear Gauge can be printed directly from the browser by calling th ### Image Export -To use the image export functionality, set the [`allowImageExport`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#allowimageexport) property as **true** and inject the **ImageExport** module into **services**. The rendered Linear Gauge can be exported as an image using the [`export`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#export) method. This method requires two parameters: export type and file name. The Linear Gauge can be exported as an image with the following formats. +To use the image export functionality, set the [`allowImageExport`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#allowimageexport) property as **true** and inject the **ImageExport** module into **services**. The rendered Linear Gauge can be exported as an image using the [`export`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#export) method. This method requires two parameters: export type and file name. The Linear Gauge can be exported as an image with the following formats. * JPEG * PNG @@ -48,7 +48,7 @@ To use the image export functionality, set the [`allowImageExport`](https://ej2. ### PDF Export -To use the PDF export functionality, set the [`allowPdfExport`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#allowpdfexport) property as **true** and inject the **PdfExport** module into **services**. The rendered Linear Gauge can be exported as PDF using the [`export`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#export) method. The [`export`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#export) method requires three parameters: file type, file name, and orientation of the PDF document. The orientation of the PDF document can be set as **Portrait** or **Landscape**. +To use the PDF export functionality, set the [`allowPdfExport`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#allowpdfexport) property as **true** and inject the **PdfExport** module into **services**. The rendered Linear Gauge can be exported as PDF using the [`export`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#export) method. The [`export`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#export) method requires three parameters: file type, file name, and orientation of the PDF document. The orientation of the PDF document can be set as **Portrait** or **Landscape**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -63,7 +63,7 @@ To use the PDF export functionality, set the [`allowPdfExport`](https://ej2.sync ### Exporting Linear Gauge as base64 string of the file -The Linear Gauge can be exported as base64 string for the JPEG, PNG and PDF formats. The rendered Linear Gauge can be exported as base64 string of the exported image or PDF document used in the [`export`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/#export) method. The arguments that are required for this method is export type, file name, orientation of the exported PDF document and **allowDownload** boolean value that is set as **false** to return base64 string. The value for the orientation of the exported PDF document is set as **null** for image export and **Portrait** or **Landscape** for the PDF document. +The Linear Gauge can be exported as base64 string for the JPEG, PNG and PDF formats. The rendered Linear Gauge can be exported as base64 string of the exported image or PDF document used in the [`export`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge#export) method. The arguments that are required for this method is export type, file name, orientation of the exported PDF document and **allowDownload** boolean value that is set as **false** to return base64 string. The value for the orientation of the exported PDF document is set as **null** for image export and **Portrait** or **Landscape** for the PDF document. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/linear-gauge/ranges.md b/chart-sdk/react/linear-gauge/ranges.md index 518a372de..97ec53a39 100644 --- a/chart-sdk/react/linear-gauge/ranges.md +++ b/chart-sdk/react/linear-gauge/ranges.md @@ -1,14 +1,14 @@ --- layout: post -title: Ranges in React Linear gauge component | Syncfusion -description: Learn here all about Ranges in Syncfusion React Linear gauge component of Syncfusion Essential JS 2 and more. +title: Ranges in React Linear Gauge | Syncfusion +description: Define value ranges on the React Linear Gauge axis with custom width, color, position, and linear or radial gradient fills. control: Ranges platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ranges in React Linear gauge component +# Ranges in React Linear Gauge Range is the set of values in the axis. The range can be defined using the [`start`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/rangeModel#start) and [`end`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/rangeModel#end) properties in the [`RangeDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/rangeModel). Any number of ranges can be added to the Linear Gauge using the [`RangesDirective`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/axisModel#ranges). diff --git a/chart-sdk/react/linear-gauge/user-interaction.md b/chart-sdk/react/linear-gauge/user-interaction.md index 69a2def79..6fae77854 100644 --- a/chart-sdk/react/linear-gauge/user-interaction.md +++ b/chart-sdk/react/linear-gauge/user-interaction.md @@ -1,14 +1,14 @@ --- layout: post -title: User interaction in React Linear gauge component | Syncfusion -description: Learn here all about User interaction in Syncfusion React Linear gauge component of Syncfusion Essential JS 2 and more. +title: User Interaction in React Linear Gauge | Syncfusion +description: Enable interactive features in the React Linear Gauge, including hover tooltips with custom templates and draggable marker or bar pointers. control: User interaction platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# User interaction in React Linear gauge component +# User Interaction in React Linear Gauge @@ -16,7 +16,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -Linear Gauge displays the details about a pointer value through [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/), when the mouse hovers over the pointer. To enable the tooltip, set [`enable`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/#enable) property as **true** and inject **GaugeTooltip** into **services**. +Linear Gauge displays the details about a pointer value through [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings), when the mouse hovers over the pointer. To enable the tooltip, set [`enable`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings#enable) property as **true** and inject **GaugeTooltip** into **services**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -34,7 +34,7 @@ Linear Gauge displays the details about a pointer value through [`tooltip`](http ### Tooltip format -Tooltip in the Linear Gauge control can be formatted using the [`format`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/#format) property in [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/). It is used to render the tooltip in certain format or to add a user-defined unit in the tooltip. By default, the tooltip shows the pointer value only. In addition to that, more information can be added in the tooltip. For example, the format **{value}km** shows pointer value with kilometer unit in the tooltip. +Tooltip in the Linear Gauge control can be formatted using the [`format`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings#format) property in [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings). It is used to render the tooltip in certain format or to add a user-defined unit in the tooltip. By default, the tooltip shows the pointer value only. In addition to that, more information can be added in the tooltip. For example, the format **{value}km** shows pointer value with kilometer unit in the tooltip. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -49,7 +49,7 @@ Tooltip in the Linear Gauge control can be formatted using the [`format`](https: ### Tooltip Template -The HTML elements rendered in the tooltip of the Linear Gauge using the [`template`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/#template) property of the [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/). The **${value}** can be used as placeholders in the HTML element to display the pointer values of the corresponding axis. +The HTML elements rendered in the tooltip of the Linear Gauge using the [`template`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings#template) property of the [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings). The **${value}** can be used as placeholders in the HTML element to display the pointer values of the corresponding axis. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -64,13 +64,13 @@ The HTML elements rendered in the tooltip of the Linear Gauge using the [`templa ### Customize the appearance of the tooltip -The tooltip can be customized using the following properties in [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/). +The tooltip can be customized using the following properties in [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings). -* [`fill`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/#fill) - To fill the color for tooltip. -* [`enableAnimation`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/#enableanimation) - To enable or disable the tooltip animation. -* [`border`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/#border) - To set the border color and width of the tooltip. -* [`textStyle`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/#textstyle) - To customize the style of the text in tooltip. -* [`showAtMousePosition`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/#showatmouseposition) - To show the tooltip at the mouse position. +* [`fill`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings#fill) - To fill the color for tooltip. +* [`enableAnimation`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings#enableanimation) - To enable or disable the tooltip animation. +* [`border`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings#border) - To set the border color and width of the tooltip. +* [`textStyle`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings#textstyle) - To customize the style of the text in tooltip. +* [`showAtMousePosition`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings#showatmouseposition) - To show the tooltip at the mouse position. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -85,7 +85,7 @@ The tooltip can be customized using the following properties in [`tooltip`](http ### Positioning the tooltip -The tooltip is positioned at the **End** of the pointer. To change the position of the tooltip at the start, or center of the pointer, set the [`position`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings/#position) property to **Start** or **Center**. +The tooltip is positioned at the **End** of the pointer. To change the position of the tooltip at the start, or center of the pointer, set the [`position`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/tooltipSettings#position) property to **Start** or **Center**. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/maps/accessibility.md b/chart-sdk/react/maps/accessibility.md index a386d9836..9c974c227 100644 --- a/chart-sdk/react/maps/accessibility.md +++ b/chart-sdk/react/maps/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React Maps component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Accessibility +ttitle: Accessibility in React Maps | Syncfusion +description: Learn about React Maps accessibility compliance with WCAG 2.2, Section 508, and ADA, including screen reader and keyboard navigation support. +control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React Maps component +# Accessibility in React Maps Accessibility enables users with disabilities to interact with the Maps component through assistive technologies such as screen readers and keyboard navigation. The Maps component is designed to comply with [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles). diff --git a/chart-sdk/react/maps/annotations.md b/chart-sdk/react/maps/annotations.md index dc6562c29..0c2262972 100644 --- a/chart-sdk/react/maps/annotations.md +++ b/chart-sdk/react/maps/annotations.md @@ -1,14 +1,14 @@ --- layout: post -title: Annotations in React Maps component | Syncfusion -description: Learn here all about Annotations in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: Annotations in React Maps | Syncfusion +description: Learn how to overlay custom text, images, or HTML elements as annotations on React Maps to mark areas of interest beyond markers and data labels. control: Annotations platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Annotations in React Maps component +# Annotations in React Maps diff --git a/chart-sdk/react/maps/bubble.md b/chart-sdk/react/maps/bubble.md index 35d64ac60..e1199b63d 100644 --- a/chart-sdk/react/maps/bubble.md +++ b/chart-sdk/react/maps/bubble.md @@ -1,14 +1,14 @@ --- layout: post -title: Bubble in React Maps component | Syncfusion -description: Learn here all about Bubble in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: Bubble in React Maps | Syncfusion +description: Learn how to render and size data bubbles in React Maps to visualize numerical values across geographic regions with circular or square shapes. control: Bubble platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bubble in React Maps component +# Bubble in React Maps This section shows how to customize the appearance of the bubbles in the Maps component. The below video demonstrates the same. diff --git a/chart-sdk/react/maps/color-mapping.md b/chart-sdk/react/maps/color-mapping.md index d7162b371..c7ab01748 100644 --- a/chart-sdk/react/maps/color-mapping.md +++ b/chart-sdk/react/maps/color-mapping.md @@ -1,14 +1,14 @@ --- layout: post -title: Color mapping in React Maps component | Syncfusion -description: Learn here all about Color mapping in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: Color Mapping in React Maps | Syncfusion +description: Learn how to apply range, equal, and desaturation color mapping in React Maps to visualize shape data based on numeric values and field-driven palettes. control: Color mapping platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Color mapping in React Maps component +# Color Mapping in React Maps Color mapping customizes shape colors based on data values. It supports three primary types: range, equal, and desaturation. To apply color mapping, bind data to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel#datasource) property of [`layerSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel) and set the [`colorValuePath`](https://ej2.syncfusion.com/react/documentation/api/maps/shapeSettingsModel#colorvaluepath) property in [`shapeSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/shapeSettingsModel) to specify which field controls the color value. diff --git a/chart-sdk/react/maps/customization.md b/chart-sdk/react/maps/customization.md index 9f7a3a863..d5adb2b90 100644 --- a/chart-sdk/react/maps/customization.md +++ b/chart-sdk/react/maps/customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Customization in React Maps component | Syncfusion -description: Learn here all about Customization in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Customization +title: Customization in React Maps | Syncfusion +description: Learn how to customize React Maps appearance, including size, title, theme, container styling, shape properties, and projection type for any layout. +control: Customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Customization in React Maps component +# Customization in React Maps The Maps component provides various options to customize its appearance, including size, title, theme, container styling, shape properties, and projection type. This section explains how to configure these customization options. diff --git a/chart-sdk/react/maps/data-label.md b/chart-sdk/react/maps/data-label.md index 318b42d11..50807351e 100644 --- a/chart-sdk/react/maps/data-label.md +++ b/chart-sdk/react/maps/data-label.md @@ -1,14 +1,14 @@ --- layout: post -title: Data label in React Maps component | Syncfusion -description: Learn here all about Data label in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: Data Labels in React Maps | Syncfusion +description: Learn how to display React Maps data labels for shape data or a bound data source, including labelPath configuration and visibility settings. control: Data label platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data label in React Maps component +# Data Labels in React Maps Data labels display information about map shapes. Enable data labels by setting the [visible](https://ej2.syncfusion.com/react/documentation/api/maps/dataLabelSettingsModel#visible) property of the [dataLabelSettings](https://ej2.syncfusion.com/react/documentation/api/maps/dataLabelSettingsModel) to **true**. diff --git a/chart-sdk/react/maps/ej1-api-migration.md b/chart-sdk/react/maps/ej1-api-migration.md index 693355746..427a527f3 100644 --- a/chart-sdk/react/maps/ej1-api-migration.md +++ b/chart-sdk/react/maps/ej1-api-migration.md @@ -1,8 +1,8 @@ --- layout: post -title: Ej1 api migration in React Maps component | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Ej1 api migration +title: Ej1 Api Migration in React Maps | Syncfusion +description: Learn how to migrate the Maps API from Essential JS 1 to Essential JS 2 in React, including updated properties, modules, and event patterns. +control: Ej1 api migration platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk {% raw %} -# Ej1 api migration in React Maps component +# Ej1 Api Migration in React Maps This article describes the API migration process of Maps component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/react/maps/getting-started.md b/chart-sdk/react/maps/getting-started.md index e5334b58e..e9cf37db4 100644 --- a/chart-sdk/react/maps/getting-started.md +++ b/chart-sdk/react/maps/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with React Maps component | Syncfusion -description: Check out and learn about Getting started with React Maps component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React Maps | Syncfusion +description: Learn how to get started with the Syncfusion React Maps control. Explore setup, features, examples, and customization options. control: Getting started platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with React Maps component +# Getting Started with React Maps This section explains the steps required to create a basic Maps component. diff --git a/chart-sdk/react/maps/how-to/creating-routes-between-the-markers.md b/chart-sdk/react/maps/how-to/creating-routes-between-the-markers.md index 6ce193a67..e111e2b58 100644 --- a/chart-sdk/react/maps/how-to/creating-routes-between-the-markers.md +++ b/chart-sdk/react/maps/how-to/creating-routes-between-the-markers.md @@ -1,14 +1,14 @@ --- layout: post -title: How to create routes between markers in Maps component | Syncfusion -description: Learn here all about creating routes between markers in the Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Maps +title: How to create routes between markers in React Maps | Syncfusion +description: Learn how to plot routes between source and destination markers in React Maps using navigation lines and coordinates from the Google Maps Directions API. +control: Maps platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Creating Routes Between Markers in the React Maps component +# How to create routes between markers in React Maps The Syncfusion® Maps component supports plotting routes between two locations (source and destination) using the navigation line feature. Markers can be placed at these locations to visually indicate the source and destination, making it easier to view the path between them on the map. diff --git a/chart-sdk/react/maps/how-to/custom-path.md b/chart-sdk/react/maps/how-to/custom-path.md index 898428f92..9fc17ca6e 100644 --- a/chart-sdk/react/maps/how-to/custom-path.md +++ b/chart-sdk/react/maps/how-to/custom-path.md @@ -1,14 +1,14 @@ --- layout: post -title: Custom path in React Maps component | Syncfusion -description: Learn here all about Custom path in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Custom path +title: How to add a custom path in React Maps | Syncfusion +description: Learn how to build custom-path layouts in React Maps using normal geometry shapes, demonstrated with a bus seat selection example. +control: Custom path platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Custom path in React Maps component +# How to add a custom path in React Maps Maps component can be customized as the desired layout using the custom path map feature. Here, the Maps component has been showcased with normal geometry type shapes to represent the bus seat selection layout. diff --git a/chart-sdk/react/maps/how-to/drilldown.md b/chart-sdk/react/maps/how-to/drilldown.md index 66996083f..d005de7da 100644 --- a/chart-sdk/react/maps/how-to/drilldown.md +++ b/chart-sdk/react/maps/how-to/drilldown.md @@ -1,16 +1,16 @@ --- layout: post -title: Drilldown in React Maps component | Syncfusion -description: Learn here all about Drilldown in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Drilldown +title: How to drilldown in React Maps | Syncfusion +description: Learn how to enable drilldown in React Maps by clicking a continent shape to reveal all countries within it via the shapeSelected event. +control: Drilldown platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Drilldown in React Maps component +# How to drilldown in React Maps -By clicking a continent, all the countries available in that continent can be viewed using the drill-down feature. For example, the countries in the `Africa` continent have been showcased here. To showcase all the countries in `Africa` continent by clicking the [`shapeSelected`](https://ej2.syncfusion.com/react/documentation/api/maps/#shapeselected) event as mentioned in the following example. +By clicking a continent, all the countries available in that continent can be viewed using the drill-down feature. For example, the countries in the `Africa` continent have been showcased here. To showcase all the countries in `Africa` continent by clicking the [`shapeSelected`](https://ej2.syncfusion.com/react/documentation/api/maps#shapeselected) event as mentioned in the following example. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/maps/internationalization.md b/chart-sdk/react/maps/internationalization.md index 3f2505492..ccab68d53 100644 --- a/chart-sdk/react/maps/internationalization.md +++ b/chart-sdk/react/maps/internationalization.md @@ -1,14 +1,14 @@ --- layout: post -title: Internationalization in React Maps component | Syncfusion -description: Learn here all about Internationalization in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Internationalization +title: Internationalization in React Maps | Syncfusion +description: Learn how to globalize React Maps data labels and tooltips using number and date formatters for different cultures and locales worldwide. +control: Internationalization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in React Maps component +# Internationalization in React Maps Internationalization enables the Maps component to display content in different cultures and locales, making it accessible to users worldwide. The Maps component supports internationalization for the following elements: diff --git a/chart-sdk/react/maps/layers.md b/chart-sdk/react/maps/layers.md index 8cad6401d..594ab2d5b 100644 --- a/chart-sdk/react/maps/layers.md +++ b/chart-sdk/react/maps/layers.md @@ -1,14 +1,14 @@ --- layout: post -title: Layers in React Maps component | Syncfusion -description: Learn here all about Layers in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Layers +title: Layers in React Maps | Syncfusion +description: Learn how to add and combine multiple layers in React Maps, including main shape layers, map providers, and overlay sublayers for richer visualizations. +control: Layers platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Layers in React Maps component +# Layers in React Maps Layers are the fundamental building blocks of the Maps component. Each layer can display shape data from GeoJSON files or map providers. The Maps component renders content through the [`layers`](https://ej2.syncfusion.com/react/documentation/api/maps#layers) property, and multiple layers can be added to create rich, layered map visualizations. diff --git a/chart-sdk/react/maps/legend.md b/chart-sdk/react/maps/legend.md index 5dd6a2350..8556ba2a6 100644 --- a/chart-sdk/react/maps/legend.md +++ b/chart-sdk/react/maps/legend.md @@ -1,14 +1,14 @@ --- layout: post -title: Legend in React Maps component | Syncfusion -description: Learn here all about Legend in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Legend +title: Legend in React Maps | Syncfusion +description: Learn how to add and position legends in React Maps to explain the colors, shapes, and symbols used to represent data on the map. +control: Legend platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in React Maps component +# Legend in React Maps This section shows how to add legends in the Maps component. The below video demonstrates the same. diff --git a/chart-sdk/react/maps/localization.md b/chart-sdk/react/maps/localization.md index 5f1032ecc..d778a4dfa 100644 --- a/chart-sdk/react/maps/localization.md +++ b/chart-sdk/react/maps/localization.md @@ -1,14 +1,14 @@ --- layout: post -title: Localization in React Maps component | Syncfusion -description: Learn here all about Localization in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: Localization in React Maps | Syncfusion +description: Learn how to localize static text such as zoom toolbar tooltips in React Maps by defining locale values and translation objects for any culture. control: Localization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Localization in React Maps component +# Localization in React Maps The localization library allows localizing the default text content of the Maps component. The Maps component has the static text of some features such as tooltip of zoom toolbar, and that can be changed to any other culture(Arabic, Deutsch, French, etc) by defining the locale value and translation object. diff --git a/chart-sdk/react/maps/markers.md b/chart-sdk/react/maps/markers.md index 1df3bf263..ba6ff1f8b 100644 --- a/chart-sdk/react/maps/markers.md +++ b/chart-sdk/react/maps/markers.md @@ -1,14 +1,14 @@ --- layout: post -title: Markers in React Maps component | Syncfusion -description: Learn here all about Markers in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Markers +title: Markers in React Maps | Syncfusion +description: Learn how to add and customize markers in React Maps to pinpoint specific locations, highlight points of interest, and display custom symbols. +control: Markers platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Markers in React Maps component +# Markers in React Maps This section shows how to add and customize the markers in the Maps component. The below video demonstrates the same. diff --git a/chart-sdk/react/maps/methods.md b/chart-sdk/react/maps/methods.md index ffcca4e7a..b563fc0d0 100644 --- a/chart-sdk/react/maps/methods.md +++ b/chart-sdk/react/maps/methods.md @@ -1,14 +1,14 @@ --- layout: post -title: Methods in React Maps component | Syncfusion -description: Learn here all about methods in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: Methods in React Maps | Syncfusion +description: Learn the React Maps public methods for retrieving coordinates, manipulating layers, refreshing content, and exporting visualizations programmatically. control: Methods platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Methods in React Maps component +# Methods in React Maps The Maps control provides several public methods that enable programmatic control and interaction with map controls. These methods allow developers to perform operations such as retrieving geographic coordinates, manipulating layers, refreshing content, and exporting map visualizations. This section documents the available methods and their usage. diff --git a/chart-sdk/react/maps/navigation-line.md b/chart-sdk/react/maps/navigation-line.md index ed13155ad..0514c5d37 100644 --- a/chart-sdk/react/maps/navigation-line.md +++ b/chart-sdk/react/maps/navigation-line.md @@ -1,14 +1,14 @@ --- layout: post -title: Navigation line in React Maps component | Syncfusion -description: Learn here all about Navigation line in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: Navigation Lines in React Maps | Syncfusion +description: Learn how to draw curved navigation lines in React Maps to visualize flight routes, sea routes, and other paths between geographic locations. control: Navigation line platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Navigation line in React Maps component +# Navigation Lines in React Maps Navigation lines are curved paths used to denote the route between two locations on the Maps. This feature is commonly used to draw flight routes, sea routes, or any path connecting two geographic points. Navigation lines are enabled by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/maps/navigationLineSettingsModel#visible) property of the [`navigationLineSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/navigationLineSettingsModel) to **true**. diff --git a/chart-sdk/react/maps/nextjs-getting-started.md b/chart-sdk/react/maps/nextjs-getting-started.md index 95f5bb5d9..ce8f9a7a2 100644 --- a/chart-sdk/react/maps/nextjs-getting-started.md +++ b/chart-sdk/react/maps/nextjs-getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: React getting started with Next.js | Syncfusion -description: Check out and learn here all about how to use the Syncfusion React UI components in the Next.js project. +title: Getting Started with Next.js in React Maps | Syncfusion +description: Learn how to set up a Next.js application and integrate the Syncfusion React Maps component using a step-by-step walkthrough and npm package install. control: Next.js platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Creating a Next.js Application Using Syncfusion® React Components +# Getting Started with Next.js in React Maps This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion® React Maps component. diff --git a/chart-sdk/react/maps/polygon.md b/chart-sdk/react/maps/polygon.md index 5a42419f0..4703c5825 100644 --- a/chart-sdk/react/maps/polygon.md +++ b/chart-sdk/react/maps/polygon.md @@ -1,14 +1,14 @@ --- layout: post -title: Polygon in React Maps component | Syncfusion -description: Learn here all about Polygon in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Polygon +title: Polygon in React Maps | Syncfusion +description: Learn how to add and customize polygon overlays in React Maps using latitude/longitude coordinates for zones, boundaries, regions, and coverage areas. +control: Polygon platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Polygon shape in React Maps component +# Polygon in React Maps The Maps component supports rendering custom polygon shapes as overlays on both geometry-based maps and online tile maps. Polygons are useful for highlighting specific geographic regions, marking zones of interest, drawing custom boundaries, or visualizing areas such as coverage zones, territorial boundaries, or restricted areas. This feature is configured using the [polygons](https://ej2.syncfusion.com/react/documentation/api/maps/polygonSettingsModel#polygons) property, which allows multiple polygon shapes to be added and customized independently. diff --git a/chart-sdk/react/maps/populate-data.md b/chart-sdk/react/maps/populate-data.md index db5ef8e78..b480a8339 100644 --- a/chart-sdk/react/maps/populate-data.md +++ b/chart-sdk/react/maps/populate-data.md @@ -1,14 +1,14 @@ --- layout: post -title: Populate data in React Maps component | Syncfusion -description: Learn here all about Populate data in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: Populate Data in React Maps | Syncfusion +description: Learn how to populate React Maps with GeoJSON shape data, including supported geometry types like Polygon, LineString, and MultiPolygon for custom layouts. control: Populate data platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Populate data in React Maps component +# Populate Data in React Maps ## Geometry types diff --git a/chart-sdk/react/maps/print.md b/chart-sdk/react/maps/print.md index 74bcd2570..94f9aaabd 100644 --- a/chart-sdk/react/maps/print.md +++ b/chart-sdk/react/maps/print.md @@ -1,14 +1,14 @@ --- layout: post -title: Print in React Maps component | Syncfusion -description: Learn here all about Print in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Print +title: Print and Export in React Maps | Syncfusion +description: Learn how to print and export React Maps directly from the browser by injecting the Print module and enabling the allowPrint property. +control: Print platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print in React Maps component +# Print and Export in React Maps ## Print diff --git a/chart-sdk/react/maps/providers/azure-maps.md b/chart-sdk/react/maps/providers/azure-maps.md index ebc3fe9f5..5bd8a222c 100644 --- a/chart-sdk/react/maps/providers/azure-maps.md +++ b/chart-sdk/react/maps/providers/azure-maps.md @@ -1,14 +1,14 @@ --- layout: post -title: Azure maps in React Maps component | Syncfusion -description: Learn here all about Azure maps in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Azure maps +title: Azure Maps in React Maps | Syncfusion +description: Learn how to integrate Microsoft Azure Maps in React Maps with satellite, road, and terrain styles using an Azure Maps subscription. +control: Azure maps platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Azure maps integration in React Maps component +# Azure Maps in React Maps Azure Maps is an online map service provider from Microsoft. Similar to OSM and Bing Maps, it provides map tile images based on requests and combines them to display the map area. Azure Maps offers various map styles including satellite imagery, road maps, and terrain views with global coverage. diff --git a/chart-sdk/react/maps/providers/bing-maps.md b/chart-sdk/react/maps/providers/bing-maps.md index 398da10d4..efc3b025b 100644 --- a/chart-sdk/react/maps/providers/bing-maps.md +++ b/chart-sdk/react/maps/providers/bing-maps.md @@ -1,14 +1,14 @@ --- layout: post -title: Bing maps in React Maps component | Syncfusion -description: Learn here all about Bing maps in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: Bing Maps in React Maps | Syncfusion +description: Learn how to integrate Microsoft Bing Maps in React Maps using a valid Bing Maps API key to render tile-based geographic visualizations. control: Bing maps platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bing maps integration in React Maps component +# Bing Maps in React Maps Bing Maps is a online Maps provider, owned by Microsoft. As like OSM, it provide Maps tile images based on our requests and combines those images into a single one to display Maps area. diff --git a/chart-sdk/react/maps/providers/openstreetmap.md b/chart-sdk/react/maps/providers/openstreetmap.md index 42c83c6b1..a1688351f 100644 --- a/chart-sdk/react/maps/providers/openstreetmap.md +++ b/chart-sdk/react/maps/providers/openstreetmap.md @@ -1,14 +1,14 @@ --- layout: post -title: Openstreetmap in React Maps component | Syncfusion -description: Learn here all about Openstreetmap in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: OpenStreetMap in React Maps | Syncfusion +description: Learn how to integrate OpenStreetMap as a tile-based map provider in React Maps using free, community-built geographic tile images. control: Openstreetmap platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Openstreetmap integration in React Maps component +# OpenStreetMap in React Maps Map providers are online services that supply map tile images for rendering geographic visualizations. The Maps component supports integration with various tile-based map providers to display real-world geographic data. diff --git a/chart-sdk/react/maps/providers/other-maps.md b/chart-sdk/react/maps/providers/other-maps.md index 762d06315..afcb9e10b 100644 --- a/chart-sdk/react/maps/providers/other-maps.md +++ b/chart-sdk/react/maps/providers/other-maps.md @@ -1,14 +1,14 @@ --- layout: post -title: Other maps in React Maps component | Syncfusion -description: Learn here all about Other maps in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. -control: Other maps +title: Other Maps in React Maps | Syncfusion +description: Learn how to integrate any tile-based map provider in React Maps by specifying a custom URL template via the urlTemplate property. +control: Other maps platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Other maps in React Maps component +# Other Maps in React Maps In addition to OpenStreetMap, Bing Maps, and Azure Maps, the Maps component supports integration with other third-party online map service providers. Custom map providers can be rendered by specifying their tile server URL in the [urlTemplate](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel#urltemplate) property. The Maps component supports any tile-based map provider that uses standard URL template formats for tile requests. diff --git a/chart-sdk/react/maps/state-persistence.md b/chart-sdk/react/maps/state-persistence.md index fc556ac27..58ee291c4 100644 --- a/chart-sdk/react/maps/state-persistence.md +++ b/chart-sdk/react/maps/state-persistence.md @@ -1,14 +1,14 @@ --- layout: post -title: State persistence in React Maps component | Syncfusion -description: Learn here all about State persistence in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: State Persistence in React Maps | Syncfusion +description: Learn how to enable state persistence in React Maps to retain model values in browser cookies across page refreshes using enablePersistence. control: State persistence platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# State persistence in React Maps component +# State Persistence in React Maps ## State Persistence diff --git a/chart-sdk/react/maps/user-interactions.md b/chart-sdk/react/maps/user-interactions.md index dec0bf3b4..71a8d13b6 100644 --- a/chart-sdk/react/maps/user-interactions.md +++ b/chart-sdk/react/maps/user-interactions.md @@ -1,14 +1,14 @@ --- layout: post -title: User interactions in React Maps component | Syncfusion -description: Learn here all about User interactions in Syncfusion React Maps component of Syncfusion Essential JS 2 and more. +title: User Interactions in React Maps | Syncfusion +description: Learn how to enable zooming, panning, and other user interactions in React Maps using zoomSettings for in-depth map exploration. control: User interactions platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# User interactions in React Maps component +# User Interactions in React Maps ## Zooming diff --git a/chart-sdk/react/range-navigator/accessibility.md b/chart-sdk/react/range-navigator/accessibility.md index 7ad766a48..a5351d664 100644 --- a/chart-sdk/react/range-navigator/accessibility.md +++ b/chart-sdk/react/range-navigator/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React Range navigator component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. -control: Accessibility +title: Accessibility in React Range Navigator | Syncfusion +description: Learn how the Syncfusion React Range Navigator Component supports accessibility with WAI-ARIA roles, attributes, and keyboard navigation. +control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React Range navigator component +# Accessibility in React Range Navigator The Range navigator component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/react/range-navigator/customization.md b/chart-sdk/react/range-navigator/customization.md index 81d8c245c..d0eb7f352 100644 --- a/chart-sdk/react/range-navigator/customization.md +++ b/chart-sdk/react/range-navigator/customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Customization in React Range navigator component | Syncfusion -description: Learn here all about Customization in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. -control: Customization +title: Customization in React Range Navigator | Syncfusion +description: Learn how to customize the Syncfusion React Range Navigator Component using navigator style, thumb shape, border, snapping, and animation. +control: Customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Customization in React Range navigator component +# Customization in React Range Navigator ## Navigator appearance diff --git a/chart-sdk/react/range-navigator/data.md b/chart-sdk/react/range-navigator/data.md index 1a57d53d8..2fdedb07b 100644 --- a/chart-sdk/react/range-navigator/data.md +++ b/chart-sdk/react/range-navigator/data.md @@ -1,7 +1,7 @@ --- layout: post -title: Data in React Range navigator component | Syncfusion -description: Learn here all about Data in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. +title: Data in React Range Navigator | Syncfusion +description: Learn how to bind numeric, date-time, and logarithmic data to the Syncfusion React Range Navigator Component using valueType properties. control: Data platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Data in React Range navigator component +# Data in React Range Navigator ## Numeric diff --git a/chart-sdk/react/range-navigator/ej1-api-migration.md b/chart-sdk/react/range-navigator/ej1-api-migration.md index 8da6b8c24..8dfb332d7 100644 --- a/chart-sdk/react/range-navigator/ej1-api-migration.md +++ b/chart-sdk/react/range-navigator/ej1-api-migration.md @@ -1,14 +1,14 @@ --- layout: post -title: Ej1 api migration in React Range navigator component | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. -control: Ej1 api migration +title: EJ1 API Migration in React Range Navigator | Syncfusion +description: Learn how to migrate the Syncfusion React Range Navigator Component from Essential JS 1 to EJ2 with API mapping and code rewrite guidance. +control: Ej1 api migration platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in React Range navigator component +# EJ1 API Migration in React Range Navigator This article describes the API migration process of Chart component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/react/range-navigator/export-print.md b/chart-sdk/react/range-navigator/export-print.md index a21762162..1d07274f3 100644 --- a/chart-sdk/react/range-navigator/export-print.md +++ b/chart-sdk/react/range-navigator/export-print.md @@ -1,14 +1,14 @@ --- layout: post -title: Export print in React Range navigator component | Syncfusion -description: Learn here all about Export print in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. +title: Export and Print in React Range Navigator | Syncfusion +description: Learn how to export and print the Syncfusion React Range Navigator Component to PDF, image, or SVG using the export and print methods. control: Export print platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Export print in React Range navigator component +# Export and Print in React Range Navigator ## Export diff --git a/chart-sdk/react/range-navigator/getting-started.md b/chart-sdk/react/range-navigator/getting-started.md index c04bc9872..f1eaae30f 100644 --- a/chart-sdk/react/range-navigator/getting-started.md +++ b/chart-sdk/react/range-navigator/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with React Range Navigator component | Syncfusion -description: Check out and learn about getting started with the React Range Navigator component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React Range Navigator | Syncfusion +description: Learn how to get started with the Syncfusion React Range Navigator Component. Explore setup, features, examples, and customization options. control: Getting started platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting started with React Range Navigator component +# Getting Started with React Range Navigator This section describes the steps to create a simple Range Navigator and demonstrates the basic usage of the Range Navigator component. diff --git a/chart-sdk/react/range-navigator/grid-tick.md b/chart-sdk/react/range-navigator/grid-tick.md index dfc995272..2b9444b86 100644 --- a/chart-sdk/react/range-navigator/grid-tick.md +++ b/chart-sdk/react/range-navigator/grid-tick.md @@ -1,14 +1,14 @@ --- layout: post -title: Grid tick in React Range navigator component | Syncfusion -description: Learn here all about Grid tick in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. +title: Grid and Tick Lines in React Range Navigator | Syncfusion +description: Learn how to show and customize grid and tick lines on the Syncfusion React Range Navigator Component using major tick settings. control: Grid tick platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Grid tick in React Range navigator component +# Grid and Tick Lines in React Range Navigator ## Grid line customization diff --git a/chart-sdk/react/range-navigator/labels.md b/chart-sdk/react/range-navigator/labels.md index 4fdc959bb..afaad36d7 100644 --- a/chart-sdk/react/range-navigator/labels.md +++ b/chart-sdk/react/range-navigator/labels.md @@ -1,14 +1,14 @@ --- layout: post -title: Labels in React Range navigator component | Syncfusion -description: Learn here all about Labels in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. -control: Labels +title: Labels in React Range Navigator | Syncfusion +description: Learn how to configure and customize labels in the Syncfusion React Range Navigator Component using labelFormat, labelStyle, and labelIntersectAction. +control: Labels platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Labels in React Range navigator component +# Labels in React Range Navigator ## Multilevel labels diff --git a/chart-sdk/react/range-navigator/lightweight.md b/chart-sdk/react/range-navigator/lightweight.md index 4590d3622..58e30f566 100644 --- a/chart-sdk/react/range-navigator/lightweight.md +++ b/chart-sdk/react/range-navigator/lightweight.md @@ -1,14 +1,14 @@ --- layout: post -title: Lightweight in React Range navigator component | Syncfusion -description: Learn here all about Lightweight in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. -control: Lightweight +title: Lightweight in React Range Navigator | Syncfusion +description: Learn how to render the lightweight Syncfusion React Range Navigator Component for simpler styling and faster performance. +control: Lightweight platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Lightweight in React Range navigator component +# Lightweight in React Range Navigator By default, when the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/range-navigator#datasource) for [`series`](https://ej2.syncfusion.com/react/documentation/api/range-navigator#series) is empty, a lightweight Range Selector will be shown without Chart. diff --git a/chart-sdk/react/range-navigator/period-selector.md b/chart-sdk/react/range-navigator/period-selector.md index e85992280..680b7f8c5 100644 --- a/chart-sdk/react/range-navigator/period-selector.md +++ b/chart-sdk/react/range-navigator/period-selector.md @@ -1,14 +1,14 @@ --- layout: post -title: Period selector in React Range navigator component | Syncfusion -description: Learn here all about Period selector in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. +title: Period Selector in React Range Navigator | Syncfusion +description: Learn how to add a period selector to the Syncfusion React Range Navigator Component for quick presets. control: Period selector platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Period selector in React Range navigator component +# Period Selector in React Range Navigator The period selector allows to select a range with specified periods. diff --git a/chart-sdk/react/range-navigator/r-t-l.md b/chart-sdk/react/range-navigator/r-t-l.md index 2bcedbaaa..47366fc9f 100644 --- a/chart-sdk/react/range-navigator/r-t-l.md +++ b/chart-sdk/react/range-navigator/r-t-l.md @@ -1,14 +1,14 @@ --- layout: post -title: R t l in React Range navigator component | Syncfusion -description: Learn here all about R t l in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. -control: R t l +title: RTL in React Range Navigator | Syncfusion +description: Learn how to enable right-to-left rendering on the Syncfusion React Range Navigator Component for languages like Arabic. +control: RTL platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# R t l in React Range navigator component +# RTL in React Range Navigator The Range Selector supports right-to-left (RTL), which can be enabled with the [`enableRtl`](https://ej2.syncfusion.com/react/documentation/api/range-navigator#enablertl) property. diff --git a/chart-sdk/react/range-navigator/selecting-range.md b/chart-sdk/react/range-navigator/selecting-range.md index e9a8a2157..9e6f76be5 100644 --- a/chart-sdk/react/range-navigator/selecting-range.md +++ b/chart-sdk/react/range-navigator/selecting-range.md @@ -1,14 +1,14 @@ --- layout: post -title: Selecting range in React Range navigator component | Syncfusion -description: Learn here all about Selecting range in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. +title: Range in React Range Navigator | Syncfusion +description: Learn how to select a range in the Syncfusion React Range Navigator Component by dragging the thumbs, tapping the labels, or setting the value. control: Selecting range platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selecting range in React Range navigator component +# Range in React Range Navigator The Range Selector's left and right thumbs are used to indicate the selected range in the large collection of data. A range can be selected in the following ways: diff --git a/chart-sdk/react/range-navigator/series-types.md b/chart-sdk/react/range-navigator/series-types.md index 12c20c3f6..e8c43cfe4 100644 --- a/chart-sdk/react/range-navigator/series-types.md +++ b/chart-sdk/react/range-navigator/series-types.md @@ -1,14 +1,14 @@ --- layout: post -title: Series types in React Range navigator component | Syncfusion -description: Learn here all about Series types in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. +title: Series Types in React Range Navigator | Syncfusion +description: Learn how to render line, area, column, step line, spline and spline area series in the Syncfusion React Range Navigator Component for visual time-range data. control: Series types platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Series types in React Range navigator component +# Series Types in React Range Navigator To render the data, the Range Selector supports six types of series. diff --git a/chart-sdk/react/range-navigator/tool-tip.md b/chart-sdk/react/range-navigator/tool-tip.md index 40488b03f..aed712ca1 100644 --- a/chart-sdk/react/range-navigator/tool-tip.md +++ b/chart-sdk/react/range-navigator/tool-tip.md @@ -1,14 +1,14 @@ --- layout: post -title: Tool tip in React Range navigator component | Syncfusion -description: Learn here all about Tool tip in Syncfusion React Range navigator component of Syncfusion Essential JS 2 and more. -control: Tool tip +title: Tooltip in React Range Navigator | Syncfusion +description: Learn how to enable and customize tooltips on the Syncfusion React Range Navigator Component with format, display mode, and template options. +control: Tooltip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip in React Range navigator component +# Tooltip in React Range Navigator diff --git a/chart-sdk/react/sankey-diagram/accessibility.md b/chart-sdk/react/sankey-diagram/accessibility.md index 6b58561c1..5f57cd2fd 100644 --- a/chart-sdk/react/sankey-diagram/accessibility.md +++ b/chart-sdk/react/sankey-diagram/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React Sankey Chart component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. +title: Accessibility in React Sankey Diagram | Syncfusion +description: Learn how the Syncfusion React Sankey Diagram Component supports accessibility with WAI-ARIA, Section 508, WCAG 2.2, and keyboard navigation. control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React Sankey Chart component +# Accessibility in React Sankey Diagram The Sankey Chart component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22), and relevant [WAI-ARIA](https://www.w3.org/TR/wai-aria#roles) roles. diff --git a/chart-sdk/react/sankey-diagram/appearance.md b/chart-sdk/react/sankey-diagram/appearance.md index c7180bd87..746462216 100644 --- a/chart-sdk/react/sankey-diagram/appearance.md +++ b/chart-sdk/react/sankey-diagram/appearance.md @@ -1,14 +1,14 @@ --- layout: post -title: Appearance in React Sankey Chart component | Syncfusion -description: Learn here all about Appearance in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. +title: Appearance in React Sankey Diagram | Syncfusion +description: Learn how to customize the appearance of the Syncfusion React Sankey Diagram Component with dimensions, background, border, margin, and theme. control: Appearance platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in React Sankey Chart component +# Appearance in React Sankey Diagram The Sankey Chart provides comprehensive customization options to control visual appearance, dimensions, responsiveness, colors, borders, and themes. These appearance settings enable you to create diagrams that match your application's design system and user experience requirements. diff --git a/chart-sdk/react/sankey-diagram/customization.md b/chart-sdk/react/sankey-diagram/customization.md index 971337ae0..84470c2af 100644 --- a/chart-sdk/react/sankey-diagram/customization.md +++ b/chart-sdk/react/sankey-diagram/customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Customization in React Sankey Chart component | Syncfusion -description: Learn here all about Customization in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. +title: Customization in React Sankey Diagram | Syncfusion +description: Learn how to customize the Syncfusion React Sankey Diagram Component with node and link styling, color mapping, theme, and conditional rendering patterns. control: Customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Customization in React Sankey Chart component +# Customization in React Sankey Diagram The Sankey Chart provides extensive customization options to create visualizations that match your specific design requirements and data presentation needs. From styling and theming to advanced visual techniques, the component enables complete control over appearance and behavior. diff --git a/chart-sdk/react/sankey-diagram/events.md b/chart-sdk/react/sankey-diagram/events.md index aaa70af49..7871398e0 100644 --- a/chart-sdk/react/sankey-diagram/events.md +++ b/chart-sdk/react/sankey-diagram/events.md @@ -1,14 +1,14 @@ --- layout: post -title: Events in React Sankey Chart component | Syncfusion -description: Learn here all about Events in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. +title: Events in React Sankey Diagram | Syncfusion +description: Learn how to use events in the Syncfusion React Sankey Diagram Component, including nodeClick, linkClick, load, and loaded event handlers. control: Events platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Events in React Sankey Chart component +# Events in React Sankey Diagram The Sankey Chart provides comprehensive events that allow you to customize behavior, respond to user interactions, and hook into the chart lifecycle. These events enable advanced customization scenarios including data transformation, analytics tracking, and dynamic UI updates. diff --git a/chart-sdk/react/sankey-diagram/getting-started.md b/chart-sdk/react/sankey-diagram/getting-started.md index 379f6a9d8..b6b64e28a 100644 --- a/chart-sdk/react/sankey-diagram/getting-started.md +++ b/chart-sdk/react/sankey-diagram/getting-started.md @@ -1,8 +1,8 @@ --- layout: post -title: Getting started with React Sankey Chart component | Syncfusion -description: Check out and learn about getting started with the React Sankey Chart component of Syncfusion Essential JS 2 and more details. -control: Getting Started +title: Getting Started with React Sankey Diagram | Syncfusion +description: Learn how to get started with the Syncfusion React Sankey Diagram Component. Explore setup, features, examples, and customization options. +control: Getting Started platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Getting started with React Sankey Chart component +# Getting Started with React Sankey Diagram This section describes how to integrate the Syncfusion React Sankey Chart component into a new React application. You'll learn about dependencies, installation steps, and how to create your first Sankey Chart visualization. diff --git a/chart-sdk/react/sankey-diagram/labels.md b/chart-sdk/react/sankey-diagram/labels.md index 1896b7f4b..eac4c6eb6 100644 --- a/chart-sdk/react/sankey-diagram/labels.md +++ b/chart-sdk/react/sankey-diagram/labels.md @@ -1,14 +1,14 @@ --- layout: post -title: Labels in React Sankey Chart component | Syncfusion -description: Learn here all about Labels in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. +title: Labels in React Sankey Diagram | Syncfusion +description: Learn how to configure and customize labels on nodes and links in the Syncfusion React Sankey Diagram Component using labelSettings. control: Labels platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Labels in React Sankey Chart component +# Labels in React Sankey Diagram Labels display descriptive text associated with nodes in the Sankey Chart, making the diagram more understandable and interpretable. The Sankey Chart provides comprehensive label customization options including visibility control, font styling, individual label configuration, and dynamic rendering events. diff --git a/chart-sdk/react/sankey-diagram/legend.md b/chart-sdk/react/sankey-diagram/legend.md index 18169733a..a1727f36a 100644 --- a/chart-sdk/react/sankey-diagram/legend.md +++ b/chart-sdk/react/sankey-diagram/legend.md @@ -1,14 +1,14 @@ --- layout: post -title: Legend in React Sankey Chart component | Syncfusion -description: Learn here all about Legend in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. +title: Legend in React Sankey Diagram | Syncfusion +description: Learn how to enable and customize the legend in the Syncfusion React Sankey Diagram Component to identify nodes. control: Legend platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in React Sankey Chart component +# Legend in React Sankey Diagram A legend provides a visual key that helps users understand the categories and meanings represented by nodes in the Sankey Chart. The Sankey Chart provides comprehensive legend configuration options including positioning, styling, customization, and interactive behaviors. You can enable and customize legend using the `legend` property and by injecting the `SankeyLegend` module. diff --git a/chart-sdk/react/sankey-diagram/links.md b/chart-sdk/react/sankey-diagram/links.md index e7bde8274..8df9637bb 100644 --- a/chart-sdk/react/sankey-diagram/links.md +++ b/chart-sdk/react/sankey-diagram/links.md @@ -1,14 +1,14 @@ --- layout: post -title: Links in React Sankey Chart component | Syncfusion -description: Learn here all about Links in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. +title: Links in React Sankey Diagram | Syncfusion +description: Learn how to add and customize links in the Syncfusion React Sankey Diagram Component to show flow between nodes with custom color, width, and opacity. control: Links platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Links in React Sankey Chart component +# Links in React Sankey Diagram Links are the connecting paths that visualize flow between nodes in a Sankey Chart. Each link connects a source node to a target node and carries a quantitative value that determines its visual thickness. The Sankey Chart provides comprehensive customization options for link styling, colors, curvature, and interactions. diff --git a/chart-sdk/react/sankey-diagram/nodes.md b/chart-sdk/react/sankey-diagram/nodes.md index 144d39a5e..381bdf621 100644 --- a/chart-sdk/react/sankey-diagram/nodes.md +++ b/chart-sdk/react/sankey-diagram/nodes.md @@ -1,14 +1,14 @@ --- layout: post -title: Nodes in React Sankey Chart component | Syncfusion -description: Learn here all about Nodes in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. +title: Nodes in React Sankey Diagram | Syncfusion +description: Learn how to add and customize nodes in the Syncfusion React Sankey Diagram Component with custom color, width, and opacity. control: Nodes platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Nodes in React Sankey Chart component +# Nodes in React Sankey Diagram Nodes are the fundamental building blocks of a Sankey Chart, representing sources, targets, and intermediate entities in flow diagrams. The Sankey Chart provides extensive customization options for node appearance, enabling you to create visually meaningful and interactive flow diagrams. diff --git a/chart-sdk/react/sankey-diagram/orientation-rtl.md b/chart-sdk/react/sankey-diagram/orientation-rtl.md index 1007aa464..e1874a89d 100644 --- a/chart-sdk/react/sankey-diagram/orientation-rtl.md +++ b/chart-sdk/react/sankey-diagram/orientation-rtl.md @@ -1,14 +1,14 @@ --- layout: post -title: Orientation and RTL in React Sankey Chart component | Syncfusion -description: Learn here all about Orientation and RTL in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. +title: Orientation and RTL in React Sankey Diagram | Syncfusion +description: Learn how to set the orientation and enable right-to-left rendering on the Syncfusion React Sankey Diagram Component for languages like Arabic and Hebrew. control: Orientation and RTL platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Orientation and RTL in React Sankey Chart component +# Orientation and RTL in React Sankey Diagram The Sankey Chart supports flexible layout options including horizontal and vertical orientations, as well as right-to-left (RTL) rendering for international applications. These features enable you to create localized and directionally appropriate visualizations. diff --git a/chart-sdk/react/sankey-diagram/print-and-export.md b/chart-sdk/react/sankey-diagram/print-and-export.md index 518a9d743..2a40740d5 100644 --- a/chart-sdk/react/sankey-diagram/print-and-export.md +++ b/chart-sdk/react/sankey-diagram/print-and-export.md @@ -1,14 +1,14 @@ --- layout: post -title: Print and Export in React Sankey Chart component | Syncfusion -description: Learn here all about Print and Export in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. +title: Print and Export in React Sankey Diagram | Syncfusion +description: Learn how to print or export the Syncfusion React Sankey Diagram Component to PDF, image, or SVG using the public print and export methods. control: Print and Export platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and Export in React Sankey Chart component +# Print and Export in React Sankey Diagram The Sankey Chart provides comprehensive print and export functionality, enabling users to generate static files in multiple formats (PNG, JPEG, SVG, PDF) or print the diagram directly. This is useful for reports, documentation, sharing, and offline access. diff --git a/chart-sdk/react/sankey-diagram/title-and-sub-title.md b/chart-sdk/react/sankey-diagram/title-and-sub-title.md index c486d41d6..2aabde59f 100644 --- a/chart-sdk/react/sankey-diagram/title-and-sub-title.md +++ b/chart-sdk/react/sankey-diagram/title-and-sub-title.md @@ -1,14 +1,14 @@ --- layout: post -title: Title and Subtitle in React Sankey Chart component | Syncfusion -description: Learn here all about Title and Subtitle in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. -control: Title and Subtitle +title: Title and Subtitle in React Sankey Diagram | Syncfusion +description: Learn how to add and customize a title and subtitle for the Syncfusion React Sankey Diagram Component. +control: Title and subtitle platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title and Subtitle in React Sankey Chart component +# Title and Subtitle in React Sankey Diagram The Sankey Chart supports adding descriptive titles and subtitles to provide context and information about your data visualization. These text elements help users quickly understand the purpose and content of the diagram. You can fully customize the text, styling, alignment, and appearance using dedicated properties. diff --git a/chart-sdk/react/sankey-diagram/tool-tip.md b/chart-sdk/react/sankey-diagram/tool-tip.md index c444cfbae..3f5fe27f3 100644 --- a/chart-sdk/react/sankey-diagram/tool-tip.md +++ b/chart-sdk/react/sankey-diagram/tool-tip.md @@ -1,14 +1,14 @@ --- layout: post -title: ToolTip in React Sankey Chart component | Syncfusion -description: Learn here all about ToolTip in Syncfusion React Sankey Chart component of Syncfusion Essential JS 2 and more. -control: ToolTip +title: Tooltip in React Sankey Diagram | Syncfusion +description: Learn how to enable and customize tooltips in the Syncfusion React Sankey Diagram Component with template and format options. +control: Tooltip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# ToolTip in React Sankey Chart component +# Tooltip in React Sankey Diagram The Sankey Chart provides tooltips that surface contextual details for hovered elements without cluttering the diagram. Tooltips display additional information when users hover over nodes or links in the Sankey Chart. You can enable and customize tooltips using the `tooltip` property and by injecting the `SankeyTooltip` module. diff --git a/chart-sdk/react/smith-chart/accessibility.md b/chart-sdk/react/smith-chart/accessibility.md index b621958b9..d74fc9beb 100644 --- a/chart-sdk/react/smith-chart/accessibility.md +++ b/chart-sdk/react/smith-chart/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React Smithchart component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Smithchart component of Syncfusion Essential JS 2 and more. +title: Accessibility in React Smith Chart component | Syncfusion +description: Learn here all about Accessibility in Syncfusion React Smith Chart component of Syncfusion Essential JS 2 and more. control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React Smithchart component +# Accessibility in React Smith Chart The Smith chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/react/smith-chart/getting-started.md b/chart-sdk/react/smith-chart/getting-started.md index deb67c70d..e1a4f7f46 100644 --- a/chart-sdk/react/smith-chart/getting-started.md +++ b/chart-sdk/react/smith-chart/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with React Smith Chart component | Syncfusion -description: Check out and learn about Getting started with React Smith Chart component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React Smith Chart | Syncfusion +description: Learn how to set up a React Smith Chart with Vite, install the Syncfusion Charts package, register modules, and render your first chart. control: Getting Started platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting started with React Smith Chart component +# Getting Started with React Smith Chart This section describes the steps to create a simple Smith Chart and demonstrates the basic usage of the Smith Chart component. diff --git a/chart-sdk/react/smith-chart/smithchart-axis.md b/chart-sdk/react/smith-chart/smithchart-axis.md index 7a2f3c4fa..9378ab8a8 100644 --- a/chart-sdk/react/smith-chart/smithchart-axis.md +++ b/chart-sdk/react/smith-chart/smithchart-axis.md @@ -1,14 +1,14 @@ --- layout: post -title: Smithchart axis in React Smithchart component | Syncfusion -description: Learn here all about Smithchart axis in Syncfusion React Smithchart component of Syncfusion Essential JS 2 and more. +title: Axis in React Smith Chart | Syncfusion +description: Configure horizontal and radial axes in the React Smith Chart, including label position, label intersection handling, gridlines, and axis line styling. control: Smithchart axis platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Smithchart axis in React Smithchart component +# Axis in React Smith Chart Like chart, Smith chart also has support for two types of axis: diff --git a/chart-sdk/react/smith-chart/smithchart-dimensions.md b/chart-sdk/react/smith-chart/smithchart-dimensions.md index e7eb462e4..47fd9199f 100644 --- a/chart-sdk/react/smith-chart/smithchart-dimensions.md +++ b/chart-sdk/react/smith-chart/smithchart-dimensions.md @@ -1,14 +1,14 @@ --- layout: post -title: Smithchart dimensions in React Smithchart component | Syncfusion -description: Learn here all about Smithchart dimensions in Syncfusion React Smithchart component of Syncfusion Essential JS 2 and more. -control: Smithchart dimensions +title: Dimensions in React Smith Chart | Syncfusion +description: Set the React Smith Chart size to its container, or specify width and height in pixels or percentages for responsive layout control. +control: Smithchart dimensions platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Smithchart dimensions in React Smithchart component +# Dimensions in React Smith Chart You can render the Smith chart corresponding to its container size. To set the size for the Smith chart, use the width and height properties. diff --git a/chart-sdk/react/smith-chart/smithchart-legend.md b/chart-sdk/react/smith-chart/smithchart-legend.md index 988f7def4..766d52a0f 100644 --- a/chart-sdk/react/smith-chart/smithchart-legend.md +++ b/chart-sdk/react/smith-chart/smithchart-legend.md @@ -1,8 +1,8 @@ --- layout: post -title: Smithchart legend in React Smithchart component | Syncfusion -description: Learn here all about Smithchart legend in Syncfusion React Smithchart component of Syncfusion Essential JS 2 and more. -control: Smithchart legend +title: Legend in React Smith Chart | Syncfusion +description: Add and customize legends in the React Smith Chart with position, alignment, custom coordinates, shape, size, padding, and toggle visibility. +control: Smithchart legend platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Smithchart legend in React Smithchart component +# Legend in React Smith Chart Legend is a key used in smithchart; it contains symbols and descriptions. The legends provide a valuable information for interpreting what the Smith chart displays. They can be represented in various colors, shapes, or other identifiers based on the data. The legends are used to denote the series rendered in the Smith chart. diff --git a/chart-sdk/react/smith-chart/smithchart-marker.md b/chart-sdk/react/smith-chart/smithchart-marker.md index 74a272dd7..18c523d3b 100644 --- a/chart-sdk/react/smith-chart/smithchart-marker.md +++ b/chart-sdk/react/smith-chart/smithchart-marker.md @@ -1,7 +1,7 @@ --- layout: post -title: Smithchart marker in React Smithchart component | Syncfusion -description: Learn here all about Smithchart marker in Syncfusion React Smithchart component of Syncfusion Essential JS 2 and more. +title: Marker in React Smith Chart | Syncfusion +description: Enable markers and data labels in the React Smith Chart to highlight data points, with per-series customization of shape, fill, border, and label style. control: Smithchart marker platform: chart-sdk documentation: ug @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Smithchart marker in React Smithchart component +# Marker in React Smith Chart The markers and data labels are used to provide information about the data points in the series. You can add a shape to adorn each data point. By default, both the marker and data label are disabled in Smith chart. You can enable them by setting the visible property to true in marker and data label settings. diff --git a/chart-sdk/react/smith-chart/smithchart-print.md b/chart-sdk/react/smith-chart/smithchart-print.md index 78b2ced10..41ab6b649 100644 --- a/chart-sdk/react/smith-chart/smithchart-print.md +++ b/chart-sdk/react/smith-chart/smithchart-print.md @@ -1,14 +1,14 @@ --- layout: post -title: Smithchart print in React Smithchart component | Syncfusion -description: Learn here all about Smithchart print in Syncfusion React Smithchart component of Syncfusion Essential JS 2 and more. +title: Print and Export in React Smith Chart | Syncfusion +description: Print the React Smith Chart from the browser or export it to JPEG, PNG, SVG, or PDF using built-in print and export methods. control: Smithchart print platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Smithchart print in React Smithchart component +# Print and Export in React Smith Chart ## Print diff --git a/chart-sdk/react/smith-chart/smithchart-series.md b/chart-sdk/react/smith-chart/smithchart-series.md index 7b700288e..ae2eca934 100644 --- a/chart-sdk/react/smith-chart/smithchart-series.md +++ b/chart-sdk/react/smith-chart/smithchart-series.md @@ -1,14 +1,14 @@ --- layout: post -title: Smithchart series in React Smithchart component | Syncfusion -description: Learn here all about Smithchart series in Syncfusion React Smithchart component of Syncfusion Essential JS 2 and more. +title: Series in React Smith Chart | Syncfusion +description: Add one or more series to the React Smith Chart using points or a data source, and customize fill, opacity, width, and smart label placement. control: Smithchart series platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Smithchart series in React Smithchart component +# Series in React Smith Chart You can add any number of series to Smith chart as needed. By using the series setting, you can add or customize the data. For the points and data source added in the series, line can be drawn. You can customize the each series with marker, data label, animation, opacity, and so on. diff --git a/chart-sdk/react/smith-chart/smithchart-tooltip.md b/chart-sdk/react/smith-chart/smithchart-tooltip.md index 94ba0a3b8..44fbc46ea 100644 --- a/chart-sdk/react/smith-chart/smithchart-tooltip.md +++ b/chart-sdk/react/smith-chart/smithchart-tooltip.md @@ -1,14 +1,14 @@ --- layout: post -title: Smithchart tooltip in React Smithchart component | Syncfusion -description: Learn here all about Smithchart tooltip in Syncfusion React Smithchart component of Syncfusion Essential JS 2 and more. -control: Smithchart tooltip +title: Tooltip in React Smith Chart | Syncfusion +description: Enable tooltips on the React Smith Chart by setting tooltip visible to true and injecting the TooltipRender module into services. +control: Smithchart tooltip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Smithchart tooltip in React Smithchart component +# Tooltip in React Smith Chart The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/smithchart/seriestooltipmodel#visible) property as `true` in [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/smithchart/smithchartseriesmodel#tooltip) object and by injecting the `TooltipRender` module into the `services`. diff --git a/chart-sdk/react/smith-chart/title-subtitle.md b/chart-sdk/react/smith-chart/title-subtitle.md index 2b1c7465e..f470c0228 100644 --- a/chart-sdk/react/smith-chart/title-subtitle.md +++ b/chart-sdk/react/smith-chart/title-subtitle.md @@ -1,14 +1,14 @@ --- layout: post -title: Title subtitle in React Smithchart component | Syncfusion -description: Learn here all about Title subtitle in Syncfusion React Smithchart component of Syncfusion Essential JS 2 and more. -control: Title subtitle +title: Title and Subtitle in React Smith Chart | Syncfusion +description: Add a title and subtitle to the React Smith Chart, trim overflow with maximum width, and customize font, alignment, and visibility. +control: Title subtitle platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title subtitle in React Smithchart component +# Title and Subtitle in React Smith Chart ## Enable title diff --git a/chart-sdk/react/smith-chart/working-with-data.md b/chart-sdk/react/smith-chart/working-with-data.md index d7f618139..d996e701a 100644 --- a/chart-sdk/react/smith-chart/working-with-data.md +++ b/chart-sdk/react/smith-chart/working-with-data.md @@ -1,14 +1,14 @@ --- layout: post -title: Working with data in React Smithchart component | Syncfusion -description: Learn here all about Working with data in Syncfusion React Smithchart component of Syncfusion Essential JS 2 and more. +title: Working With Data in React Smith Chart | Syncfusion +description: Bind resistance and reactance data to the React Smith Chart using local JSON arrays as points or as a series data source. control: Working with data platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Working with data in React Smithchart component +# Working With Data in React Smith Chart The Smith chart can visualize the data bound from local data. The data bound for the Smith chart should be an array of object and should contain the field resistance and rectangle. This data should be bound to points or data source in the Smith chart. diff --git a/chart-sdk/react/sparkline-charts/accessibility.md b/chart-sdk/react/sparkline-charts/accessibility.md index 12b7f5c77..b14d693a8 100644 --- a/chart-sdk/react/sparkline-charts/accessibility.md +++ b/chart-sdk/react/sparkline-charts/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React Sparkline component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. +title: Accessibility in React Sparkline Charts | Syncfusion +description: Learn how the Syncfusion React Sparkline Charts meet WCAG 2.2, Section 508, and WAI-ARIA standards, with keyboard, screen reader, and RTL support. control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React Sparkline component +# Accessibility in React Sparkline Charts The Sparkline component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/react/sparkline-charts/appearance.md b/chart-sdk/react/sparkline-charts/appearance.md index e24f21e25..1938ba79e 100644 --- a/chart-sdk/react/sparkline-charts/appearance.md +++ b/chart-sdk/react/sparkline-charts/appearance.md @@ -1,14 +1,14 @@ --- layout: post -title: Appearance in React Sparkline component | Syncfusion -description: Learn here all about Appearance in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. +title: Appearance in React Sparkline Charts | Syncfusion +description: Customize the Syncfusion React Sparkline Charts appearance with border, padding, container area background, and built-in Material, Fabric, Bootstrap themes. control: Appearance platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in React Sparkline component +# Appearance in React Sparkline Charts The appearance of the sparkline can be customized using margin, container Area border, and container Area background. diff --git a/chart-sdk/react/sparkline-charts/axis-customization.md b/chart-sdk/react/sparkline-charts/axis-customization.md index 16a459419..088922509 100644 --- a/chart-sdk/react/sparkline-charts/axis-customization.md +++ b/chart-sdk/react/sparkline-charts/axis-customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Axis customization in React Sparkline component | Syncfusion -description: Learn here all about Axis customization in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. +title: Axis Customization in React Sparkline Charts | Syncfusion +description: Customize the Syncfusion React Sparkline Charts axis with Numeric, Category, or DateTime value types, min/max bounds, line color, width, and dash array. control: Axis customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in React Sparkline component +# Axis Customization in React Sparkline Charts You can customize axis value types and min and max values of the sparkline. diff --git a/chart-sdk/react/sparkline-charts/data-labels.md b/chart-sdk/react/sparkline-charts/data-labels.md index 5dd228457..2550a17a6 100644 --- a/chart-sdk/react/sparkline-charts/data-labels.md +++ b/chart-sdk/react/sparkline-charts/data-labels.md @@ -1,14 +1,14 @@ --- layout: post -title: Data labels in React Sparkline component | Syncfusion -description: Learn here all about Data labels in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. +title: Data Labels in React Sparkline Charts | Syncfusion +description: Display point values on the Syncfusion React Sparkline Charts by enabling data labels for all, start, end, high, low, or negative points with custom formatting. control: Data labels platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data labels in React Sparkline component +# Data Labels in React Sparkline Charts Data labels are used to display values of data points to improve the readability. diff --git a/chart-sdk/react/sparkline-charts/ej1-api-migration.md b/chart-sdk/react/sparkline-charts/ej1-api-migration.md index b6fb01acd..e1fad4886 100644 --- a/chart-sdk/react/sparkline-charts/ej1-api-migration.md +++ b/chart-sdk/react/sparkline-charts/ej1-api-migration.md @@ -1,14 +1,14 @@ --- layout: post -title: Ej1 api migration in React Sparkline component | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. -control: Ej1 api migration +title: Migration from Essential JS 1 in React Sparkline Charts | Syncfusion +description: Map Essential JS 1 Syncfusion React Sparkline Charts properties, methods, and events to their Essential JS 2 equivalents for quick API migration. +control: Ej1 api migration platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in React Sparkline component +# Migration from Essential JS 1 in React Sparkline Charts This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/react/sparkline-charts/getting-started.md b/chart-sdk/react/sparkline-charts/getting-started.md index 5ace451d4..a19e9d40a 100644 --- a/chart-sdk/react/sparkline-charts/getting-started.md +++ b/chart-sdk/react/sparkline-charts/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with React Sparkline component | Syncfusion -description: Checkout and learn about Getting started with React Sparkline component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React Sparkline Charts | Syncfusion +description: Learn how to get started with the Syncfusion React Sparkline Charts control. Explore setup, features, examples, and customization options. control: Getting started platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting started with React Sparkline component +# Getting Started with React Sparkline Charts This section describes the steps to create a simple Sparkline and demonstrates the basic usage of the Sparkline component. diff --git a/chart-sdk/react/sparkline-charts/localization.md b/chart-sdk/react/sparkline-charts/localization.md index 106f187ba..1054b93ad 100644 --- a/chart-sdk/react/sparkline-charts/localization.md +++ b/chart-sdk/react/sparkline-charts/localization.md @@ -1,14 +1,14 @@ --- layout: post -title: Localization in React Sparkline component | Syncfusion -description: Learn here all about Localization in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. +title: Localization in React Sparkline Charts | Syncfusion +description: Localize the Syncfusion React Sparkline Charts tooltip and values by changing the culture with the setCulture method for region-specific formats. control: Localization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Localization in React Sparkline component +# Localization in React Sparkline Charts The sparkline control supports localization. The default culture for localization is `en-US`. You can change the culture using the `setCulture` method. diff --git a/chart-sdk/react/sparkline-charts/marker.md b/chart-sdk/react/sparkline-charts/marker.md index ef2bbf55d..94cc41c97 100644 --- a/chart-sdk/react/sparkline-charts/marker.md +++ b/chart-sdk/react/sparkline-charts/marker.md @@ -1,14 +1,14 @@ --- layout: post -title: Marker in React Sparkline component | Syncfusion -description: Learn here all about Marker in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. +title: Markers in React Sparkline Charts | Syncfusion +description: Add markers to the Syncfusion React Sparkline Charts for all, start, end, high, low, or negative points and customize their fill, border, size, and opacity. control: Marker platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Marker in React Sparkline component +# Markers in React Sparkline Charts This section explains how to add markers to the sparkline. diff --git a/chart-sdk/react/sparkline-charts/range-band.md b/chart-sdk/react/sparkline-charts/range-band.md index 2e5f0925e..4a12acc29 100644 --- a/chart-sdk/react/sparkline-charts/range-band.md +++ b/chart-sdk/react/sparkline-charts/range-band.md @@ -1,14 +1,14 @@ --- layout: post -title: Range band in React Sparkline component | Syncfusion -description: Learn here all about Range band in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. +title: Range Band in React Sparkline Charts | Syncfusion +description: Highlight specific y-axis value regions in the Syncfusion React Sparkline Charts using one or multiple range bands with custom start, end, color, and opacity. control: Range band platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Range band in React Sparkline component +# Range Band in React Sparkline Charts This section explains how to customize the sparkline with multiple range bands. diff --git a/chart-sdk/react/sparkline-charts/sparkline-dimensions.md b/chart-sdk/react/sparkline-charts/sparkline-dimensions.md index 245f24d65..308fffa06 100644 --- a/chart-sdk/react/sparkline-charts/sparkline-dimensions.md +++ b/chart-sdk/react/sparkline-charts/sparkline-dimensions.md @@ -1,14 +1,14 @@ --- layout: post -title: Sparkline dimensions in React Sparkline component | Syncfusion -description: Learn here all about Sparkline dimensions in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. -control: Sparkline dimensions +title: Dimensions in React Sparkline Charts | Syncfusion +description: Set the Syncfusion React Sparkline Charts size via container, CSS, or direct width and height properties in pixel or percentage for responsive layouts. +control: Sparkline dimensions platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Sparkline dimensions in React Sparkline component +# Dimensions in React Sparkline Charts ## Size for container @@ -36,7 +36,7 @@ Sparkline can be rendered to its container size. You can set the size through in -You can also set the size for sparkline directly using the [`width`](../sparkline/#width-string) and [`height`](https://ej2.syncfusion.com/react/documentation/api/sparkline/#height-string) properties. +You can also set the size for sparkline directly using the [`width`](../sparkline#width-string) and [`height`](https://ej2.syncfusion.com/react/documentation/api/sparkline#height-string) properties. **In pixel** diff --git a/chart-sdk/react/sparkline-charts/sparkline-types.md b/chart-sdk/react/sparkline-charts/sparkline-types.md index 2e522e119..388d28a12 100644 --- a/chart-sdk/react/sparkline-charts/sparkline-types.md +++ b/chart-sdk/react/sparkline-charts/sparkline-types.md @@ -1,14 +1,14 @@ --- layout: post -title: Sparkline types in React Sparkline component | Syncfusion -description: Learn here all about Sparkline types in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. +title: Sparkline Types in React Sparkline Charts | Syncfusion +description: Render data with the Syncfusion React Sparkline Charts using line, column, area, win-loss, or pie types to visualize trends, comparisons, and composition. control: Sparkline types platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Sparkline types in React Sparkline component +# Sparkline Types in React Sparkline Charts Different shapes can be used to visualize data in a Sparkline component. You can change the Sparkline type using the [`type`](https://ej2.syncfusion.com/react/documentation/api/sparkline/sparklinemodel#type) property. diff --git a/chart-sdk/react/sparkline-charts/special-points-customization.md b/chart-sdk/react/sparkline-charts/special-points-customization.md index 76cc33d34..470b212b0 100644 --- a/chart-sdk/react/sparkline-charts/special-points-customization.md +++ b/chart-sdk/react/sparkline-charts/special-points-customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Special points customization in React Sparkline component | Syncfusion -description: Learn here all about Special points customization in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. +title: Special Points Customization in React Sparkline Charts | Syncfusion +description: Customize the start, end, positive, negative, low, and tie point colors in the Syncfusion React Sparkline Charts for line, column, and area types. control: Special points customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Special points customization in React Sparkline component +# Special Points Customization in React Sparkline Charts You can customize the points by initializing the point colors. The customization options allows to differentiate the [`start`], [`end`], [`positive`], [`negative`], and [`low`] points. This customization is only applicable for line, column, and area type sparklines. diff --git a/chart-sdk/react/sparkline-charts/user-interaction.md b/chart-sdk/react/sparkline-charts/user-interaction.md index d4b54de96..fa5ff9b95 100644 --- a/chart-sdk/react/sparkline-charts/user-interaction.md +++ b/chart-sdk/react/sparkline-charts/user-interaction.md @@ -1,14 +1,14 @@ --- layout: post -title: User interaction in React Sparkline component | Syncfusion -description: Learn here all about User interaction in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more. +title: User Interaction in React Sparkline Charts | Syncfusion +description: Enable hover tooltips with custom format and template, plus track lines, on the Syncfusion React Sparkline Charts to highlight nearby data points. control: User interaction platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# User interaction in React Sparkline component +# User Interaction in React Sparkline Charts Sparkline has two user interaction features: tooltip and tracker line. diff --git a/chart-sdk/react/stock-charts/accessibility.md b/chart-sdk/react/stock-charts/accessibility.md index 256d03206..47bbb9c96 100644 --- a/chart-sdk/react/stock-charts/accessibility.md +++ b/chart-sdk/react/stock-charts/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React Stock chart component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. -control: Accessibility +title: Accessibility in React Stock Charts | Syncfusion +description: Learn how the Syncfusion React Stock Charts Component supports accessibility with WAI-ARIA, Section 508, WCAG 2.2, and keyboard navigation. +control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React Stock chart component +# Accessibility in React Stock Charts The Stock chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/react/stock-charts/appearance.md b/chart-sdk/react/stock-charts/appearance.md index 0dbf69595..80ddde1ae 100644 --- a/chart-sdk/react/stock-charts/appearance.md +++ b/chart-sdk/react/stock-charts/appearance.md @@ -1,14 +1,14 @@ --- layout: post -title: Appearance in React Stock chart component | Syncfusion -description: Learn here all about Appearance in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. -control: Appearance +title: Appearance in React Stock Charts | Syncfusion +description: Learn how to customize the appearance of the Syncfusion React Stock Charts Component with custom title and theme. +control: Appearance platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in React Stock chart component +# Appearance in React Stock Charts ## Stock Chart Title diff --git a/chart-sdk/react/stock-charts/axis-customization.md b/chart-sdk/react/stock-charts/axis-customization.md index 30b4a5b22..5bdbaeff1 100644 --- a/chart-sdk/react/stock-charts/axis-customization.md +++ b/chart-sdk/react/stock-charts/axis-customization.md @@ -1,14 +1,14 @@ --- layout: post -title: Axis customization in React Stock chart component | Syncfusion -description: Learn here all about Axis customization in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. +title: Axis Customization in React Stock Charts | Syncfusion +description: Learn how to customize the axes in the Syncfusion React Stock Charts Component with titles, tick lines, grid lines, and opposed position options. control: Axis customization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in React Stock chart component +# Axis Customization in React Stock Charts ## Axis Crossing diff --git a/chart-sdk/react/stock-charts/axis-types.md b/chart-sdk/react/stock-charts/axis-types.md index c6bde71ba..703696b74 100644 --- a/chart-sdk/react/stock-charts/axis-types.md +++ b/chart-sdk/react/stock-charts/axis-types.md @@ -1,7 +1,7 @@ --- layout: post -title: Axis types in React Stock chart component | Syncfusion -description: Learn here all about Axis types in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. +title: Axis Types in React Stock Charts | Syncfusion +description: Learn how to use datetime and logarithmic axis types in the Syncfusion React Stock Charts Component for plotting financial time-series data. control: Axis types platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis types in React Stock chart component +# Axis Types in React Stock Charts ## DateTime axis diff --git a/chart-sdk/react/stock-charts/chart-dimensions.md b/chart-sdk/react/stock-charts/chart-dimensions.md index 90ead70ed..e142aac8f 100644 --- a/chart-sdk/react/stock-charts/chart-dimensions.md +++ b/chart-sdk/react/stock-charts/chart-dimensions.md @@ -1,14 +1,14 @@ --- layout: post -title: Chart dimensions in React Stock chart component | Syncfusion -description: Learn here all about Chart dimensions in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. +title: Chart Dimensions in React Stock Charts | Syncfusion +description: Learn how to set the Syncfusion React Stock Charts Component size to a fixed container or a custom width and height using CSS or inline style. control: Chart dimensions platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart dimensions in React Stock chart component +# Chart Dimensions in React Stock Charts ## Size for Container diff --git a/chart-sdk/react/stock-charts/cross-hair.md b/chart-sdk/react/stock-charts/cross-hair.md index 87f2d0d04..908eaeb06 100644 --- a/chart-sdk/react/stock-charts/cross-hair.md +++ b/chart-sdk/react/stock-charts/cross-hair.md @@ -1,14 +1,14 @@ --- layout: post -title: Cross hair in React Stock chart component | Syncfusion -description: Learn here all about Cross hair in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. -control: Cross hair +title: Crosshair in React Stock Charts | Syncfusion +description: Learn how to enable crosshair on the Syncfusion React Stock Charts Component to show vertical and horizontal lines at the cursor position. +control: Cross hair platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Cross hair in React Stock chart component +# Crosshair in React Stock Charts Crosshair has a vertical and horizontal line to view the value of the axis at mouse or touch position. diff --git a/chart-sdk/react/stock-charts/export-print.md b/chart-sdk/react/stock-charts/export-print.md index 19f6e3cbe..5f7886671 100644 --- a/chart-sdk/react/stock-charts/export-print.md +++ b/chart-sdk/react/stock-charts/export-print.md @@ -1,14 +1,14 @@ --- layout: post -title: Export print in React Stock chart component | Syncfusion -description: Learn here all about Export print in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. +title: Export and Print in React Stock Charts | Syncfusion +description: Learn how to export and print the Syncfusion React Stock Charts Component to PDF, image, or SVG using the public export and print methods. control: Export print platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Export print in React Stock chart component +# Export and Print in React Stock Charts The rendered stock chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format using the export dropdown button in the period selector toolbar. You can choose the required format using the export dropdown button in stock-chart. diff --git a/chart-sdk/react/stock-charts/getting-started.md b/chart-sdk/react/stock-charts/getting-started.md index fbe855336..525ab3bae 100644 --- a/chart-sdk/react/stock-charts/getting-started.md +++ b/chart-sdk/react/stock-charts/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with React Stock Chart Component | Syncfusion -description: Check out and learn about getting started with Syncfusion Essential React Stock Chart component, its elements, and more details. +title: Getting Started with React Stock Charts | Syncfusion +description: Learn how to get started with the Syncfusion React Stock Charts Component. Explore setup, features, examples, and customization options. control: Getting started platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with React Stock Chart Component +# Getting Started with React Stock Charts This section describes the steps to create a simple Stock Chart component. diff --git a/chart-sdk/react/stock-charts/gradient.md b/chart-sdk/react/stock-charts/gradient.md index 722d2062a..a36a899e6 100644 --- a/chart-sdk/react/stock-charts/gradient.md +++ b/chart-sdk/react/stock-charts/gradient.md @@ -1,7 +1,7 @@ --- layout: post -title: Gradient in React Stock chart component | Syncfusion -description: Learn here all about Gradient in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. +title: Gradient in React Stock Charts | Syncfusion +description: Learn how to apply linear and radial gradients to the Syncfusion React Stock Charts Component series and indicators for richer visual styling. control: Gradient platform: chart-sdk documentation: ug @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Gradient in React Stock chart control +# Gradient in React Stock Charts diff --git a/chart-sdk/react/stock-charts/legend.md b/chart-sdk/react/stock-charts/legend.md index 0cdbbd39b..a2c514cf6 100644 --- a/chart-sdk/react/stock-charts/legend.md +++ b/chart-sdk/react/stock-charts/legend.md @@ -1,14 +1,14 @@ --- layout: post -title: Legend in React Stock chart component | Syncfusion -description: Learn here all about Legend in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. +title: Legend in React Stock Charts | Syncfusion +description: Learn how to enable the legend in the Syncfusion React Stock Charts Component to identify each series, with options for position, shape, and paging. control: Legend platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in React Stock chart component +# Legend in React Stock Charts Legend provides information about the series rendered in the Stock Chart. Legend can be added to a Stock Chart by enabling the [`visible`](https://ej2.syncfusion.com/react/documentation/api/stock-chart/legendSettings#visible) option in the [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/stock-chart/legendSettings). diff --git a/chart-sdk/react/stock-charts/period-selector.md b/chart-sdk/react/stock-charts/period-selector.md index 2d1503ffb..c7668ce64 100644 --- a/chart-sdk/react/stock-charts/period-selector.md +++ b/chart-sdk/react/stock-charts/period-selector.md @@ -1,14 +1,14 @@ --- layout: post -title: Period selector in React Stock chart component | Syncfusion -description: Learn here all about Period selector in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. +title: Period Selector in React Stock Charts | Syncfusion +description: Learn how to add a period selector to the Syncfusion React Stock Charts Component for quick presets. control: Period selector platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Period selector in React Stock chart component +# Period Selector in React Stock Charts The period selector allows to select a range with specified periods. By default the period selector is enabled in stock chart. diff --git a/chart-sdk/react/stock-charts/range-selector.md b/chart-sdk/react/stock-charts/range-selector.md index ac2e07a51..88f392949 100644 --- a/chart-sdk/react/stock-charts/range-selector.md +++ b/chart-sdk/react/stock-charts/range-selector.md @@ -1,14 +1,14 @@ --- layout: post -title: Range selector in React Stock chart component | Syncfusion -description: Learn here all about Range selector in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. +title: Range Selector in React Stock Charts | Syncfusion +description: Learn how to enable the range selector on the Syncfusion React Stock Charts Component to select a range by dragging thumbs, tapping labels, or using a date range. control: Range selector platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Range selector in React Stock chart component +# Range Selector in React Stock Charts The left and right thumb of RangeNavigator are used to indicate the selected range in the large collection of data. Following are the ways you can select a range. diff --git a/chart-sdk/react/stock-charts/series-types.md b/chart-sdk/react/stock-charts/series-types.md index 67836c664..9fd2d517f 100644 --- a/chart-sdk/react/stock-charts/series-types.md +++ b/chart-sdk/react/stock-charts/series-types.md @@ -1,14 +1,14 @@ --- layout: post -title: Series types in React Stock chart component | Syncfusion -description: Learn here all about Series types in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. -control: Series types +title: Series Types in React Stock Charts | Syncfusion +description: Learn how to render line, candle, OHLC, HLC, area, and spline series in the Syncfusion React Stock Charts Component for financial data. +control: Series types platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Series types in React Stock chart component +# Series Types in React Stock Charts Essential® JS 2 StockChart supports 6 major types of series namely `Line`, `Spline`, `Hilo`, `HiloOpenClose`, `Hollow Candle` and `Candle` . By using the series dropdown button you can navigate between the above listed series types. diff --git a/chart-sdk/react/stock-charts/stock-events.md b/chart-sdk/react/stock-charts/stock-events.md index 622e2a675..24a7b44a3 100644 --- a/chart-sdk/react/stock-charts/stock-events.md +++ b/chart-sdk/react/stock-charts/stock-events.md @@ -1,7 +1,7 @@ --- layout: post -title: Stock events in React Stock chart component | Syncfusion -description: Learn here all about Stock events in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. +title: Stock Events in React Stock Charts | Syncfusion +description: Learn how to add stock events to the Syncfusion React Stock Charts Component to mark specific data points with custom values and limit them to a particular series. control: Stock events platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Stock events in React Stock chart component +# Stock Events in React Stock Charts Stock Events visualizes stock events in stock chart. 'SplineSeries' is used to represent selected data value. You can customize the specific data value using `stockEvents` event. diff --git a/chart-sdk/react/stock-charts/technical-indicators.md b/chart-sdk/react/stock-charts/technical-indicators.md index f6e07d98c..708666eba 100644 --- a/chart-sdk/react/stock-charts/technical-indicators.md +++ b/chart-sdk/react/stock-charts/technical-indicators.md @@ -1,15 +1,15 @@ --- layout: post -title: Technical indicators in React Stock chart component | Syncfusion -description: Learn here all about Technical indicators in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. -control: Technical indicators +title: Technical Indicators in React Stock Charts | Syncfusion +description: Learn how to add technical indicators to the Syncfusion React Stock Charts Component, including SMA, EMA, RSI, MACD, and Bollinger Bands. +control: Technical indicators platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Technical indicators in React Stock chart component +# Technical Indicators in React Stock Charts A technical indicator is a mathematical calculation based on historic price, volume or open interest information that aims to forecast financial market direction. diff --git a/chart-sdk/react/stock-charts/tool-tip.md b/chart-sdk/react/stock-charts/tool-tip.md index 028a1df52..8f5d90915 100644 --- a/chart-sdk/react/stock-charts/tool-tip.md +++ b/chart-sdk/react/stock-charts/tool-tip.md @@ -1,14 +1,14 @@ --- layout: post -title: Tool tip in React Stock chart component | Syncfusion -description: Learn here all about Tool tip in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. -control: Tool tip +title: Tooltip in React Stock Charts | Syncfusion +description: Learn how to enable and customize tooltips on the Syncfusion React Stock Charts Component with template, and shared tooltip options. +control: Tooltip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip in React Stock chart component +# Tooltip in React Stock Charts diff --git a/chart-sdk/react/stock-charts/trend-lines.md b/chart-sdk/react/stock-charts/trend-lines.md index e51ee7984..d0baea4a8 100644 --- a/chart-sdk/react/stock-charts/trend-lines.md +++ b/chart-sdk/react/stock-charts/trend-lines.md @@ -1,15 +1,15 @@ --- layout: post -title: Trend lines in React Stock chart component | Syncfusion -description: Learn here all about Trend lines in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. -control: Trend lines +title: Trendlines in React Stock Charts | Syncfusion +description: Learn how to add trendlines to the Syncfusion React Stock Charts Component to show the direction and speed of a price trend over time. +control: Trendlines platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Trend lines in React Stock chart component +# Trendlines in React Stock Charts Trendlines are used to show the direction and speed of price. diff --git a/chart-sdk/react/stock-charts/working-with-data.md b/chart-sdk/react/stock-charts/working-with-data.md index 68450b8a2..2545b78ee 100644 --- a/chart-sdk/react/stock-charts/working-with-data.md +++ b/chart-sdk/react/stock-charts/working-with-data.md @@ -1,7 +1,7 @@ --- layout: post -title: Working with data in React Stock chart component | Syncfusion -description: Learn here all about Working with data in Syncfusion React Stock chart component of Syncfusion Essential JS 2 and more. +title: Working with Data in React Stock Charts | Syncfusion +description: Learn how to bind JSON data to the Syncfusion React Stock Charts Component by mapping fields to date, open, high, low, and close. control: Working with data platform: chart-sdk documentation: ug @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Working with data in React Stock chart component +# Working with Data in React Stock Charts Stock Chart can visualizes data bound from local or remote data. diff --git a/chart-sdk/react/treemap/accessibility.md b/chart-sdk/react/treemap/accessibility.md index 556ceca1b..80c9caf59 100644 --- a/chart-sdk/react/treemap/accessibility.md +++ b/chart-sdk/react/treemap/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in React TreeMap component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React TreeMap component of Syncfusion Essential JS 2 and more. +title: Accessibility in React TreeMap | Syncfusion +description: Learn how the Syncfusion React TreeMap meets WCAG 2.2, Section 508, ADA, and keyboard navigation accessibility standards. control: Accessibility platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in React TreeMap component +# Accessibility in React TreeMap The TreeMap component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/react/treemap/color-mapping.md b/chart-sdk/react/treemap/color-mapping.md index 2a5802217..ad725aad5 100644 --- a/chart-sdk/react/treemap/color-mapping.md +++ b/chart-sdk/react/treemap/color-mapping.md @@ -1,14 +1,14 @@ --- layout: post -title: Color mapping in React Treemap component | Syncfusion -description: Learn here all about Color mapping in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Color Mapping in React TreeMap | Syncfusion +description: Learn how to apply color mapping in the Syncfusion React TreeMap using range, equal, desaturation, and palette modes for items. control: Color mapping platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Color mapping in React Treemap component +# Color Mapping in React TreeMap ## Apply color mapping diff --git a/chart-sdk/react/treemap/data-binding.md b/chart-sdk/react/treemap/data-binding.md index 15ac8ca71..8cb5a38d6 100644 --- a/chart-sdk/react/treemap/data-binding.md +++ b/chart-sdk/react/treemap/data-binding.md @@ -1,20 +1,20 @@ --- layout: post -title: Data binding in React Treemap component | Syncfusion -description: Learn here all about Data binding in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Data Binding in React TreeMap | Syncfusion +description: Learn how to bind flat or hierarchical data sources to the Syncfusion React TreeMap using the dataSource property. control: Data binding platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data binding in React Treemap component +# Data Binding in React TreeMap The TreeMap control supports data binding using the dataSource property. ## Populate data -The [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treemap/#datasource) property accepts collection values as input. For example, a list of objects can be provided as input. Data can be given as either flat or hierarchical collection to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treemap/#datasource) property. +The [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treemap#datasource) property accepts collection values as input. For example, a list of objects can be provided as input. Data can be given as either flat or hierarchical collection to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treemap#datasource) property. diff --git a/chart-sdk/react/treemap/data-label.md b/chart-sdk/react/treemap/data-label.md index a2870bcc8..cffa528a2 100644 --- a/chart-sdk/react/treemap/data-label.md +++ b/chart-sdk/react/treemap/data-label.md @@ -1,14 +1,14 @@ --- layout: post -title: Data label in React Treemap component | Syncfusion -description: Learn here all about Data label in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Data Label in React TreeMap | Syncfusion +description: Learn how to show and format data labels on items and groups in the Syncfusion React TreeMap with labelPath and labelFormat. control: Data label platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data label in React Treemap component +# Data Label in React TreeMap Data Labels are used to identify the name of items or groups in the TreeMap component. Data Labels will be shown by specifying the data source properties in the [`labelPath`](https://ej2.syncfusion.com/react/documentation/api/treemap/leafItemSettingsModel#labelpath) of the [`leafItemSettings`](https://ej2.syncfusion.com/react/documentation/api/treemap#leafitemsettings). diff --git a/chart-sdk/react/treemap/drilldown.md b/chart-sdk/react/treemap/drilldown.md index ff540ebf4..3950052f4 100644 --- a/chart-sdk/react/treemap/drilldown.md +++ b/chart-sdk/react/treemap/drilldown.md @@ -1,14 +1,14 @@ --- layout: post -title: Drilldown in React Treemap component | Syncfusion -description: Learn here all about Drilldown in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Drilldown in React TreeMap | Syncfusion +description: Learn how to enable drill-down in the Syncfusion React TreeMap to navigate hierarchical data by clicking items. control: Drilldown platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Drilldown in React Treemap component +# Drilldown in React TreeMap The TreeMap supports drill-down to expose the hierarchy, achieved by clicking a node. If an item is clicked in the TreeMap, it will be moved to the next level or sub level hierarchy and returned back to the previous level by clicking the node. diff --git a/chart-sdk/react/treemap/ej1-api-migration.md b/chart-sdk/react/treemap/ej1-api-migration.md index 8119d0b2e..328f2645d 100644 --- a/chart-sdk/react/treemap/ej1-api-migration.md +++ b/chart-sdk/react/treemap/ej1-api-migration.md @@ -1,14 +1,14 @@ --- layout: post -title: Ej1 api migration in React Treemap component | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Migration from EJ1 in React TreeMap | Syncfusion +description: Migrate apps from Syncfusion Essential JS 1 to the React TreeMap with the equivalent EJ2 API mapping for properties and events. control: Ej1 api migration platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in React Treemap component +# Migration from EJ1 in React TreeMap This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/react/treemap/getting-started.md b/chart-sdk/react/treemap/getting-started.md index 859014524..c54f83c05 100644 --- a/chart-sdk/react/treemap/getting-started.md +++ b/chart-sdk/react/treemap/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting Started with React TreeMap component | Syncfusion -description: Checkout and learn about getting started with the React TreeMap component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React TreeMap | Syncfusion +description: Learn how to get started with the Syncfusion React TreeMap control. Explore setup, features, examples, and customization options. control: Getting started platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with React TreeMap Component +# Getting Started with React TreeMap This document explains the steps required to create and render a TreeMap component and demonstrates the component's basic usage. diff --git a/chart-sdk/react/treemap/how-to/drilldown-with-label.md b/chart-sdk/react/treemap/how-to/drilldown-with-label.md index ae264b353..9ac26ce02 100644 --- a/chart-sdk/react/treemap/how-to/drilldown-with-label.md +++ b/chart-sdk/react/treemap/how-to/drilldown-with-label.md @@ -1,14 +1,14 @@ --- layout: post -title: Drilldown with label in React Treemap component | Syncfusion -description: Learn here all about Drilldown with label in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: How to drilldown with label in React TreeMap | Syncfusion +description: Learn how to add a label template to nodes on drill-down in the Syncfusion React TreeMap using a div template. control: Drilldown with label platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Drilldown with label in React Treemap component +# How to drilldown with label in React TreeMap Yon can add a label template as
element to the treemap control when using the label template. To add a label template to the tree map control, you have to hide another labels by setting the `showLabels` property to **false** in `leafItemSettings` to show only the label template. diff --git a/chart-sdk/react/treemap/how-to/drilldown.md b/chart-sdk/react/treemap/how-to/drilldown.md index c197d5ba3..3326c436d 100644 --- a/chart-sdk/react/treemap/how-to/drilldown.md +++ b/chart-sdk/react/treemap/how-to/drilldown.md @@ -1,14 +1,14 @@ --- layout: post -title: Drilldown customization in React Treemap component | Syncfusion -description: Learn here all about Drilldown customization in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: How to customize drilldown in React TreeMap | Syncfusion +description: Learn how to customize the header on drill-down in the Syncfusion React TreeMap to show population details for a node. control: Drilldown platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Drilldown customization in React Treemap component +# How to customize drilldown in React TreeMap ## Customize the header for treemap drilldown diff --git a/chart-sdk/react/treemap/internationalization.md b/chart-sdk/react/treemap/internationalization.md index 1f46c458d..a0b3dbe67 100644 --- a/chart-sdk/react/treemap/internationalization.md +++ b/chart-sdk/react/treemap/internationalization.md @@ -1,14 +1,14 @@ --- layout: post -title: Internationalization in React Treemap component | Syncfusion -description: Learn here all about Internationalization in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Internationalization in React TreeMap | Syncfusion +description: Learn how to globalize data labels and tooltips in the Syncfusion React TreeMap using the format property and locale support. control: Internationalization platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in React Treemap component +# Internationalization in React TreeMap The TreeMap control supports internationalization for the following elements: @@ -21,7 +21,7 @@ For more information about number and date formatter, refer to [`internationaliz ## Globalization -Globalization is the process of designing and developing a component that works in different cultures/locales. Internationalization library is used to globalize number, date, and time values in the TreeMap control using the [`format`](https://ej2.syncfusion.com/react/documentation/api/treemap/#format) property in the TreeMap. +Globalization is the process of designing and developing a component that works in different cultures/locales. Internationalization library is used to globalize number, date, and time values in the TreeMap control using the [`format`](https://ej2.syncfusion.com/react/documentation/api/treemap#format) property in the TreeMap. **Numeric format** diff --git a/chart-sdk/react/treemap/layout.md b/chart-sdk/react/treemap/layout.md index a1963c875..735029719 100644 --- a/chart-sdk/react/treemap/layout.md +++ b/chart-sdk/react/treemap/layout.md @@ -1,16 +1,16 @@ --- layout: post -title: Layout in React Treemap component | Syncfusion -description: Learn here all about Layout in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Layout in React TreeMap | Syncfusion +description: Learn how to render the Syncfusion React TreeMap with Squarified, SliceAndDiceVertical, SliceAndDiceHorizontal, or SliceAndDiceAuto layouts. control: Layout platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Layout in React Treemap component +# Layout in React TreeMap -Determine the visual representation of nodes belonging to all the TreeMap levels using the [`layoutType`](https://ej2.syncfusion.com/react/documentation/api/treemap/#layouttype) property. +Determine the visual representation of nodes belonging to all the TreeMap levels using the [`layoutType`](https://ej2.syncfusion.com/react/documentation/api/treemap#layouttype) property. ## Types of layout diff --git a/chart-sdk/react/treemap/leaf-item.md b/chart-sdk/react/treemap/leaf-item.md index e1a2f59b7..a13455356 100644 --- a/chart-sdk/react/treemap/leaf-item.md +++ b/chart-sdk/react/treemap/leaf-item.md @@ -1,14 +1,14 @@ --- layout: post -title: Leaf item in React Treemap component | Syncfusion -description: Learn here all about Leaf item in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Leaf Item in React TreeMap | Syncfusion +description: Learn how to configure leaf items, labels, and styles in the Syncfusion React TreeMap using leafItemSettings. control: Leaf item platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Leaf item in React Treemap component +# Leaf Item in React TreeMap A leaf item defines a visualized data element and does not contain child nodes but contains parent node if the levels are specified in the TreeMap. diff --git a/chart-sdk/react/treemap/legend.md b/chart-sdk/react/treemap/legend.md index 5dea799c1..9ddfb2e21 100644 --- a/chart-sdk/react/treemap/legend.md +++ b/chart-sdk/react/treemap/legend.md @@ -1,14 +1,14 @@ --- layout: post -title: Legend in React Treemap component | Syncfusion -description: Learn here all about Legend in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Legend in React TreeMap | Syncfusion +description: Learn how to enable and customize legends in the Syncfusion React TreeMap for position, shape, and interactive item identification. control: Legend platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in React Treemap component +# Legend in React TreeMap Legend is used to provide valuable information for interpreting what the TreeMap displays. The legends can be represented in various colors, shapes or other identifiers based on the data. diff --git a/chart-sdk/react/treemap/levels.md b/chart-sdk/react/treemap/levels.md index 68348a8ad..a92f74cae 100644 --- a/chart-sdk/react/treemap/levels.md +++ b/chart-sdk/react/treemap/levels.md @@ -1,24 +1,24 @@ --- layout: post -title: Levels in React Treemap component | Syncfusion -description: Learn here all about Levels in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. -control: Levels +title: Levels in React TreeMap | Syncfusion +description: Learn how to add multiple hierarchical levels to the Syncfusion React TreeMap using the groupPath property in levelSettings. +control: Levels platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Levels in React Treemap component +# Levels in React TreeMap -TreeMap supports **n** number of levels and each level is separated by using the [`groupPath`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel/#grouppath) property. +TreeMap supports **n** number of levels and each level is separated by using the [`groupPath`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel#grouppath) property. ## Group path -The [`groupPath`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel/#grouppath) property is used to separate each level of the TreeMap by specifying the property from the data source. +The [`groupPath`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel#grouppath) property is used to separate each level of the TreeMap by specifying the property from the data source. -In the following example, three levels are added and each level is configured using the [`groupPath`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel/#grouppath) property. +In the following example, three levels are added and each level is configured using the [`groupPath`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel#grouppath) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -35,7 +35,7 @@ In the following example, three levels are added and each level is configured us ## Group gap -The [`groupGap`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel/#groupgap) property is used to separate an item from each group or another item to differentiate the levels mentioned in the TreeMap. +The [`groupGap`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel#groupgap) property is used to separate an item from each group or another item to differentiate the levels mentioned in the TreeMap. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -52,7 +52,7 @@ The [`groupGap`](https://ej2.syncfusion.com/react/documentation/api/treemap/leve ## Header format and Alignment -Customize header using the [`headerFormat`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel/#headerformat) property in which fields are mapping from the dataSource and align header using the [`headerAlignment`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel/#headeralignment) property. +Customize header using the [`headerFormat`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel#headerformat) property in which fields are mapping from the dataSource and align header using the [`headerAlignment`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel#headeralignment) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -67,7 +67,7 @@ Customize header using the [`headerFormat`](https://ej2.syncfusion.com/react/doc ## Header height and style -Customize the font color, family, weight, opacity and size using the [`headerStyle`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel/#headerstyle). Based on the font settings, the header height is given using the [`headerHeight`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel/#headerheight) property in [`levels`](https://ej2.syncfusion.com/react/documentation/api/treemap/#levels). +Customize the font color, family, weight, opacity and size using the [`headerStyle`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel#headerstyle). Based on the font settings, the header height is given using the [`headerHeight`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel#headerheight) property in [`levels`](https://ej2.syncfusion.com/react/documentation/api/treemap#levels). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -82,7 +82,7 @@ Customize the font color, family, weight, opacity and size using the [`headerSty ## Header template and position -The TreeMap header supports to customize header of each item using the [`headerTemplate`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel/#headertemplate) property. It uses Essential JS2 Template engine to render the elements. You can position the template using the [`templatePosition`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel/#templateposition) property. +The TreeMap header supports to customize header of each item using the [`headerTemplate`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel#headertemplate) property. It uses Essential JS2 Template engine to render the elements. You can position the template using the [`templatePosition`](https://ej2.syncfusion.com/react/documentation/api/treemap/levelSettingsModel#templateposition) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/treemap/print-and-export.md b/chart-sdk/react/treemap/print-and-export.md index 7684cd19c..031e8e2a3 100644 --- a/chart-sdk/react/treemap/print-and-export.md +++ b/chart-sdk/react/treemap/print-and-export.md @@ -1,14 +1,14 @@ --- layout: post -title: Print and export in React Treemap component | Syncfusion -description: Learn here all about Print and export in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Print and Export in React TreeMap | Syncfusion +description: Learn how to print and export the Syncfusion React TreeMap as PDF or image using the Print and Export modules. control: Print and export platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and export in React Treemap component +# Print and Export in React TreeMap ## Print diff --git a/chart-sdk/react/treemap/selection-and-highlight.md b/chart-sdk/react/treemap/selection-and-highlight.md index d29cf9456..c73e86ab5 100644 --- a/chart-sdk/react/treemap/selection-and-highlight.md +++ b/chart-sdk/react/treemap/selection-and-highlight.md @@ -1,14 +1,14 @@ --- layout: post -title: Selection and highlight in React Treemap component | Syncfusion -description: Learn here all about Selection and highlight in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Selection and Highlight in React TreeMap | Syncfusion +description: Learn how to select and highlight items and groups in the Syncfusion React TreeMap using selectionSettings and highlightSettings. control: Selection and highlight platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selection and highlight in React Treemap component +# Selection and Highlight in React TreeMap ## Selection diff --git a/chart-sdk/react/treemap/tooltip.md b/chart-sdk/react/treemap/tooltip.md index 66fef7e3e..d2c0d21bd 100644 --- a/chart-sdk/react/treemap/tooltip.md +++ b/chart-sdk/react/treemap/tooltip.md @@ -1,14 +1,14 @@ --- layout: post -title: Tooltip in React Treemap component | Syncfusion -description: Learn here all about Tooltip in Syncfusion React Treemap component of Syncfusion Essential JS 2 and more. +title: Tooltip in React TreeMap | Syncfusion +description: Learn how to enable and customize tooltips in the Syncfusion React TreeMap to show item details on hover. control: Tooltip platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in React Treemap component +# Tooltip in React TreeMap Tooltip is used to display details about the items in the TreeMap. When space constraints prevent us from displaying the information using Data Labels, the tooltip comes in handy.