diff --git a/chart-sdk/react/charts/accessibility.md b/chart-sdk/react/charts/accessibility.md index c57b2a848..5b193829b 100644 --- a/chart-sdk/react/charts/accessibility.md +++ b/chart-sdk/react/charts/accessibility.md @@ -41,11 +41,16 @@ The Chart component's accessibility compliance is outlined below. ## WAI-ARIA attributes -The Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert) patterns to meet the accessibility. The following ARIA attributes are used in the Chart component: +The Chart component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert) patterns to meet the accessibility requirements. The following ARIA attributes are used in the Chart component: + +**Roles:** * img (role) * button (role) * region (role) + +**Attributes:** + * aria-label (attribute) * aria-hidden (attribute) * aria-pressed (attribute) @@ -58,15 +63,15 @@ The Chart component follows the [keyboard interaction](https://www.w3.org/WAI/AR | Alt + J | Moves the focus to the chart element. | | Tab | Moves the focus to the next element in the chart. | | Shift + Tab | Moves the focus to the previous element in the chart. | -| Down Arrow | Moves the focus to the data point left side from the selected point. | -| Up Arrow | Moves the focus to the data point right side from the selected point. | -| Left Arrow | Moves the focus to the next series in the chart. | -| Right Arrow | Moves the focus to the previous series in the chart. | -| ESC | Cancel the tooltip for the data point. | +| Down Arrow | Moves the focus to the next data point from the selected point. | +| Up Arrow | Moves the focus to the previous data point from the selected point. | +| Left Arrow | Moves the focus to the previous series in the chart. | +| Right Arrow | Moves the focus to the next series in the chart. | +| ESC | Cancels the tooltip for the data point. | | Enter/Space | Selects the data point in the series. | -| Down/Left Arrow | Moves the focus to the legend left side from the selected legend. | -| Up/Right Arrow | Moves the focus to the legend right side from the selected legend. | -| Enter/Space | Toggles the visibility of the corresponding series. | +| Down/Left Arrow | When a legend item is focused, moves the focus to the previous legend item. | +| Up/Right Arrow | When a legend item is focused, moves the focus to the next legend item. | +| Enter/Space | When a legend item is focused, toggles the visibility of the corresponding series. | | Ctrl + + | Zoom in the chart. | | Ctrl + - | Zoom out the chart. | | Down/Up Arrow | Pan the chart vertically. | @@ -84,4 +89,5 @@ The accessibility compliance of the Chart component is shown in the following sa ## See also -* [Accessibility in Syncfusion® React components](https://ej2.syncfusion.com/react/documentation/common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® React components](../common/accessibility) +* [Accessibility customization in React Chart component](./advanced-accessibility-configuration) \ No newline at end of file diff --git a/chart-sdk/react/charts/advanced-accessibility-configuration.md b/chart-sdk/react/charts/advanced-accessibility-configuration.md index 1e0f64798..288015a15 100644 --- a/chart-sdk/react/charts/advanced-accessibility-configuration.md +++ b/chart-sdk/react/charts/advanced-accessibility-configuration.md @@ -10,9 +10,11 @@ domainurl: https://help.syncfusion.com/chart-sdk # Accessibility customization in React Chart component -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. +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. This section describes the primary accessibility attributes. -The chart component exposes attributes that enable accessibility customization, including: +> Before customizing accessibility attributes, ensure that the Chart component's accessibility is enabled (it is enabled by default). For more details, see [Accessibility in React Chart component](./accessibility). + +The Chart component exposes attributes that enable accessibility customization, including: * [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the chart, improving support for screen readers. * [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the chart, helping screen readers to identify the element appropriately. @@ -68,7 +70,7 @@ The [`series`](https://ej2.syncfusion.com/react/documentation/api/chart#series) ## Title and subtitle -In the React chart control, the [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#subtitlestyle) attributes allow you to customize the accessibility of the chart's title and subtitle. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#accessibility) properties in [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#subtitlestyle) can be customized for accessibility: +In the React Chart component, the [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#subtitlestyle) attributes allow you to customize the accessibility of the chart's title and subtitle. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#accessibility) properties in [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#subtitlestyle) can be customized: * [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the chart title and subtitle, enhancing support for screen readers. * [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the chart title and subtitle, helping screen readers to identify the element appropriately. @@ -94,7 +96,7 @@ In the React chart control, the [`titleStyle`](https://ej2.syncfusion.com/react/ ## Annotations -The [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#annotations) property allows you to add annotations to the chart in specific regions. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAnnotationSettingsModel#accessibility) properties in [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#annotations) can be customized for accessibility: +The [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#annotations) property allows you to add descriptive text to specific regions of the chart. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAnnotationSettingsModel#accessibility) properties in [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#annotations) can be customized: * [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the annotation, enhancing support for screen readers. * [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the annotation, helping screen readers to identify the element appropriately. @@ -120,7 +122,7 @@ The [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#ann ## Trendline -The [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart#trendlinemodule) property allows you to display trends in the data. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#accessibility) properties in [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart#trendlinemodule) can be customized for accessibility: +The [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel) property allows you to display trends in the data. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#accessibility) properties in [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel) can be customized for accessibility: * [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the trendline, enhancing support for screen readers. * [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the trendline, helping screen readers to identify the element appropriately. @@ -140,7 +142,7 @@ The [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart#tren ## Zooming -The [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zoomsettings) attributes allow you to adjust the chart's zooming capability. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/zoomSettingsModel#accessibility) properties in [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zoomsettings) offer the parameters for accessibility customization: +The [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zoomsettings) attributes allow you to adjust the chart's zooming capability. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/zoomSettingsModel#accessibility) properties in [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zoomsettings) can be customized: * [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the zoom toolkit items, enhancing support for screen readers. * [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the zoom toolkit items, helping screen readers to identify the element appropriately. @@ -160,7 +162,7 @@ The [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zo ## Technical indicators -The [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indicators) property allows you to analyze the trends and patterns in the data. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#accessibility) properties in [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indicators) can be customized for accessibility: +The [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indicators) property allows you to analyze the trends and patterns in the data. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#accessibility) properties in [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indicators) can be customized: * [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the indicators, enhancing support for screen readers. * [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the indicators, helping screen readers to identify the element appropriately. @@ -186,7 +188,7 @@ The [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indi ## Legend -The [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#legendsettings) provide information about the series shown in the chart. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#legendsettings) can be used to alter the accessibility of the chart's legend: +The [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#legendsettings) provides information about the series shown in the chart. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#legendsettings) can be used to alter the accessibility of the chart's legend: * [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers. * [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context. @@ -208,4 +210,9 @@ The [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart# {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/accessibility-cs8" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/accessibility-cs8" %} + +## See also + +* [Accessibility in React Chart component](./accessibility) +* [Accessibility in Syncfusion® React components](https://ej2.syncfusion.com/react/documentation/common/accessibility) \ No newline at end of file diff --git a/chart-sdk/react/charts/axis-customization.md b/chart-sdk/react/charts/axis-customization.md index 0eddbbe6d..482e9eb76 100644 --- a/chart-sdk/react/charts/axis-customization.md +++ b/chart-sdk/react/charts/axis-customization.md @@ -54,7 +54,7 @@ A title can be added to an axis using the [`title`](https://ej2.syncfusion.com/r ## Title Rotation -The orientation of the axis title can be adjusted using the [`titleRotation`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#titlerotation) property. This property supports rotation values from 0 to 360 degrees, allowing better alignment based on the chart layout and available space. +The orientation of the axis title can be adjusted using the [`titleRotation`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#titlerotation) property. This property supports rotation in degrees, with a default value of `0`, allowing better alignment based on the chart layout and available space. It applies to both the X and Y axes. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -75,7 +75,7 @@ The orientation of the axis title can be adjusted using the [`titleRotation`](ht ## Tick Lines Customization -The appearance of both major and minor tick lines can be customized using the [`majorTickLines`](https://ej2.syncfusion.com/react/documentation/api/chart/majorTickLines) and [`minorTickLines`](https://ej2.syncfusion.com/react/documentation/api/chart/minorTickLines) properties. These properties allow customization of the `width`, `color`, and `size` of tick lines to enhance chart readability. +The appearance of both major and minor tick lines can be customized using the [`majorTickLines`](https://ej2.syncfusion.com/react/documentation/api/chart/majorTickLines) and [`minorTickLines`](https://ej2.syncfusion.com/react/documentation/api/chart/minorTickLines) properties. These properties allow customization of the `width`, `color`, and `height` of tick lines to enhance chart readability. Note that minor tick lines are rendered only when [`minorTicksPerInterval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#minorticksperinterval) is set on the axis. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -96,7 +96,7 @@ The appearance of both major and minor tick lines can be customized using the [` ## Grid Lines Customization -Grid lines can be styled using the [`majorGridLines`](https://ej2.syncfusion.com/react/documentation/api/chart/majorGridLines) and [`minorGridLines`](https://ej2.syncfusion.com/react/documentation/api/chart/minorGridLines) properties. These options support customization of `width`, `color`, and `dashArray`, helping users distinguish data points and scales more effectively. +Grid lines can be styled using the [`majorGridLines`](https://ej2.syncfusion.com/react/documentation/api/chart/majorGridLines) and [`minorGridLines`](https://ej2.syncfusion.com/react/documentation/api/chart/minorGridLines) properties. These options support customization of `width`, `color`, and `dashArray` (for example, `"5,5"` to produce a dashed pattern), helping users distinguish data points and scales more effectively. Note that minor grid lines are rendered only when [`minorTicksPerInterval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#minorticksperinterval) is set on the axis. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -117,7 +117,7 @@ Grid lines can be styled using the [`majorGridLines`](https://ej2.syncfusion.com ## Multiple Axis -In addition to the primary X and Y axes, multiple additional axes can be added to a chart. Each series can be associated with a specific axis by mapping it to the axis using a unique axis name. This is useful for visualizing datasets with different units or scales within the same chart. +In addition to the primary X and Y axes, multiple additional axes can be added to a chart. Each series can be mapped to a specific axis using a unique axis name. This is useful for visualizing datasets with different units or scales within the same chart. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -138,7 +138,7 @@ In addition to the primary X and Y axes, multiple additional axes can be added t ## Inversed Axis -When an axis is inversed, the highest value is displayed closer to the origin, and the lowest value appears farther away. This behavior can be enabled by setting the [`isInversed`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#isinversed) property to `true`. Inversed axes are commonly used in scenarios such as ranking or inverted value representations. +When an axis is inversed, the highest value is displayed closer to the origin, and the lowest value appears farther away. This behavior can be enabled by setting the [`isInversed`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#isinversed) property to `true`. Inverted axes are commonly used in scenarios such as ranking or inverted value representations. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -160,6 +160,7 @@ When an axis is inversed, the highest value is displayed closer to the origin, a ## Opposed Position An axis can be placed on the opposite side of its default position by setting the [`opposedPosition`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#opposedposition) property to `true`. This option is useful when displaying multiple axes or when optimizing space usage in complex chart layouts. + {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/chart-sdk/react/charts/code-path/series/line-cs2/app/index.jsx %} diff --git a/chart-sdk/react/charts/axis-labels.md b/chart-sdk/react/charts/axis-labels.md index 0b6f00faf..0d6956d4a 100644 --- a/chart-sdk/react/charts/axis-labels.md +++ b/chart-sdk/react/charts/axis-labels.md @@ -10,13 +10,13 @@ domainurl: https://help.syncfusion.com/chart-sdk # Axis labels in React Chart component -To get start quickly with Axis Labels in React Charts, you can check on this video: +To get started quickly with Axis Labels in React Charts, you can check on this video: {% youtube "https://www.youtube.com/watch?v=NLrOSKAnxes" %} ## Smart axis labels -When axis labels overlap due to limited space or dense data points, the [`labelIntersectAction`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#labelintersectaction) property can be used to control how the labels are rendered. This helps improve readability by automatically adjusting label visibility or orientation. +When axis labels overlap due to limited space or dense data points, the [`labelIntersectAction`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#labelintersectaction) property can be used to control how the labels are rendered. This helps improve readability by automatically adjusting label visibility or orientation. The supported values are `None`, `Hide`, `Rotate45`, `Rotate90`, `Wrap`, `MultipleRows`, and `Trim`. The default value is `None`. When setting `labelIntersectAction` as `Hide`, overlapping labels are hidden to avoid visual clutter. @@ -77,7 +77,7 @@ When setting `labelIntersectAction` as `Rotate90`, the labels are rotated vertic ## Axis labels positioning -By default, axis labels are positioned `outside` the axis line. Labels can also be placed `inside` the axis line using the `labelPosition` property, which is useful when optimizing space within the chart area. +By default, axis labels are positioned `Outside` the axis line. Labels can also be placed `Inside` the axis line using the `labelPosition` property, which is useful when optimizing space within the chart area. The supported values are `Outside` (default) and `Inside`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -106,11 +106,19 @@ Multiple levels of labels can be displayed on an axis using the `multiLevelLabel • Text style • Border ->Note: To use multilevel label feature, we need to inject`MultiLevelLabel` module into the `services`. +>Note: To use the multilevel label feature, we need to inject `MultiLevelLabel` module into the `services`. + +```jsx +import { MultiLevelLabel } from '@syncfusion/ej2-react-charts'; + + + {/* ... */} + +``` ### Categories -Using the categories property, the `start`, `end`, `text`, and `maximumTextWidth` values of multilevel labels can be configured to define the label range and content. +Using the `categories` property, the `start`, `end`, `text`, and `maximumTextWidth` values of multilevel labels can be configured to define the label range and content. `maximumTextWidth` is specified in pixels and defaults to `100`; if the label text exceeds this width, it will be truncated. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -131,7 +139,7 @@ Using the categories property, the `start`, `end`, `text`, and `maximumTextWidth ### Overflow -Using the `overflow` property, multilevel labels can be configured to either `trim` or `wrap` when the text exceeds the available space. +Using the `overflow` property, multilevel labels can be configured to either `Trim` (default) or `Wrap` when the text exceeds the available space. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -152,7 +160,7 @@ Using the `overflow` property, multilevel labels can be configured to either `tr ### Alignment -The `alignment` property provides options to position multilevel labels at `far`, `center`, or `near` relative to the axis. +The `alignment` property provides options to position multilevel labels at `Far`, `Center` (default), or `Near` relative to the axis. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -173,7 +181,7 @@ The `alignment` property provides options to position multilevel labels at `far` ### Text customization -The `textStyle` property of multilevel labels provides options to customize the `size`, `color`, `fontFamily`, `fontWeight`, `fontStyle`, `opacity`, `textAlignment`, and `textOverflow`. +The `textStyle` property of multilevel labels provides options to customize the `size` (default `'12px'`), `color`, `fontFamily`, `fontWeight`, `fontStyle`, `opacity`, `textAlignment`, and `textOverflow`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -194,7 +202,14 @@ The `textStyle` property of multilevel labels provides options to customize the ### Border customization -Using the `border` property, the `width`, `color`, and `type` of the multilevel label border can be customized. The supported border types are `Rectangle`, `Brace`, `WithoutBorder`, `WithoutTopBorder`, `WithoutTopandBottomBorder`, and `CurlyBrace`. +Using the `border` property, the `width`, `color`, and `type` of the multilevel label border can be customized. The supported border types are: + +- `Rectangle` — a simple rectangular border (default). +- `Brace` — a bracket-style border with curled ends. +- `WithoutBorder` — no border is rendered. +- `WithoutTopBorder` — bottom and side borders only. +- `WithoutTopAndBottomBorder` — only side borders are rendered. +- `CurlyBrace` — a fully curled brace on both ends. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -215,7 +230,12 @@ Using the `border` property, the `width`, `color`, and `type` of the multilevel ## Sorting -The chart’s data source can be sorted using the `sort` method of chart. The arguments that are required to pass to sort method are data of chart. The fields depend on which sorting is performed either `x` or `y`, and the `isDescending` with which data source values are sorted in either `ascending` or `descending`. +The chart’s data source can be sorted using the `sort` method of the chart. The arguments required for the `sort` method are the chart data and a `sortField` object that specifies whether sorting is performed on the `x` or `y` field, along with an `isDescending` flag (default `false`) to sort in `ascending` or `descending` order. The method signature is: + +```jsx +chart.sort(data, 'x', false); // ascending by x +chart.sort(data, 'y', true); // descending by y +``` {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -236,7 +256,7 @@ The chart’s data source can be sorted using the `sort` method of chart. The ar ## Edge label placement -Labels with long text at the edges of an axis may appear partially outside the chart area. To avoid this, use the [`edgeLabelPlacement`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#edgelabelplacement) property in the axis. This property moves the label inside the chart area or hides it for better appearance. By default, the [`edgeLabelPlacement`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#edgelabelplacement) property is set to **Shift**, ensuring that labels are repositioned inside the chart area to prevent overlap. +Labels with long text at the edges of an axis may appear partially outside the chart area. To avoid this, use the [`edgeLabelPlacement`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#edgelabelplacement) property in the axis. This property moves the label inside the chart area or hides it for better appearance. The supported values are `None`, `Shift` (default), and `Hide`. By default, the property is set to **Shift**, ensuring that labels are repositioned inside the chart area to prevent overlap. Use `Hide` to completely hide edge labels. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -257,7 +277,7 @@ Labels with long text at the edges of an axis may appear partially outside the c ## Labels customization -The [`labelStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#labelplacement) property of an axis provides options to customize the `color`, `font-family`, `font-size`, and `font-weight` of axis labels. +The [`labelStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#labelstyle) property of an axis provides options to customize the `color`, `fontFamily`, `size`, and `fontWeight` of axis labels. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -276,9 +296,17 @@ The [`labelStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/axis {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/multiple-cs18" %} -## Customizing specific point +## Customizing individual labels + +Specific axis label text can be customized using the `axisLabelRender` event, which allows conditional formatting or dynamic text updates during label rendering. The event provides an `args` object with properties such as `text`, `value`, `labelStyle`, and `axis`, which can be modified before the label is rendered. -Specific axis label text can be customized using the `axisLabelRender` event, which allows conditional formatting or dynamic text updates during label rendering. +```jsx +const axisLabelRender = (args) => { + if (args.value === 50) { + args.text = 'Custom Label'; + } +}; +``` {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -299,7 +327,7 @@ Specific axis label text can be customized using the `axisLabelRender` event, wh ## Trim using maximum label width -Axis labels can be trimmed when they exceed the available space using the [`enableTrim`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#enabletrim) property. The width of the labels can also be customized using the [`maximumLabelWidth`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#maximumlabelwidth) property. The default maximum label width value is `34`. +Axis labels can be trimmed when they exceed the available space using the [`enableTrim`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#enabletrim) property. The width of the labels can also be customized using the [`maximumLabelWidth`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#maximumlabelwidth) property. The default maximum label width value is `34` (in pixels). The `maximumLabelWidth` value must be greater than `0`; setting it to `0` or a negative value will be ignored. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -320,7 +348,7 @@ Axis labels can be trimmed when they exceed the available space using the [`enab ## Line break support -The line break feature is used to display long axis label text across multiple lines. In the following example, the `x` value in the data source contains long text, which is split into two lines using the `
` tag. +The line break feature is used to display long axis label text across multiple lines. In the following example, the `x` value in the data source contains long text, which is split into two lines using the `
` tag. The `
` tag must be embedded directly in the data string; HTML special characters within label text should be properly escaped to prevent rendering issues. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -341,7 +369,11 @@ The line break feature is used to display long axis label text across multiple l ## Axis label template -The axis label template allows axis labels to be customized using HTML content. This enables conditional styling and the inclusion of dynamic elements such as icons, images, or additional contextual data. This customization is enabled by setting the template content in the [`labelTemplate`](https://ej2.syncfusion.com/react/documentation/api/chart/axismodel#labelTemplate) property of the `AxisModel`. +The axis label template allows axis labels to be customized using HTML content. This enables conditional styling and the inclusion of dynamic elements such as icons, images, or additional contextual data. This customization is enabled by setting the template content in the [`labelTemplate`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#labeltemplate) property of the `AxisModel`. The template string supports placeholders such as `${value}` to reference axis values. + +```jsx +const labelTemplate = '
${value}
'; +``` {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/charts/category-axis.md b/chart-sdk/react/charts/category-axis.md index 08d05c31e..4d51ae5a4 100644 --- a/chart-sdk/react/charts/category-axis.md +++ b/chart-sdk/react/charts/category-axis.md @@ -18,7 +18,7 @@ To get start quickly with React Category Axis, you can check out this video: {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/axis/category-cs1/app/index.jsx %} +{% include code-snippet/chart/code-path/axis/category-cs1/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/chart-sdk/react/charts/code-path/axis/category-cs1/app/index.tsx %} @@ -33,10 +33,9 @@ To get start quickly with React Category Axis, you can check out this video: {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/category-cs1" %} -> Note: To use category axis, we need to inject `Category` module into the `services` and -set the [`valueType`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#valuetype) of axis to Category. +> Note: To use the category axis, you need to inject the `Category` module into the `services` array and set the [`valueType`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#valuetype) of the axis to `Category`. -## Labels Placement +## Label placement By default, category labels are positioned between the axis tick marks. They can also be aligned directly on the ticks by using the [`labelPlacement`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#labelplacement) property. @@ -59,7 +58,7 @@ By default, category labels are positioned between the axis tick marks. They can ## Range -The visible range of the category axis can be customized by using the [`minimum`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#minimum), [`maximum`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#maximum) and [`interval`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#interval) properties of the axis. These properties control the start value, end value, and spacing between category labels. +The visible range of the category axis can be customized by using the [`minimum`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#minimum), [`maximum`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#maximum), and [`interval`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#interval) properties of the axis. These properties control the start value, end value, and spacing between category labels. By default, all categories are displayed. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -80,7 +79,9 @@ The visible range of the category axis can be customized by using the [`minimum ## Indexed category axis -The category axis can also be rendered based on the index values of the data source. This behavior can be enabled by setting the `isIndexed` property of the axis to **true**, which positions data points according to their index instead of their actual category values. +Beyond the default category-by-value behavior, the category axis can also be rendered based on the index values of the data source. This is useful when you have multiple data sources with different category values that need to be aligned on the same axis, or when you want to position data points by their index instead of their actual category values. This behavior can be enabled by setting the [`isIndexed`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#isindexed) property of the axis to `true`. + +> Note: When using an indexed category axis, ensure the `Category` module is injected into the `services` array. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/charts/chart-annotations.md b/chart-sdk/react/charts/chart-annotations.md index e6efe40ba..d93d1749f 100644 --- a/chart-sdk/react/charts/chart-annotations.md +++ b/chart-sdk/react/charts/chart-annotations.md @@ -10,9 +10,24 @@ domainurl: https://help.syncfusion.com/chart-sdk # Chart annotations in React Chart component -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. +Chart annotations let you highlight specific areas of the chart by overlaying text, shapes, images, or custom HTML elements directly inside the chart area. Use annotations to emphasize trends, mark thresholds, call out key data points, or display additional context such as watermarks and footers. -Annotations are added using the `annotations` option. Set the [`content`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAnnotationSettingsModel#content) property to reference the element that should be rendered within the chart. +> Note: To use the annotation feature, inject the `ChartAnnotation` module into the chart `services`. + +## Getting started + +Annotations are added through the [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#annotations) option, which accepts an array of [`AnnotationDirective`](https://ej2.syncfusion.com/react/documentation/api/chart/annotationDirective) items wrapped in [`AnnotationsDirective`](https://ej2.syncfusion.com/react/documentation/api/chart/annotationsDirective). Use the [`content`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAnnotationSettingsModel#content) property to specify what is rendered—either a string (rendered as text) or a function/element (rendered as custom HTML). + +In addition to `content`, the following properties control placement: + +| Property | Type | Default | Description | +| --- | --- | --- | --- | +| `x` | `string` \| `number` | `0` | Horizontal position. A string matches a category value; a number is interpreted in pixels (default) or data values (when `coordinateUnits` is `Point`). | +| `y` | `number` | `0` | Vertical position. Interpreted in pixels or data values based on `coordinateUnits`. | +| `region` | `'Chart'` \| `'Series'` | `'Chart'` | Reference space for the `x` and `y` values. | +| `coordinateUnits` | `'Pixel'` \| `'Point'` | `'Pixel'` | Unit used to interpret `x` and `y`. | + +The following example adds a simple text annotation over a column series. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -31,11 +46,14 @@ Annotations are added using the `annotations` option. Set the [`content`](https: {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/line-cs3" %} -> Note: To use the annotation feature, inject the `ChartAnnotation` module into the `services`. - ## Region -Annotations can be positioned relative to either the overall `Chart` area or a specific `Series`. When placed relative to the chart, the annotation uses the chart’s coordinate system. When placed relative to a series, the annotation aligns with that series' data points. By default, annotations are placed with respect to the chart. +Use the `region` property to choose the reference space for the annotation's `x` and `y` values: + +- **`Chart`** (default) – `x` and `y` are positioned relative to the overall chart area. The annotation stays fixed as the data changes. +- **`Series`** – `x` and `y` are positioned relative to a specific series. When `coordinateUnits` is `Point`, `x` is matched to a data point on the series. + +The following example uses `region: 'Series'` with `coordinateUnits: 'Point'` to anchor the annotation to the `Japan` data point of the column series. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -56,10 +74,12 @@ Annotations can be positioned relative to either the overall `Chart` area or a s ## Coordinate Units -Use the `coordinateUnits` property to define how annotation coordinates are interpreted. Choose between: +Use the `coordinateUnits` property to choose how the annotation's `x` and `y` values are interpreted: -- **Pixel** – The annotation is positioned using fixed pixel values within the chart area. -- **Point** – The annotation is positioned based on chart data points (x and y values). +- **`Pixel`** (default) – `x` and `y` are treated as fixed pixel offsets from the top-left corner of the chart area. The annotation does not move with the data. +- **`Point`** – `x` and `y` are treated as data values on the chart axes. `x` matches an axis value (a category name for category axes, a numeric value for numeric/datetime axes) and `y` matches a series value. The annotation moves with the data. + +The following example renders a custom HTML annotation at a fixed pixel location on the chart. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -78,7 +98,58 @@ Use the `coordinateUnits` property to define how annotation coordinates are inte {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/line-cs5" %} +## Customization + +The `ChartAnnotationSettingsModel` exposes additional properties to align and style annotations. The commonly used ones are: + +- `horizontalAlignment` – `'Near'`, `'Center'`, or `'Far'`. Aligns the annotation horizontally relative to its anchor point. +- `verticalAlignment` – `'Top'`, `'Middle'`, or `'Bottom'`. Aligns the annotation vertically relative to its anchor point. +- `offset` – `{ x: number, y: number }`. Shifts the annotation from its anchor point in pixels. +- `opacity` – `number` between `0` and `1`. Sets the opacity of the annotation. + +The following snippet customizes an annotation with alignment, offset, and opacity: + +```tsx + + +``` + +See the [ChartAnnotationSettingsModel API reference](https://ej2.syncfusion.com/react/documentation/api/chart/chartAnnotationSettingsModel) for the full list of properties. + +## Multiple annotations + +Add multiple annotations to the same chart by including more than one `AnnotationDirective` inside `AnnotationsDirective`. Each annotation can use its own `x`, `y`, `region`, `content`, and styling. + +```tsx + + + + + + +``` + ## See Also -* [Show total stacking values in data label](./how-to#show-the-total-value-for-stacking-series-in-data-label) -* [Create footer and watermark for chart](./how-to#create-footer-and-watermark-for-chart) \ No newline at end of file +* [Show total stacking values in data label](./how-to/stacking-total) +* [Create footer and watermark for chart](./how-to/footer) +* [ChartAnnotationSettingsModel API reference](https://ej2.syncfusion.com/react/documentation/api/chart/chartAnnotationSettingsModel) \ No newline at end of file diff --git a/chart-sdk/react/charts/chart-appearance.md b/chart-sdk/react/charts/chart-appearance.md index c83e7a888..44ff01d34 100644 --- a/chart-sdk/react/charts/chart-appearance.md +++ b/chart-sdk/react/charts/chart-appearance.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Custom color palette -Customize the default color of series or points by providing a custom color palette using the [`palettes`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#palettes) property. +Customize the default color of series or points by providing a custom color palette using the [`palettes`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#palettes) property. The `palettes` property accepts an array of color strings that the chart applies in order to each series or point. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -37,7 +37,7 @@ The color of individual data point or data points within a range can be customiz ### Point color mapping -You can bind the color for the points from [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/series#datasource) for the series using [`pointColorMapping`](https://ej2.syncfusion.com/react/documentation/api/chart/series#pointcolormapping) property. +You can bind a color for each point from the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/series#datasource) of the series using the [`pointColorMapping`](https://ej2.syncfusion.com/react/documentation/api/chart/series#pointcolormapping) property. Each value in the mapped field is read as a valid CSS color string. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -102,9 +102,7 @@ Marker, data label, and fill color of individual data points can be customized u ## Chart area customization - - -**Customize the chart background** +### Customize the chart background Use the [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#background) and [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#border) properties on the chart to change its background color and border. @@ -126,7 +124,7 @@ Use the [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/ {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/column-cs2" %} -**Chart margin** +### Chart margin Set the chart margin relative to its container using the [`margin`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#margin) property. @@ -147,9 +145,9 @@ Set the chart margin relative to its container using the [`margin`](https://ej2. {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/column-cs3" %} -**Chart area customization** +### Plot area appearance -To customize the plotting region (chart area), use the `chartArea` properties: [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel#background) and [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/chartareamodel#border) change the chart area's appearance, and [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel#width) adjusts its size. +To customize the plotting region (chart area), use the `chartArea` properties: [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel#background) and [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/chartareamodel#border) change the chart area's appearance. You can additionally set the plot area's [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/chartareamodel#width) and height to adjust its size. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -168,9 +166,9 @@ To customize the plotting region (chart area), use the `chartArea` properties: [ {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/column-cs4" %} -**Chart area margin** +### Chart area margin -You can customize the space between the chart area from its chart container through [`margin`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel#margin) property. +You can customize the space between the chart area and its chart container through the [`margin`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel#margin) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -191,7 +189,7 @@ You can customize the space between the chart area from its chart container thro ## Animation -Customize animation for a series using the [`animation`](https://ej2.syncfusion.com/react/documentation/api/chart/animationModel) property. Use `enable` to turn animation on or off; `duration` controls the animation length and `delay` sets when the animation starts. +Customize animation for a series using the [`animation`](https://ej2.syncfusion.com/react/documentation/api/chart/animationModel) property. Use `enable` to turn animation on or off; `duration` controls the animation length, and `delay` sets when the animation starts. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -212,7 +210,7 @@ Customize animation for a series using the [`animation`](https://ej2.syncfusion. ### Fluid animation -Fluid animation used to animate series with updated dataSource continues animation rather than animation whole series. You can customize animation for a particular series using [`animate`] method. +Fluid animation is used to animate a series when its `dataSource` is updated, so the animation continues from the previous state rather than re-animating the whole series. You can customize animation for a particular series by calling the chart's [`animate`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#animate) method. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -234,4 +232,4 @@ Fluid animation used to animate series with updated dataSource continues animati ## See also -* [Customize the series points using patterns](./how-to#customize-the-series-points-by-using-patterns) \ No newline at end of file +* [Customize the series points using patterns](./how-to/points-customization) \ No newline at end of file diff --git a/chart-sdk/react/charts/chart-dimensions.md b/chart-sdk/react/charts/chart-dimensions.md index 6bec2167d..108c95a44 100644 --- a/chart-sdk/react/charts/chart-dimensions.md +++ b/chart-sdk/react/charts/chart-dimensions.md @@ -12,40 +12,21 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Size for Container -The chart can render to its container size. Set the size via inline styles or CSS as shown below. +The chart renders based on its container size. Set the size using inline styles or CSS, as shown below. -``` -
-``` - - - -```ts -import * as React from "react"; -import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} -from'@syncfusion/ej2-react-charts'; - -function App() { - - return - - -}; -export default App; -ReactDOM.render(, document.getElementById("charts")); +```html +
``` ```ts import * as React from "react"; import * as ReactDOM from "react-dom"; import { ChartComponent } from '@syncfusion/ej2-react-charts'; + function App() { - return - ; + return ; } -; + export default App; ReactDOM.render(, document.getElementById("charts")); ``` @@ -70,50 +51,58 @@ ReactDOM.render(, document.getElementById("charts")); ## Size for Chart Set the chart size directly using the [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#width) and -[`height`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#height) properties. +[`height`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#height) properties (in pixels or percentages). For example: + +```tsx + + {/* ... */} + +``` + +Values can be specified as strings with units (for example, `'650px'`, `'50%'`) or as numbers, which are treated as pixels. By default, the chart uses a height of `450px` and a width that fills the container. -**In Pixel** +### In Pixel -You can set the size of chart in pixel as demonstrated below. +You can set the chart size in pixels, as demonstrated below. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/getting-started/datasource-cs1/app/index.jsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/getting-started/datasource-cs1/app/index.tsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/index.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/getting-started/datasource-cs1/app/datasource.jsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/getting-started/datasource-cs1/app/datasource.tsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/datasource.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/getting-started/datasource-cs1" %} +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1" %} -**In Percentage** +### In Percentage When percentage values are used, the chart dimensions are relative to the container. For example, a height of `50%` renders the chart to half the container height. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/getting-started/datasource-cs2/app/index.jsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/getting-started/datasource-cs2/app/index.tsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/index.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/getting-started/datasource-cs2/app/datasource.jsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/getting-started/datasource-cs2/app/datasource.tsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/datasource.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/getting-started/datasource-cs2" %} +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2" %} -> Note:  When you do not specify the size, it takes `450px` as the height and window size as its width. \ No newline at end of file +> Note: When you do not specify a size, the chart uses `450px` height and the container's width. \ No newline at end of file diff --git a/chart-sdk/react/charts/chart-print.md b/chart-sdk/react/charts/chart-print.md index 8ce8f73de..a9f135fb1 100644 --- a/chart-sdk/react/charts/chart-print.md +++ b/chart-sdk/react/charts/chart-print.md @@ -12,7 +12,13 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Print -The rendered chart can be printed directly from the browser by calling the public `print` method. This method accepts an array of element IDs or element references to print; by default it prints the chart element itself. +You can print the rendered chart directly from the browser by calling the public `print` method. The method accepts an optional array of element IDs or `HTMLElement` references to include in the print output. By default, the `print` method prints the chart element itself. + +**Method signature** + +```typescript +chartInstance.print(ids?: string[] | HTMLElement[]); +``` {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -36,13 +42,39 @@ The rendered chart can be printed directly from the browser by calling the publi ## Export -Export the rendered chart to `JPEG`, `PNG`, `SVG`, or `PDF` using the chart `export` method. To export chart data into `XLSX` or `CSV`, use the Excel/CSV export options. The primary parameters for `export` are `type` (format) and `fileName` (output file name). - -Optional parameters include: -- `orientation` — `portrait` or `landscape` for PDF export -- `controls` — a collection of controls for multi-control export -- `width` — exported width -- `height` — exported height +You can export the rendered chart to `JPEG`, `PNG`, `SVG`, `PDF`, `XLSX`, or `CSV` using the chart's `export` method. To use the export feature, inject the `Export` module into the chart's `services` array (as shown in the samples below). + +**Method signature** + +```typescript +chartInstance.exportModule.export( + type: 'PNG' | 'JPEG' | 'SVG' | 'PDF' | 'XLSX' | 'CSV', + fileName: string, + orientation?: 'portrait' | 'landscape', + controls?: ChartModel[], + width?: number, + height?: number, + isMultiplePage?: boolean, + header?: PdfHeaderFooterContent, + footer?: PdfHeaderFooterContent, + exportToMultiplePage?: boolean +); +``` + +**Parameters** + +| Parameter | Type | Description | +|-----------|------|-------------| +| `type` | `string` | The export format. Valid values: `PNG`, `JPEG`, `SVG`, `PDF`, `XLSX`, `CSV`. | +| `fileName` | `string` | The name of the downloaded file (without extension). | +| `orientation` | `string` | The page orientation for PDF export. Valid values: `portrait`, `landscape`. | +| `controls` | `ChartModel[]` | An array of chart instances for multi-control export to a single page. | +| `width` | `number` | The width of the exported image or PDF, in pixels. | +| `height` | `number` | The height of the exported image or PDF, in pixels. | +| `isMultiplePage` | `boolean` | When `true`, exports each chart in `controls` to a separate page (PDF only). | +| `header` | `PdfHeaderFooterContent` | Header content for the exported PDF. | +| `footer` | `PdfHeaderFooterContent` | Footer content for the exported PDF. | +| `exportToMultiplePage` | `boolean` | When `true`, exports each chart in `controls` to a separate page (PDF only). | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -64,12 +96,15 @@ Optional parameters include: {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/print-cs4" %} -### Adding header and footer in PDF export +### Adding Header and Footer in PDF Export -In the export method, specify the following parameters to add a header and footer text to the exported PDF document: +Use the `header` and `footer` parameters of the `export` method to add header and footer text to the exported PDF document. Each parameter accepts a `PdfHeaderFooterContent` object with the following properties: -* `header` - Specify the text that should appear at the top of the exported PDF document. -* `footer` - Specify the text that should appear at the bottom of the exported PDF document. +* `content` — The text that appears at the top (`header`) or bottom (`footer`) of the exported PDF document. +* `fontSize` — The font size of the header or footer text. +* `fontFamily` — *(Optional)* The font family for the text. +* `color` — *(Optional)* The color of the text. +* `x`, `y` — *(Optional)* The position of the text in the PDF. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -91,9 +126,11 @@ In the export method, specify the following parameters to add a header and foote {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/print-cs6" %} -### Exporting charts into separate page during the PDF export +### Exporting Charts to Separate Pages in PDF -During PDF export, set the `exportToMultiplePage` parameter to **true** to export each chart as a separate page. +During PDF export, set the `exportToMultiplePage` parameter to `true` to export each chart to a separate page in the resulting PDF document. The chart instances are passed in the `controls` array. + +> **Note:** Each chart in the `controls` array must also have the `Export` module injected in its `services` array for multi-page export to work. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -115,11 +152,13 @@ During PDF export, set the `exportToMultiplePage` parameter to **true** to expor {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/print-cs7" %} -## Multiple chart export +### Multiple Chart Export -You can export the multiple charts in single page by passing the multiple chart objects in the export method of chart. To export multiple charts in a single page, follow the given steps: +You can export multiple charts to a single page by passing an array of chart objects to the chart's `export` method. Follow these steps: -Initially, render more than one chart to export, and then add button to export the multiple charts. In button click, call the export method in charts, and then pass the multiple chart objects in the export method. +1. Render more than one chart on the page. +2. Add a button to trigger the export. +3. In the button's click handler, call the `export` method on the first chart instance, passing the additional chart instances in the `controls` array. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -141,7 +180,9 @@ Initially, render more than one chart to export, and then add button to export t {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/print-cs5" %} -## Exporting chart using base64 string +### Exporting Chart Using a Base64 String + +> **Note:** This is a custom approach that uses an HTML canvas. The built-in `export` method does not return a base64 string. The chart can be exported as an image in the form of a base64 string by utilizing HTML canvas. This process involves rendering the chart onto a canvas element and then converting the canvas content to a base64 string. @@ -165,9 +206,11 @@ The chart can be exported as an image in the form of a base64 string by utilizin {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/print-cs8" %} -## Excel export +### Excel Export + +You can export the chart data in `XLSX` or `CSV` format by setting the `type` parameter of the `export` method to `XLSX` or `CSV`. The [`excelProperties`](https://ej2.syncfusion.com/react/documentation/api/chart/iExportEventArgs#excelproperties) property in the [`beforeExport`](https://ej2.syncfusion.com/react/documentation/api/chart/iExportEventArgs) event allows you to customize the exported sheet before the file is generated. You can modify row titles, column titles, cell values, and row or column widths. -You can export the rendered chart data to Excel in either `XLSX` or `CSV` format. The [`excelProperties`](https://ej2.syncfusion.com/react/documentation/api/chart/iExportEventArgs#excelproperties) property in the [`beforeExport`](https://ej2.syncfusion.com/react/documentation/api/chart/iExportEventArgs) event allows users to customize the exported Excel sheet by modifying row, column, and cell properties before the file is generated. You can customize row titles, column titles, cell values, as well as row and column widths. +> **Note:** The `beforeExport` event fires for all export formats, but `excelProperties` is only populated when `type` is `XLSX` or `CSV`. The `Export` module must be injected. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/charts/chart-series.md b/chart-sdk/react/charts/chart-series.md index 73ea7ccc9..2c4fde48c 100644 --- a/chart-sdk/react/charts/chart-series.md +++ b/chart-sdk/react/charts/chart-series.md @@ -13,7 +13,10 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Multiple Series Multiple series can be added to a chart by using the [`series`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesmodel) property. Each series represents a distinct set of data, and all configured series are rendered in the same chart area for easy comparison. -The series are rendered in the same order in which they are defined in the `series` collection. This ordering determines the visual stacking of series when multiple series overlap. + +The series are rendered in the same order in which they are defined in the `series` collection. This ordering controls the draw order of the series when they overlap; it does not, by itself, cause stacking. To stack series, use a stacking-compatible series type (for example, `StackingColumn`) and assign a common `stackingGroup` value to the related series. See the [`SeriesModel`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel) API for the full list of available series options such as [`xName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#xname), [`yName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#yname), [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#datasource), and [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#type). + +> Note: When configuring multiple series, make sure to inject the corresponding modules (for example, `ColumnSeries`, `LineSeries`, `Category`) into the `services` array. The sample below uses the [`Category`](https://ej2.syncfusion.com/react/documentation/api/chart/category) axis, so the `Category` module is required. For project setup, refer to the [Getting Started](getting-started) documentation. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -34,7 +37,11 @@ The series are rendered in the same order in which they are defined in the `seri ## Combination Series -A combination chart allows different series types, such as Line and Column, to be rendered together in a single chart. This is useful for comparing multiple datasets that have different visual representation requirements. +A combination chart allows different series types, such as Column, Line, Spline, Area, and StackingColumn, to be rendered together in a single chart. This is useful for comparing multiple datasets that have different visual encodings on a shared set of category values. + +For combined series to align properly, all series must share a common `xName` (and corresponding X values) on the primary X axis. When the series have different value ranges, consider using a [Multiple Panes](multiple-panes) or a secondary Y axis. + +> Note: Bar series cannot be combined with other series types because Bar uses a transposed axis (`isTransposed: true`), which is incompatible with the standard axis orientation of the other series. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -53,4 +60,9 @@ A combination chart allows different series types, such as Line and Column, to b {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/combination-cs1" %} -> Note: Bar series cannot be combined with other series types because their axis orientation differs from other series. \ No newline at end of file +## See also + +* [Category Axis](category-axis) - Configure the X axis when sharing category values across series. +* [Markers](data-markers) - Customize the appearance of points on combined series. +* [Legend](legend) - Identify each series in a multi-series or combination chart. +* [Multiple Panes](multiple-panes) - Render series with different value ranges on separate axes. \ No newline at end of file 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..4e7499d22 100644 --- a/chart-sdk/react/charts/cross-hair-and-track-ball.md +++ b/chart-sdk/react/charts/cross-hair-and-track-ball.md @@ -12,6 +12,8 @@ domainurl: https://help.syncfusion.com/chart-sdk 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. +> Note: To use the crosshair feature, the `Crosshair` module must be injected into the `services`. + Crosshair lines can be enabled by setting the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettings#enable) property in the `crosshair` settings. {% tabs %} @@ -55,7 +57,7 @@ Axis tooltip labels can be enabled by setting the [`enable`](https://ej2.syncfus ## Customization The [`fill`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairTooltip#fill) and [`textStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairTooltip#textstyle) properties of `crosshairTooltip` are used to customize the background color and font style of the crosshair label. -The color and width of the crosshair lines can be customized by using the [`line`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettingsModel#line) property in the crosshair settings. +The color and width of the crosshair lines can be customized by using the [`line`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettings#line) property in the crosshair settings. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -74,8 +76,6 @@ The color and width of the crosshair lines can be customized by using the [`line {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/crosshair-cs3" %} -> Note: To use crosshair feature, we need to inject `Crosshair` module into the `services`. - ## Crosshair label customization The [`crosshairLabelRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#crosshairlabelrender) event fires before each crosshair axis label is rendered, allowing you to customize the label's appearance or content, or to prevent it from being displayed. @@ -86,8 +86,8 @@ Event arguments: * `value` – The data value at the crosshair position. * `axisName` – The axis identifier (e.g., `primaryXAxis`). * `axisOrientation` – Either `Horizontal` or `Vertical`. -* `textStyle` – Font properties for customization. -* `fill` – Background color of the label. +* `textStyle` – Font properties for the crosshair label (set on the event argument). +* `fill` – Background color of the label (set on the event argument). * `cancel` – Set to **true** to skip rendering the label. {% tabs %} @@ -108,8 +108,8 @@ Event arguments: {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/crosshair-label-render" %} ## Snap to data -Enabling the [`snapToData`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettingsModel#snaptodata) property in the crosshair aligns it with the nearest data point instead of following the exact mouse position. -By enabling the [`snapToData`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettingsModel#snaptodata) property, the crosshair snaps to the nearest data point instead of following the exact mouse position. This improves accuracy when inspecting values. + +Enabling the [`snapToData`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettingsModel#snaptodata) property in the crosshair aligns it with the nearest data point instead of following the exact mouse position. This improves accuracy when inspecting values. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -132,7 +132,7 @@ By enabling the [`snapToData`](https://ej2.syncfusion.com/react/documentation/ap The trackball feature tracks the data point closest to the mouse or touch position. A trackball marker highlights the nearest point, and the trackball tooltip displays detailed information about that point. -To use trackball feature, we need to inject `Crosshair` and `Tooltip` module into the `services`. +To use the trackball feature, the `Crosshair` and `Tooltip` modules must be injected into the `services`. Trackball functionality can be enabled by setting the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettings#enable) property of the crosshair to **true** and the [`shared`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettings#shared) property of the tooltip to **true**. {% tabs %} @@ -155,7 +155,8 @@ Trackball functionality can be enabled by setting the [`enable`](https://ej2.syn ## Crosshair highlight The [`highlightCategory`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettings#highlightcategory) property highlights the background of the entire category when the crosshair is moved over the chart. -The crosshair line color can be customized using the [`color`](https://ej2.syncfusion.com/react/documentation/api/chart/borderModel#color) property within the [`line`](https://ej2.syncfusion.com/react/documentation/api/chart/borderModel) configuration. + +The crosshair line color can be customized using the [`color`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettings#line) property within the [`line`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettings#line) configuration. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/charts/data-editing.md b/chart-sdk/react/charts/data-editing.md index d42b459c8..86448f269 100644 --- a/chart-sdk/react/charts/data-editing.md +++ b/chart-sdk/react/charts/data-editing.md @@ -9,17 +9,13 @@ domainurl: https://help.syncfusion.com/chart-sdk --- - # Data editing in React Chart component ## Enable Data Editing -Data editing allows users to modify chart data points interactively by dragging and dropping the rendered points. This functionality is enabled by injecting the `DataEditing` module into the chart `services`, which adds drag-and-drop support for data points. -Once enabled, the position or value of a data point can be changed dynamically based on its `y` value. To activate data editing, set the `enable` property to **true** in the drag settings of the corresponding series. -In addition, the following properties can be used to customize the data editing behavior and appearance: -- Use the `fill` property to set the color of the editable data points. -- Use the `minY` and `maxY` properties to define the minimum and maximum allowable range for editing the data points. -These options help control both the visual feedback and the valid value range while editing data directly on the chart. +Data editing allows users to modify chart data points interactively by dragging and dropping the rendered points. This functionality is enabled by injecting the `DataEditing` module into the chart's `services`, which adds drag-and-drop support for data points. + +Once enabled, the `y` value of a data point can be changed dynamically by dragging it. To activate data editing, set the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart/dragSettings#enable) property of the [`dragSettings`](https://ej2.syncfusion.com/react/documentation/api/chart/dragSettings) to **true** on the corresponding series. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -37,3 +33,55 @@ These options help control both the visual feedback and the valid value range wh {% endtabs %} {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs1" %} + +## Customization + +The appearance and value range of the editable data points can be customized using the following `dragSettings` properties: + +* [`fill`](https://ej2.syncfusion.com/react/documentation/api/chart/dragSettings#fill) – Sets the color of the editable data points. +* [`minY`](https://ej2.syncfusion.com/react/documentation/api/chart/dragSettings#miny) – Defines the minimum allowable `y` value when editing a data point. +* [`maxY`](https://ej2.syncfusion.com/react/documentation/api/chart/dragSettings#maxy) – Defines the maximum allowable `y` value when editing a data point. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2" %} + +## Events + +The following events are raised while a data point is being dragged. Use them to read or persist the edited value. + +The [`dragStart`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#dragstart), [`drag`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#drag), and [`dragEnd`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#dragend) events expose an [`IDataEditingEventArgs`](https://ej2.syncfusion.com/react/documentation/api/chart/idataeditingeventargs) payload with the following fields: + +* `newValue` – The new `y` value computed from the drag. +* `oldValue` – The original `y` value before the drag. +* `point` – The [`Points`](https://ej2.syncfusion.com/react/documentation/api/chart/points) instance being dragged. +* `pointIndex` – Index of the point within its series. +* `series` – The [`Series`](https://ej2.syncfusion.com/react/documentation/api/chart/series) that contains the point. +* `seriesIndex` – Index of the series in the chart. + +The [`dragComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#dragcomplete) event exposes an [`IDragCompleteEventArgs`](https://ej2.syncfusion.com/react/documentation/api/chart/idragcompleteeventargs) payload with: + +* `selectedDataValues` – The selected X and Y values of the edited data. +* `name` – The name of the event. +* `cancel` – Set to **true** to cancel the operation. + +| Event | Description | +| --- | --- | +| [`dragStart`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#dragstart) | Triggered when a data point drag begins. | +| [`drag`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#drag) | Triggered continuously while a data point is being dragged. | +| [`dragEnd`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#dragend) | Triggered when a data point drag operation ends. | +| [`dragComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#dragcomplete) | Triggered after a data point drag is completed. | + diff --git a/chart-sdk/react/charts/data-labels.md b/chart-sdk/react/charts/data-labels.md index db74e0c9a..e6a42ef67 100644 --- a/chart-sdk/react/charts/data-labels.md +++ b/chart-sdk/react/charts/data-labels.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Data labels in React Chart component -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. +Data labels display the values of data points directly on the chart, removing the need to reference axes for exact values. Data labels are configured under the `marker.dataLabel` property of each series. Enable data labels by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#visible) option to `true`. Labels automatically adjust to avoid overlapping and to maintain readability. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -33,7 +33,7 @@ Data labels display the values of data points directly on the chart, reducing th ## Position -Use the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#position) property to place data labels at `Top`, `Middle`, `Bottom`, or `Outer` (applicable to column and bar series). Appropriate label positioning enhances clarity and preserves chart readability. +Use the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#position) property to place data labels at `Top`, `Middle`, `Bottom`, or `Outer`. The `Outer` position applies only to column and bar series types. Appropriate label positioning enhances clarity and preserves chart readability. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -52,8 +52,6 @@ Use the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/da {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/data-marker/datalabel1-cs1" %} -> Note: The `Outer` position applies only to column and bar series types. - ## Data label template Customize label content using templates. Use placeholders such as `${point.x}` and `${point.y}` to display data point values. The [`template`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#template) property enables fully customizable and visually rich labels. @@ -77,7 +75,7 @@ Customize label content using templates. Use placeholders such as `${point.x}` a ## Text mapping -Display custom text using the `name` property, which maps label text from a specific field in the data source. This feature is useful for descriptive or category‑based labels. +Display custom text using the [`name`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#name) property, which maps label text from a specific field in the data source. This feature is useful for descriptive or category-based labels. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -100,26 +98,11 @@ Display custom text using the `name` property, which maps label text from a spec Apply number or date formatting using the [`format`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#format) property. Global formatting symbols include: -- `n` – number format -- `p` – percentage format -- `c` – currency format +- `n` - number format +- `p` - percentage format +- `c` - currency format -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/data-marker/datalabel-cs3/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/data-marker/datalabel-cs3/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/data-marker/datalabel-cs3/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/data-marker/datalabel-cs3/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/data-marker/datalabel-cs3" %} +The `format` property also supports placeholders such as `{value}°C`, where `{value}` represents the data point's value (for example, `20°C`). @@ -132,52 +115,69 @@ Apply number or date formatting using the [`format`](https://ej2.syncfusion.com/ - + - + - + - + - + - + - + - +
1000 n1 1000.0Rounded to 1 decimal place.Formats as a number with 1 decimal place.
1000 n2 1000.00Rounded to 2 decimal places.Formats as a number with 2 decimal places.
1000 n3 1000.000Rounded to 3 decimal places.Formats as a number with 3 decimal places.
0.01 p1 1.0%Converted to percentage with 1 decimal place.Formats as a percentage with 1 decimal place.
0.01 p2 1.00%Converted to percentage with 2 decimal places.Formats as a percentage with 2 decimal places.
0.01 p3 1.000%Converted to percentage with 3 decimal places.Formats as a percentage with 3 decimal places.
1000 c1 $1000.0Currency with 1 decimal place.Formats as currency with 1 decimal place.
1000 c2 $1000.00Currency with 2 decimal places.Formats as currency with 2 decimal places.
+{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/data-marker/datalabel-cs3/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/data-marker/datalabel-cs3/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/data-marker/datalabel-cs3/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/data-marker/datalabel-cs3/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/data-marker/datalabel-cs3" %} + ## Margin Adjust spacing around labels using the `margin` property, which includes `left`, `right`, `bottom`, and `top` values. Margins help prevent labels from overlapping chart elements. @@ -201,7 +201,7 @@ Adjust spacing around labels using the `margin` property, which includes `left`, ## Data label rotation -Rotate data labels using the `angle` property. Rotation improves readability when labels are long or when space is limited. +Rotate data labels by setting [`enableRotation`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#enablerotation) to `true` and specifying the rotation angle with the [`angle`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#angle) property. Rotation improves readability when labels are long or when space is limited. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -241,12 +241,12 @@ Enhance label appearance using properties such as `fill` (background), `border`, {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/data-marker/datalabel-cs5" %} -> Note: The `rx` and `ry` properties require non‑null `border` values. +> Note: The `rx` and `ry` properties require a non-null `border` value (with a defined `width` and `color`). -## Customizing Specific Point +## Customizing specific point -Customize individual markers or labels using the [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#pointrender) and [`textRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#textrender) events. -- `pointRender` modifies shape, color, or border of a point. +Customize individual markers or labels using the [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#pointrender) and [`textRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#textrender) events: +- `pointRender` modifies shape, color, or border of a point. - `textRender` customizes the label text for specific points. {% tabs %} @@ -268,8 +268,8 @@ Customize individual markers or labels using the [`pointRender`](https://ej2.syn ## Show percentage based on each series points -Calculate and display percentage values based on each series’ total using the `seriesRender` and `textRender` events. -- In `seriesRender`, compute the total of `y` values. +Calculate and display percentage values based on each series' total using the `seriesRender` and `textRender` events: +- In `seriesRender`, compute the total of `y` values. - In `textRender`, calculate the percentage for each point and update the label text. {% tabs %} @@ -291,11 +291,11 @@ Calculate and display percentage values based on each series’ total using the ## Last value label -The `lastValueLabel` feature highlights the final data point in a series, making the latest trend or value easy to identify. +The `lastValueLabel` feature highlights the final data point in a series, making the latest trend or value easy to identify. The `lastValueLabel` option is configured on each `SeriesDirective` (it is a Series-level property), not on the chart component. To use this feature, inject the `ColumnSeries` (or other required series), `Category`, `DataLabel`, and `LastValueLabel` modules into the `services`. ### Enable last value label -Enable the label by setting the `enable` property inside the `lastValueLabel` configuration. +Enable the label by setting the `enable` property inside the `lastValueLabel` configuration of the series. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -318,7 +318,7 @@ Enable the label by setting the `enable` property inside the `lastValueLabel` co ### Customization -Customize the appearance using properties such as `font`, `background`, `border`, `dashArray`, `lineWidth`, `lineColor`, `rx`, and `ry`. +Customize the appearance using `font`, `background`, `border`, `dashArray`, `lineWidth`, `lineColor`, `rx`, and `ry`. The `lineColor`, `lineWidth`, and `dashArray` properties control the connector line drawn between the last data point and the label. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -339,6 +339,6 @@ Customize the appearance using properties such as `font`, `background`, `border` ## See Also -* [Show total stacking values in data label](./how-to#show-the-total-value-for-stacking-series-in-data-label) -* [Prevent the data label when the data value is 0](./how-to#prevent-the-data-label-when-the-data-value-is-0) +* [Show total stacking values in data label](./how-to/stacking-total) +* [Prevent the data label when the data value is 0](./how-to/prevent-data-label) * [Display data labels in lakh](https://support.syncfusion.com/kb/article/21250/how-to-display-data-labels-in-lakh-in-react-accumulation-chart) \ No newline at end of file diff --git a/chart-sdk/react/charts/data-markers.md b/chart-sdk/react/charts/data-markers.md index c24428748..560b57ee1 100644 --- a/chart-sdk/react/charts/data-markers.md +++ b/chart-sdk/react/charts/data-markers.md @@ -39,7 +39,7 @@ Enable markers for data points by setting the [`visible`](https://ej2.syncfusion ## Shape -Assign different shapes to markers such as Rectangle, Circle, Diamond, Triangle, and others using the [`shape`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#shape) property. Shape selection helps distinguish between multiple series and improves visual clarity. +Assign different shapes to markers such as `rectangle`, `circle`, `diamond`, `triangle`, and others using the [`shape`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#shape) property. Shape selection helps distinguish between multiple series and improves visual clarity. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -58,12 +58,14 @@ Assign different shapes to markers such as Rectangle, Circle, Diamond, Triangle, {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/data-marker/datalabel-cs8" %} ->Note : To know more about the marker shape type refer the [`shape`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#shape). +> Note: To know more about the marker shape type, refer to the [`shape`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#shape) property. -## Images +## Image Markers Use custom images as markers instead of predefined shapes by setting the [`imageUrl`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#imageurl) property. This allows branded or thematic markers that enhance visual appeal and user engagement. +Use PNG or SVG images for best clarity. Control rendered size with the [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#height) marker properties; if omitted, the image's intrinsic dimensions are used. + {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/chart-sdk/react/charts/code-path/data-marker/marker-cs2/app/index.jsx %} @@ -85,6 +87,8 @@ Use custom images as markers instead of predefined shapes by setting the [`image Customize marker appearance by modifying the `fill` (background color) and `border` properties. Combined with shape and image options, these customizations enable comprehensive marker styling to match your application design. +Additional marker properties include [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#width), [`height`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#height), and [`opacity`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#opacity), which control the size and transparency of the marker. + {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/chart-sdk/react/charts/code-path/data-marker/datalabel-cs9/app/index.jsx %} @@ -102,9 +106,17 @@ Customize marker appearance by modifying the `fill` (background color) and `bord {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/data-marker/datalabel-cs9" %} -## Customizing specific point +## Customizing a specific point + +Use the [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#pointrender) event to customize markers for individual data points. This event allows you to conditionally change shape, color, and border properties based on data values or other criteria. The handler receives an `IPointRenderEventArgs` object whose `point` and `series` properties expose the current point, series, and marker settings you can mutate before render. -Use the [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart#pointrender-emittypeipointrendereventargs) event to customize markers for individual data points. This event allows you to conditionally change shape, color, and border properties based on data values or other criteria. +```ts +const pointRender = (args: IPointRenderEventArgs) => { + if ((args.point.y as number) > 70) { + args.fill = 'red'; + } +}; +``` {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -123,9 +135,9 @@ Use the [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/data-marker/datalabel-cs10" %} -## Fill marker with series color +## Fill Markers with Series Color -Fill markers with the series color by enabling the [`isFilled`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettingsModel#isFilled-boolean) property. This creates a cohesive visual design where markers inherit the series color automatically. +Fill markers with the series color by enabling the [`isFilled`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#isFilled) property. This creates a cohesive visual design where markers inherit the series color automatically. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -144,7 +156,13 @@ Fill markers with the series color by enabling the [`isFilled`](https://ej2.sync {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/data-marker/datalabel-cs11" %} +## Troubleshooting + +* **Markers are not visible.** Ensure [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/markerSettings#visible) is set to `true` and that the series is a line, area, or spline type which supports markers. +* **Image marker not loading.** Verify the URL is accessible and the image uses a supported format (PNG, JPEG, SVG). +* **Customizations don't apply.** Confirm the property is set on the series' `marker` (e.g., `series.marker.fill`) and not the chart-level default. + ## See Also -* [Customize the marker with different shape](./how-to#customize-the-marker-with-different-shape) +* [Customize the marker with different shape](./how-to/marker-customization) * [Highlight a Marker in Multicolored Line Series](https://support.syncfusion.com/kb/article/21514/how-to-highlight-a-specific-marker-in-a-multicolored-line-series-in-react-chart) diff --git a/chart-sdk/react/charts/date-time-axis.md b/chart-sdk/react/charts/date-time-axis.md index 1d077c47d..1db206d39 100644 --- a/chart-sdk/react/charts/date-time-axis.md +++ b/chart-sdk/react/charts/date-time-axis.md @@ -54,7 +54,7 @@ The DateTimeCategory axis is used to render date-time values with non-linear int {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs3" %} -> Note: To use the DateTimeCategory axis, inject `DateTimeCategory` into the `services` option and set the [`valueType`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype) property of the axis to `DateTimeCategory`. The axis range can be controlled using the [`minimum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#minimum), [`maximum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#maximum), and [`interval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#interval) properties. +> Note: To use the DateTimeCategory axis, inject the `DateTimeCategory` module via the `` component (e.g., ``) and set the [`valueType`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype) property of the axis to `DateTimeCategory`. The axis range can be controlled using the [`minimum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#minimum), [`maximum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#maximum), and [`interval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#interval) properties. ### Range @@ -115,7 +115,8 @@ Padding can be applied to the minimum and maximum values of the axis range using * Round * Additional -**DateTime – None** +#### DateTime with None + When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property is set to `None`, the minimum and maximum values of the axis are calculated directly from the data values. {% tabs %} @@ -135,7 +136,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/cha {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs6" %} -**DateTime – Round** +#### DateTime with Round When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property is set to `Round`, the minimum and maximum values are rounded to the nearest interval boundary. For example, if the minimum value is January 15 and the interval type is set to `Months` with an interval of `1`, the axis minimum is adjusted to January 1. @@ -156,7 +157,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/cha {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs7" %} -**DateTime – Additional** +#### DateTime with Additional When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property is set to `Additional`, an additional interval is added before the minimum and after the maximum values of the axis range to provide extra spacing. @@ -200,6 +201,8 @@ Date values displayed on the DateTime axis can be formatted using the [`labelFor The following table illustrates the output produced by applying commonly used date-time format strings to the `labelFormat` property. +> Note: The actual label text depends on the page's culture/locale. 12-hour versus 24-hour time, the month/day order, and the day/month names are all affected by the current culture. Use the [`skeleton`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#skeleton) and [`skeletonType`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#skeletontype) properties for culture-aware formatting. + @@ -229,12 +232,12 @@ The following table illustrates the output produced by applying commonly used da - + - +
Label Valuenew Date(2000, 03, 10) hm 12:00 AMTime of the date value is displayed as labelThe time portion of the date value is displayed as the label (hour and minute)
new Date(2000, 03, 10) hms 12:00:00 AMDisplays the abbreviated month nameDisplays time in hour:minute:second format
\ No newline at end of file diff --git a/chart-sdk/react/charts/dynamic-data-update.md b/chart-sdk/react/charts/dynamic-data-update.md index f4345570c..86c5b0f77 100644 --- a/chart-sdk/react/charts/dynamic-data-update.md +++ b/chart-sdk/react/charts/dynamic-data-update.md @@ -12,13 +12,17 @@ domainurl: https://help.syncfusion.com/chart-sdk 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. +These methods (`addPoint`, `removePoint`, and `setData`) are called on a [`Series`](https://ej2.syncfusion.com/react/documentation/api/chart/series) instance — not on the chart itself — and are accessible via `chart.series[seriesIndex]`. The chart instance is typically obtained by assigning a `ref` to the `` element. + ## Adding a new data point -Use the `addPoint` method to dynamically append a new data point to a series. This is useful for real-time data streams, user interactions, or incremental data loading. The method accepts the following parameters: - +Use the [`addPoint`](https://ej2.syncfusion.com/react/documentation/api/chart/series#addpoint) method to dynamically append a new data point to a series. This is useful for real-time data streams, user interactions, or incremental data loading. The method accepts the following parameters: + * **Data point** (required): The new data object to append to the series (must match the datasource structure) * **Animation duration** (optional): Duration in milliseconds for the entry animation +The method returns `void` and mutates the series in place. For the complete signature (including the optional `isNew` flag and overloads), see the [`addPoint` API reference](https://ej2.syncfusion.com/react/documentation/api/chart/series#addpoint). + {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/chart-sdk/react/charts/code-path/dynamic-update/add-point/app/index.jsx %} @@ -38,11 +42,13 @@ Use the `addPoint` method to dynamically append a new data point to a series. Th ## Removing an existing data point -Use the `removePoint` method to dynamically delete a data point from a series by its index. This is useful for filtering data, removing outliers, or responding to user actions. The method accepts the following parameters: - -* **Point index** (required): The zero-based index of the data point to remove +Use the [`removePoint`](https://ej2.syncfusion.com/react/documentation/api/chart/series#removepoint) method to dynamically delete a data point from a series by its index. This is useful for filtering data, removing outliers, or responding to user actions. The method accepts the following parameters: + +* **Point index** (required): The zero-based index of the data point to remove. The index refers to the data point's position in the series — **not** its data value. To remove a point by a specific value, find its index first. * **Animation duration** (optional): Duration in milliseconds for the exit animation +The method returns `void` and mutates the series in place. See the [`removePoint` API reference](https://ej2.syncfusion.com/react/documentation/api/chart/series#removepoint) for the full signature. + {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/chart-sdk/react/charts/code-path/dynamic-update/remove-point/app/index.jsx %} @@ -60,13 +66,15 @@ Use the `removePoint` method to dynamically delete a data point from a series by {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/dynamic-update/remove-point" %} -## Replacing entire data points +## Replacing the dataset of a series + +Use the [`setData`](https://ej2.syncfusion.com/react/documentation/api/chart/series#setdata) method to replace all data points in a series with a new dataset. This is useful for category switching, time range changes, or complete data refreshes. The method accepts the following parameters: -Use the `setData` method to replace all data points in a series with a new dataset. This is useful for category switching, time range changes, or complete data refreshes. The method accepts the following parameters: - -* **New data source** (required): The complete new dataset array to display +* **New data source** (required): The complete new dataset array to display (must match the existing datasource structure — same `xName` and `yName` fields) * **Animation duration** (optional): Duration in milliseconds for the transition animation +The method returns `void` and mutates the series in place. See the [`setData` API reference](https://ej2.syncfusion.com/react/documentation/api/chart/series#setdata) for the full signature. + {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/chart-sdk/react/charts/code-path/dynamic-update/set-data/app/index.jsx %} @@ -86,7 +94,11 @@ Use the `setData` method to replace all data points in a series with a new datas ## Click to add or remove a data point -Enable users to add or remove data points by clicking on the chart. Listen to the `chartMouseClick` event to capture click coordinates and point information. When a user clicks within the chart area, extract the x and y axis values from the event arguments. If the location is empty, use `addPoint` to add a new data point at those coordinates. If a user clicks on an existing data point, identify its index and use `removePoint` to delete it. This creates an intuitive interface for data exploration and editing. +Enable users to add or remove data points by clicking on the chart. Listen to the [`chartMouseClick`](https://ej2.syncfusion.com/react/documentation/api/chart/iChartMouseEventArgs) event to capture click coordinates and point information. When a user clicks within the chart area, the event arguments expose `args.axisData` (the x and y axis values) which you can use to determine what was clicked. + +The example below implements click-to-add and click-to-remove with a **pixel-tolerance match** against existing data points. Because the click coordinates are pixel values but the data points are in axis units, the sample iterates the series' points and compares them with a tolerance equal to half the marker's width. If a match is found, `removePoint` is called with that index; otherwise `addPoint` is called with the rounded axis values. This creates an intuitive interface for data exploration and editing. + +> Note: The point-matching algorithm in the sample is intentionally simple. For production use, you may need to adjust the tolerance, account for axis scale (linear vs. logarithmic), and handle edge cases such as overlapping points. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -104,3 +116,10 @@ Enable users to add or remove data points by clicking on the chart. Listen to th {% endtabs %} {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/dynamic-update/click-add-point" %} + +## See also + +* [Series API reference](https://ej2.syncfusion.com/react/documentation/api/chart/series) +* [Selection in React Charts](./selection) +* [Crosshair and trackball in React Charts](./cross-hair-and-track-ball) +* [Live data update patterns](https://ej2.syncfusion.com/react/documentation/chart/getting-started) diff --git a/chart-sdk/react/charts/ej1-api-migration.md b/chart-sdk/react/charts/ej1-api-migration.md index 8fccfb231..65a39e2e6 100644 --- a/chart-sdk/react/charts/ej1-api-migration.md +++ b/chart-sdk/react/charts/ej1-api-migration.md @@ -17,20 +17,19 @@ This article describes the API migration process of the Chart component from Ess | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | -|Annotations| **Property:** *annotations.content*

annotations: [{ content: "watermark" }],
``annotations={annotations}>`
``|**Property:** *annotations.content*

``
``
``
``| -|rotation of annotation| **Property:** *annotations*

annotations: [{ }],
``annotations={annotations}>`
``| Not applicable.| -|coordinate unit for annotation| **Property:** *annotations.coordinateUnit*

annotations: [{ coordinateUnit : "pixels" }],
``annotations={annotations}>`
``|**Property:** *annotations.coordinateUnits*

``
``
``
``| -|horizontalAlignment for annotation| **Property:** *annotations.horizontalAlignment*

annotations: [{ horizontalAlignment: "near" }],
``annotations={annotations}>`
``|**Property:** *annotations.horizontalAlignment*

``
``
``
``| -|horizontalAlignment for annotation| **Property:** *annotations.horizontalAlignment*

annotations: [{ horizontalAlignment: "near" }],
``annotations={annotations}>`
``|**Property:** *annotations.horizontalAlignment*

``
``
``
``| -|margin for annotation| **Property:** *annotations.margin*

annotations: [ margin: { right: 40 } }],
``annotations={annotations}>`
``| Not applicable | -|Opacity for annotation| **Property:** *annotations.opacity*

annotations: [{ horizontalAlignment: "near" }],
``annotations={annotations}>`
``|**Property:** *annotations.horizontalAlignment*

``
``
``
``| -|Region for annotation with respect to chart or series| **Property:** *annotations.region*

annotations: [{ region: "series" }],
``annotations={annotations}>`
``|**Property:** *annotations.region*

``
``
``
``| -|verticalAlignment for annotation| **Property:** *annotations.verticalAlignment*

annotations: [{ verticalAlignment: "middle" }],
``annotations={annotations}>`
``|**Property:** *annotations.verticalAlignment*

``
``
``
``| -|Visibility of annotations| **Property:** *annotations.visible*

annotations: [{ visible: true }],
``annotations={annotations}>`
``| Not applicable -|X offset for annotation| **Property:** *annotations.x*

annotations: [{ x: 170 }],
``annotations={annotations}>`
``|**Property:** *annotations.x*

``
``
``
``| -|X axis name in which annotation to be rendered| **Property:** *annotations.xAxisName*

annotations: [{ xAxisName :"xAxis" }],
``annotations={annotations}>`
``|**Property:** *annotations.xAxisName*

``
``
``
``| -|Y offset for annotation| **Property:** *annotations.y*

annotations: [{ y: 170 }],
``annotations={annotations}>`
``|**Property:** *annotations.y*

``
``
``
``| -|Y axis name in which annotation to be rendered| **Property:** *annotations.yAxisName*

annotations: [{ yAxisName :"yAxis" }],
``annotations={annotations}>`
``|**Property:** *annotations.yAxisName*

``
``
``
``| +|Annotations| **Property:** *annotations.content*

annotations: [{ content: "watermark" }],
``annotations={annotations}>`
``|**Property:** *annotations.content*

``
``
``
``| +|rotation of annotation| **Property:** *annotations*

annotations: [{ }],
``annotations={annotations}>`
``|**Property:** *annotations.rotation*

``
``
``
``| +|coordinate unit for annotation| **Property:** *annotations.coordinateUnit*

annotations: [{ coordinateUnit : "pixels" }],
``annotations={annotations}>`
``|**Property:** *annotations.coordinateUnits*

``
``
``
``| +|horizontalAlignment for annotation| **Property:** *annotations.horizontalAlignment*

annotations: [{ horizontalAlignment: "near" }],
``annotations={annotations}>`
``|**Property:** *annotations.horizontalAlignment*

``
``
``
``| +|margin for annotation| **Property:** *annotations.margin*

annotations: [ margin: { right: 40 } }],
``annotations={annotations}>`
``|**Property:** *annotations.margin*

``
``
``
``| +|Opacity for annotation| **Property:** *annotations.opacity*

annotations: [{ opacity: 0.5 }],
``annotations={annotations}>`
``|**Property:** *annotations.opacity*

``
``
``
``| +|Region for annotation with respect to chart or series| **Property:** *annotations.region*

annotations: [{ region: "series" }],
``annotations={annotations}>`
``|**Property:** *annotations.region*

``
``
``
``| +|verticalAlignment for annotation| **Property:** *annotations.verticalAlignment*

annotations: [{ verticalAlignment: "middle" }],
``annotations={annotations}>`
``|**Property:** *annotations.verticalAlignment*

``
``
``
``| +|Visibility of annotations| **Property:** *annotations.visible*

annotations: [{ visible: true }],
``annotations={annotations}>`
``|**Property:** *annotations.visible*

``
``
``
``| +|X offset for annotation| **Property:** *annotations.x*

annotations: [{ x: 170 }],
``annotations={annotations}>`
``|**Property:** *annotations.x*

``
``
``
``| +|X axis name in which annotation to be rendered| **Property:** *annotations.xAxisName*

annotations: [{ xAxisName :"xAxis" }],
``annotations={annotations}>`
``|**Property:** *annotations.xAxisName*

``
``
``
``| +|Y offset for annotation| **Property:** *annotations.y*

annotations: [{ y: 170 }],
``annotations={annotations}>`
``|**Property:** *annotations.y*

``
``
``
``| +|Y axis name in which annotation to be rendered| **Property:** *annotations.yAxisName*

annotations: [{ yAxisName :"yAxis" }],
``annotations={annotations}>`
``|**Property:** *annotations.yAxisName*

``
``
``
``| ## Columns @@ -38,8 +37,8 @@ This article describes the API migration process of the Chart component from Ess | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | |Columns in chart| **Property:** *columntype*

var series= [{ type: 'column' }];
``series={series}>`
``|**Property:** *columntype*

``
``
``
``| -|width of columns in chart| **Property:** *columnWidth*

var series= [{ columnWidth : 0.8 }];
``series={series}>`
``|**Property:** *width*

``
``
``
``| -|Rounded column| **Property:** *cornerRadius*

var commonSeriesOptions= { cornerRadius :20 };
``commonSeriesOptions={commonSeriesOptions}>`
``|**Property:** *cornerRadius*

``
``
``
``| +|width of columns in chart| **Property:** *columnWidth*

var series= [{ columnWidth : 0.8 }];
``series={series}>`
``|**Property:** *columnWidth*

``
``
``
``| +|Rounded column| **Property:** *cornerRadius*

var commonSeriesOptions= { cornerRadius :20 };
``commonSeriesOptions={commonSeriesOptions}>`
``|**Property:** *cornerRadius*

``
``
``
``| ## CommonSeriesOptions @@ -53,10 +52,10 @@ This article describes the API migration process of the Chart component from Ess | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | -|crosshair| **Property:** *crosshair Label visible*

var crosshair={ visible: true };
``crosshair={crosshair}>`
``|**Property:** *crosshair enable*

``
``| +|crosshair| **Property:** *crosshair Label visible*

var crosshair={ visible: true };
``crosshair={crosshair}>`
``|**Property:** *crosshair enable*

``
``| |trackballTooltipSettings| **Property:** *trackballTooltipSettings*

var crosshair={ type: 'trackball' };
``crosshair={crosshair}>`
``|Not applicable -|marker| **Property:** *marker*

var series = [{ marker: { shape: 'Diamond', visible: true }}];
``series={series}>`
``|**Property:** *marker*

``
``
``
``| -|crosshair line style| **Property:** *line*

var crosshair={ line: { color: 'gray', width: 2 } };
``crosshair={crosshair}>`
``|**Property:** *line*

``
``| +|marker| **Property:** *marker*

var series = [{ marker: { shape: 'Diamond', visible: true }}];
``series={series}>`
``|**Property:** *marker*

``
``
``
``| +|crosshair line style| **Property:** *line*

var crosshair={ line: { color: 'gray', width: 2 } };
``crosshair={crosshair}>`
``|**Property:** *line*

``
``| |type| **Property:** *type*

var crosshair={ type: 'trackball' };
``crosshair={crosshair}>`
``|Not applicable| ## 3D chart @@ -71,8 +70,8 @@ This article describes the API migration process of the Chart component from Ess | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | -|Type of Indicator| **Property:** *type*

var indicators= [{ type: "accumulationdistribution" }];
``indicators={indicators}>`
``|**Property:** *marker*

``
``
``
``| -|Period for indicator| **Property:** *period*

var indicators= [{ period: 3 }];
``indicators={indicators}>`
``|**Property:** *marker*

``
``
``
``| +|Type of Indicator| **Property:** *type*

var indicators= [{ type: "accumulationdistribution" }];
``indicators={indicators}>`
``|**Property:** *type*

``
``
``
``| +|Period for indicator| **Property:** *period*

var indicators= [{ period: 3 }];
``indicators={indicators}>`
``|**Property:** *period*

``
``
``
``| |%K value in stochastic indicator| **Property:** *kPeriod*

var indicators= [{ kPeriod: 3 }];
``indicators={indicators}>`
``|**Property:** *kPeriod*

``
``
``
``| |%D value in stochastic indicator| **Property:** *dPeriod*

var indicators= [{ dPeriod: 3 }];
``indicators={indicators}>`
``|**Property:** *dPeriod*

``
``
``
``| |Shows overSold/overBought values| Not applicable|**Property:** *showZones*

``
``
``
``| @@ -82,40 +81,40 @@ This article describes the API migration process of the Chart component from Ess |Slow period for MACD indicator| **Property:** *shortPeriod*

var indicators= [{ shortPeriod: 5 }];
``indicators={indicators}>`
``|**Property:** *slowPeriod*

``
``
``
``| |Fast period for MACD indicator| **Property:** *longPeriod*

var indicators= [{ longPeriod: 5 }];
``indicators={indicators}>`
``|**Property:** *fastPeriod*

``
``
``
``| |Type of MACD indicator| **Property:** *macdType*

var indicators= [{ macdType : "both" }];
``indicators={indicators}>`
``|**Property:** *macdType*

``
``
``
``| -|Color of the positive bars in Macd indicators| Not applicable |**Property:** *macdPositiveColor*

``
``
``
``| -|Color of the negative bars in Macd indicators| Not applicable |**Property:** *macdPositiveColor*

``
``
``
``| -|Appearance of upper line in indicator| **Property:** *upperLine*

var indicators= [{ upperLine: { fill: '#EECCAA'} }];
``indicators={indicators}>`
``|**Property:** *upperLine*

``
``
``
``| -|Appearance of lower line in indicator| **Property:** *lowerLine*

var indicators= [{ lowerLine: { fill: '#EECCAA'} }];
``indicators={indicators}>`
``|**Property:** *lowerLine*

``
``
``
``| -|Appearance of period line in indicator| **Property:** *periodLine*

var indicators= [{ periodLine: { fill: '#EECCAA'} }];
``indicators={indicators}>`
``|**Property:** *periodLine*

``
``
``
``| +|Color of the positive bars in Macd indicators| Not applicable |**Property:** *macdPositiveColor*

``
``
``
``| +|Color of the negative bars in Macd indicators| Not applicable |**Property:** *macdNegativeColor*

``
``
``
``| +|Appearance of upper line in indicator| **Property:** *upperLine*

var indicators= [{ upperLine: { fill: '#EECCAA'} }];
``indicators={indicators}>`
``|**Property:** *upperLine*

``
``
``
``| +|Appearance of lower line in indicator| **Property:** *lowerLine*

var indicators= [{ lowerLine: { fill: '#EECCAA'} }];
``indicators={indicators}>`
``|**Property:** *lowerLine*

``
``
``
``| +|Appearance of period line in indicator| **Property:** *periodLine*

var indicators= [{ periodLine: { fill: '#EECCAA'} }];
``indicators={indicators}>`
``|**Property:** *periodLine*

``
``
``
``| |Name of the series for which indicator has to be drawn| **Property:** *seriesName*

var indicators= [{ seriesName ="Apple Inc" }];
``indicators={indicators}>`
``|**Property:** *seriesName*

``
``
``
``| -|Enabling animation| **Property:** *enableAnimation*

var indicators= [{ enableAnimation : true }];
``indicators={indicators}>`
``|**Property:** *animation.enable*

``
``
``
``| -|Animation duration| **Property:** *animationDuration*

var indicators= [{ animationDuration: 3000 }];
``indicators={indicators}>`
``|**Property:** *animation.duration*

``
``
``
``| -|Tooltip| **Property:** *tooltip*

var indicators= [{ tooltip: { visible: true } }];
``indicators={indicators}>`
``|Not applicable| +|Enabling animation| **Property:** *enableAnimation*

var indicators= [{ enableAnimation : true }];
``indicators={indicators}>`
``|**Property:** *animation.enable*

``
``
``
``| +|Animation duration| **Property:** *animationDuration*

var indicators= [{ animationDuration: 3000 }];
``indicators={indicators}>`
``|**Property:** *animation.duration*

``
``
``
``| +|Tooltip| **Property:** *tooltip*

var indicators= [{ tooltip: { visible: true } }];
``indicators={indicators}>`
``|**Property:** *tooltip*

``
``
``
``| |Trigger value of MACD indicator| **Property:** *trigger*

var indicators= [{ trigger: 14 }];
``indicators={indicators}>`
``|Not applicable| |Fill color for indicator| **Property:** *fill*

var indicators= [{ fill: '#EEDDCC' }];
``indicators={indicators}>`
``|**Property:** *fill*

``
``
``
``| |Width for indicator| **Property:** *width*

var indicators= [{ width: 2 }];
``indicators={indicators}>`
``|**Property:** *width*

``
``
``
``| |xAxis Name of indicator| **Property:** *xAxisName*

var indicators= [{ xAxisName: '' }];
``indicators={indicators}>`
``|**Property:** *xAxisName*

``
``
``
``| |yAxis Name of indicator| **Property:** *yAxisName*

var indicators= [{ yAxisName: '' }];
``indicators={indicators}>`
``|**Property:** *yAxisName*

``
``
``
``| -|Visibility of indicator| **Property:** *visibility*

var indicators= [{ visibility: true }];
``indicators={indicators}>`
``|Not applicable| +|Visibility of indicator| **Property:** *visibility*

var indicators= [{ visibility: true }];
``indicators={indicators}>`
``|**Property:** *visible*

``
``
``
``| ## Legend | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | -|Default legend| **Property:** *visible*

var legend= { visible: true };
``legend={legend}>`
``|**Property:** *yAxisName*

``
``| -|Legend height| **Property:** *height*

var legend= { size : { height: 50 } };
``legend={legend}>`
``|**Property:** *yAxisName*

``
``| -|Legend width| **Property:** *size.width*

var legend= { size : { width: 50 } };
``legend={legend}>`
``|**Property:** *width*

``
``| -|Legend location in chart| **Property:** *location*

var legend= { location: { x: 3, y: 45} };
``legend={legend}>`
``|**Property:** *location*

``
``| -|Legend position in chart| **Property:** *position*

var legend= { position: 'top' };
``legend={legend}>`
``|**Property:** *position*

``
``| -|Legend padding|Not applicable|**Property:** *padding*

``
``| -|Legend alignment| **Property:** *alignment*

var legend= { alignment: 'center' };
``legend={legend}>`
``|**Property:** *alignment*

``
``| -|text style for legend| **Property:** *font*

var legend= { font: { fontFamily: ''} };
``legend={legend}>`
``|**Property:** *textStyle*

``
``| -|shape height of legend| **Property:** *itemStyle.height*

var legend= { itemStyle : { height: 20 } };
``legend={legend}>`
``|**Property:** *shapeHeight*

``
``| -|shape width of legend| **Property:** *itemStyle.width*

var legend= { itemStyle : { width: 20 } };
``legend={legend}>`
``|**Property:** *shapeWidth*

``
``| +|Default legend| **Property:** *visible*

var legend= { visible: true };
``legend={legend}>`
``|**Property:** *visible*

``
``| +|Legend height| **Property:** *height*

var legend= { size : { height: 50 } };
``legend={legend}>`
``|**Property:** *height*

``
``| +|Legend width| **Property:** *size.width*

var legend= { size : { width: 50 } };
``legend={legend}>`
``|**Property:** *width*

``
``| +|Legend location in chart| **Property:** *location*

var legend= { location: { x: 3, y: 45} };
``legend={legend}>`
``|**Property:** *location*

``
``| +|Legend position in chart| **Property:** *position*

var legend= { position: 'top' };
``legend={legend}>`
``|**Property:** *position*

``
``| +|Legend padding|Not applicable|**Property:** *padding*

``
``| +|Legend alignment| **Property:** *alignment*

var legend= { alignment: 'center' };
``legend={legend}>`
``|**Property:** *alignment*

``
``| +|text style for legend| **Property:** *font*

var legend= { font: { fontFamily: ''} };
``legend={legend}>`
``|**Property:** *textStyle*

``
``| +|shape height of legend| **Property:** *itemStyle.height*

var legend= { itemStyle : { height: 20 } };
``legend={legend}>`
``|**Property:** *shapeHeight*

``
``| +|shape width of legend| **Property:** *itemStyle.width*

var legend= { itemStyle : { width: 20 } };
``legend={legend}>`
``|**Property:** *shapeWidth*

``
``| |shape border of legend| **Property:** *itemStyle.border*

var legend= { itemStyle : { border: {width: 20 }}};
``legend={legend}>`
``|Not Applicable| |shape padding of legend| **Property:** *itemPadding*

var legend= { itemPadding : 10 };
``legend={legend}>`
``|**Property:** *shapePadding*

``
``| -|Background of legend| **Property:** *background*

var legend= { background: 'transparent' };
``legend={legend}>`
``|**Property:** *backgorund*

``
``| +|Background of legend| **Property:** *background*

var legend= { background: 'transparent' };
``legend={legend}>`
``|**Property:** *background*

``
``| |Opacity of legend| **Property:** *opacity*

var legend= { opacity: 0.3 };
``legend={legend}>`
``|**Property:** *opacity*

``
``| |Toggle visibility of series while legend click| **Property:** *toggleSeriesVisibility*

var legend= { toggleSeriesVisibility : true };
``legend={legend}>`
``|**Property:** *toggleVisibility*

``
``| |Title for legend| **Property:** *title*

var legend= { title: { text: 'LegendTitle'} };
``legend={legend}>`
``|Not applicable| @@ -367,7 +366,7 @@ This article describes the API migration process of the Chart component from Ess |rows in chart| **Property:** *rowDefinitions*

var rowDefinitions=[{ }];
``rowDefinitions={rowDefinitions}>`
``|**Property:** *rowDirective*

``
``
``
``| |Unit| **Property:** *unit*

var rowDefinitions=[{ unit : 'percentage' }];
``rowDefinitions={rowDefinitions}>`
``|Not Applicable| |height of rows in chart| **Property:** *rowHeight*

var rowDefinitions=[{rowHeight : 50}]
``rowDefinitions={rowDefinitions}>`
``|**Property:** *height*

``
``
``
``| -|Line customization| **Property:** *lineColor, lineWidth*

var rowDefinitions=[{lineColor : 'Gray', linewidth : 0}]
``rowDefinitions={rowDefinitions}>`
``|**Property:** *border*

``
``
``
``| +|Line customization| **Property:** *lineColor, lineWidth*

var rowDefinitions=[{lineColor : 'Gray', linewidth : 0}]
``rowDefinitions={rowDefinitions}>`
``|**Property:** *border*

``
``
``
``| ## Series @@ -375,30 +374,30 @@ This article describes the API migration process of the Chart component from Ess | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | |bearFillColor| **Property:** *bearFillColor*

var series =[{ bearFillColor: 'red'}]
``series={series}>`
``|**Property:** *bearFillColor*

``
``
``
``| -|Border| **Property:** *border*

var series =[{ border: {color: 'red', width: 2}}]
``series={series}>`
``|**Property:** *border*

``
``
``
``| +|Border| **Property:** *border*

var series =[{ border: {color: 'red', width: 2}}]
``series={series}>`
``|**Property:** *border*

``
``
``
``| |BoxPlotMode| **Property:** *boxPlotMode*

var series =[{ boxPlotMode: 'inclusive'}]
``series={series}>`
``|**Property:** *boxPlotMode*

``
``
``
``| |Minimum radius of Bubble series| **Property:** *bubbleOptions.minRadius*

var series =[{ bubbleOptions: { minRadius: 2}}]
``series={series}>`
``|**Property:** *minRadius*

``
``
``
``| |Maximum radius of Bubble series| **Property:** *bubbleOptions.maxRadius*

var series =[{ bubbleOptions: { maxRadius: 2}}]
``series={series}>`
``|**Property:** *maxRadius*

``
``
``
``| |bullFillColor| **Property:** *bullFillColor*

var series =[{ bullFillColor: 'red'}]
``series={series}>`
``|**Property:** *bullFillColor*

``
``
``
``| |Cardinal spline tension for spline series| **Property:** *cardinalSplineTension*

var series =[{ cardinalSplineTension: 0.5}]
``series={series}>`
``|**Property:** *cardinalSplineTension*

``
``
``
``| -|Column Width for rectangle series| **Property:** *columnWidth*

var series =[{ columnWidth : 0.5}]
``series={series}>`
``|**Property:** *cardinalSplineTension*

``
``
``
``| +|Column Width for rectangle series| **Property:** *columnWidth*

var series =[{ columnWidth : 0.5}]
``series={series}>`
``|**Property:** *columnWidth*

``
``
``
``| |Column spacing for rectangle series| **Property:** *columnSpacing*

var series =[{ columnSpacing: 0.5}]
``series={series}>`
``|**Property:** *columnSpacing*

``
``
``
``| |Topleft radius for rectangle series| **Property:** *cornerRadius.topLeft*

var series =[{ topLeft: 0}]
``series={series}>`
``|**Property:** *cornerRadius.topLeft*

``
``
``
``| |topRight radius for rectangle series| **Property:** *cornerRadius.topRight*

var series =[{ topRight: 0}]
``series={series}>`
``|**Property:** *cornerRadius.topRight*

``
``
``
``| |bottomRight radius for rectangle series| **Property:** *cornerRadius.bottomRight*

var series =[{ bottomRight: 0}]
``series={series}>`
``|**Property:** *cornerRadius.bottomRight*

``
``
``
``| |bottomLeft radius for rectangle series| **Property:** *cornerRadius.bottomLeft*

var series =[{ bottomLeft: 0}]
``series={series}>`
``|**Property:** *cornerRadius.bottomLeft*

``
``
``
``| |DashArray property| **Property:** *dashArray*

var series =[{ dashArray: '10, 5'}]
``series={series}>`
``|**Property:** *dashArray*

``
``
``
``| -|DataSource for series| **Property:** *dataSource*

var series =[{ dataSource: {} }]
``series={series}>`
``|**Property:** *dataSource*

``
``
``
``| +|DataSource for series| **Property:** *dataSource*

var series =[{ dataSource: {} }]
``series={series}>`
``|**Property:** *dataSource*

``
``
``
``| |Draw type for Polar series| **Property:** *drawType*

var series =[{ drawType: 'Line'}]
``series={series}>`
``|**Property:** *drawType*

``
``
``
``| |EmptyPointSettings for series| **Property:** *emptyPointSettings.visible*

var series =[{emptyPointSettings: { visible: false }}]
``series={series}>`
``|Not Applicable| -|Empty Point Display mode| **Property:** *emptyPointSettings.displayMode*

var series =[{emptyPointSettings: { displayMode: 'gap'} }]
``series={series}>`
``|**Property:** *emptyPointSettings.displayMode*

``
``
``
``| -|Empty Point color| **Property:** *emptyPointSettings.color*

var series =[{ emptyPointSettings: { color: 'red'}}]
``series={series}>`
``|**Property:** *emptyPointSettings.color*

``
``
``
``| -|Empty Point Border| **Property:** *emptyPointSettings.border*

var series =[{emptyPointSettings: { border: {}}}]
``series={series}>`
``|**Property:** *emptyPointSettings.border*

``
``
``
``| -|Enable animation for series| **Property:** *enableAnimation*

var series =[{enableAnimation : true}]
``series={series}>`
``|**Property:** *animation.enable*

``
``
``
``| -|Animation duration for series| **Property:** *animationDuration*

var series =[{animationDuration: 1000}]
``series={series}>`
``|**Property:** *animation.duration*

``
``
``
``| -|Animation delay for series| Not Applicable|**Property:** *animation.delay*

``
``
``
``| +|Empty Point Display mode| **Property:** *emptyPointSettings.displayMode*

var series =[{emptyPointSettings: { displayMode: 'gap'} }]
``series={series}>`
``|**Property:** *emptyPointSettings.displayMode*

``
``
``
``| +|Empty Point color| **Property:** *emptyPointSettings.color*

var series =[{ emptyPointSettings: { color: 'red'}}]
``series={series}>`
``|**Property:** *emptyPointSettings.color*

``
``
``
``| +|Empty Point Border| **Property:** *emptyPointSettings.border*

var series =[{emptyPointSettings: { border: {}}}]
``series={series}>`
``|**Property:** *emptyPointSettings.border*

``
``
``
``| +|Enable animation for series| **Property:** *enableAnimation*

var series =[{enableAnimation : true}]
``series={series}>`
``|**Property:** *animation.enable*

``
``
``
``| +|Animation duration for series| **Property:** *animationDuration*

var series =[{animationDuration: 1000}]
``series={series}>`
``|**Property:** *animation.duration*

``
``
``
``| +|Animation delay for series| Not Applicable|**Property:** *animation.delay*

``
``
``
``| |Drag settings for series| **Property:** *dragSettings*

var series =[{dragSettings : { mode: 'X' }}]
``series={series}>`
``|Not Applicable| -|Errorbar settings for series| **Property:** *errorBarSettings*

var series =[{errorBarSettings: { }}]
``series={series}>`
``|**Property:** *errorBarSettings*

``
``
``
``| +|Errorbar settings for series| **Property:** *errorBarSettings*

var series =[{errorBarSettings: { }}]
``series={series}>`
``|**Property:** *errorBarSettings*

``
``
``
``| |Closed series| **Property:** *isClosed*

var series =[{isClosed: true}]
``series={series}>`
``|**Property:** *isClosed*

``
``
``
``| |Stacking Property for series| **Property:** *isStacking*

var series =[{isStacking : true}]
``series={series}>`
``|Not Applicable| |Line cap for series| **Property:** *lineCap*

var series =[{lineCap : 'butt'}]
``series={series}>`
``|Not Applicable| @@ -406,10 +405,10 @@ This article describes the API migration process of the Chart component from Ess |Opacity for series| **Property:** *opacity*

var series =[{opacity: 0.7}]
``series={series}>`
``|**Property:** *opacity*

``
``
``
``| |Outlier settings of series| **Property:** *outLierSettings*

var series =[{outLierSettings: { }}]
``series={series}>`
``|Not Applicable| |Palette| **Property:** *palette*

var series =[{palette: "ColorFieldName"}]
``series={series}>`
``|**Property:** *pointColorMapping*

``
``
``
``| -|Positive fill for waterfall series| **Property:** *positiveFill*

var series =[{ positiveFill: "red"}]
``series={series}>`
``|**Property:** *positiveFill*

``
``
``
``| +|Positive fill for waterfall series| **Property:** *positiveFill*

var series =[{ positiveFill: "red"}]
``series={series}>`
``|**Property:** *positiveFill*

``
``
``
``| |Show average value in box and whisker series| **Property:** *showMedian*

var series =[{ showMedian: true}]
``series={series}>`
``|**Property:** *showMean*

``
``
``
``| |To group the series of stacking collection| **Property:** *stackingGroup*

var series =[{ stackingGroup: 'group'}]
``series={series}>`
``|**Property:** *stackingGroup*

``
``
``
``| -|Specifies the type of the series to render in chart.| **Property:** *type*

var series =[{ type: 'Line'}]
``series={series}>`
``|**Property:** *type*

``
``
``
``| +|Specifies the type of the series to render in chart.| **Property:** *type*

var series =[{ type: 'Line'}]
``series={series}>`
``|**Property:** *type*

``
``
``
``| |Defines the visibility of the series| **Property:** *visibility*

var series =[{ visibility: true}]
``series={series}>`
``|**Property:** *visible*

``
``
``
``| |Specifies the different types of spline curve| **Property:** *splineType*

var series =[{ splineType : 'Natural'}]
``series={series}>`
``|**Property:** *splineType*

``
``
``
``| |Specifies the name of the x-axis that has to be associated with this series. Add an axis instance with this name to axes collection.| **Property:** *xAxisName*

var series =[{xAxisName : 'secondaryXAxis'}]
``series={series}>`
``|**Property:** *xAxisName*

``
``
``
``| @@ -420,7 +419,7 @@ This article describes the API migration process of the Chart component from Ess |Name of the property in the datasource that contains low value for the series.| **Property:** *low*

var series =[{low : 'y'}]
``series={series}>`
``|**Property:** *low*

``
``
``
``| |Name of the property in the datasource that contains close value for the series.| **Property:** *close*

var series =[{close : 'y'}]
``series={series}>`
``|**Property:** *close*

``
``
``
``| |Name of the property in the datasource that contains open value for the series| **Property:** *open*

var series =[{open : 'y'}]
``series={series}>`
``|**Property:** *open*

``
``
``
``| -|Option to add trendlines to chart| **Property:** *trendLines*

var series =[{trendLines : [{}]}]
``series={series}>`
``|**Property:** *trendLines*

``
``
``
``| +|Option to add trendlines to chart| **Property:** *trendLines*

var series =[{trendLines : [{}]}]
``series={series}>`
``|**Property:** *trendLines*

``
``
``
``| |Options for customizing the appearance of the series or data point while highlighting| **Property:** *highlightSettings*

var series =[{ highlightSettings : {}}]
``series={series}>`
``|Not applicable.| |Options for customizing the appearance of the series/data point on selection| **Property:** *selectionSettings*

var series =[{ selectionSettings : {}}]
``series={series}>`
``|Not applicable.| @@ -429,29 +428,28 @@ This article describes the API migration process of the Chart component from Ess | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | -|visibility of marker| **Property:** *marker.visible*

var series =[{marker: { visible: true }}]
``series={series}>`
``|**Property:** *marker.visible*

``
``
``
``| -|visibility of marker| **Property:** *marker.visible*

var series =[{marker: { visible: true }}]
``series={series}>`
``|**Property:** *marker.visible*

``
``
``
``| -|Fill for marker| **Property:** *marker.fill*

var series =[{marker: { fill : 'red' }}]
``series={series}>`
``|**Property:** *marker.fill*

``
``
``
``| -|Opacity for marker| **Property:** *marker.opacity*

var series =[{marker: { opacity : 0.5 }}]
``series={series}>`
``|**Property:** *marker.opacity*

``
``
``
``| -|Shape of marker| **Property:** *marker.shape*

var series =[{marker: { shape : 'Circle'}}]
``series={series}>`
``|**Property:** *marker.shape*

``
``
``
``| -|ImageUrl of marker| **Property:** *imageUrl*

var series =[{marker: { imageUrl : ''}}]
``series={series}>`
``|**Property:** *imageUrl*

``
``
``
``| -|Border of marker| **Property:** *border*

var series =[{marker: { border : { width: 2, color: 'red' }}}]
``series={series}>`
``|**Property:** *border*

``
``
``
``| -|Height of marker| **Property:** *size.height*

var series =[{marker:{ size: { height: 30}} }]
``series={series}>`
``|**Property:** *height*

``
``
``
``| -|Width of marker| **Property:** *size.width*

var series =[{marker:{ size: { width: 30}} }]
``series={series}>`
``|**Property:** *width*

``
``
``
``| -|DataLabelSettings of marker| **Property:** *marker.dataLabel*

var series =[{marker:{ dataLabel: { }} }]
``series={series}>`
``|**Property:** *marker.dataLabel*

``
``
``
``| -|Visibility of dataLabel| **Property:** *dataLabel.visible*

var series =[{marker:{ dataLabel: { visible: true }} }]
``series={series}>`
``|**Property:** *dataLabel.visible*

``
``
``
``| -|Text mapping name of dataLabel| **Property:** *dataLabel.textMappingName*

var series =[{marker:{ dataLabel: { textMappingName: '' }} }]
``series={series}>`
``|**Property:** *dataLabel.name*

``
``
``
``| -|Fill color of data label| **Property:** *dataLabel.fill*

var series =[{marker:{ dataLabel: { fill: 'pink' }} }]
``series={series}>`
``|**Property:** *dataLabel.fill*

``
``
``
``| -|Opacity of data label| **Property:** *dataLabel.opacity*

var series =[{marker:{ dataLabel: { opacity: 0.6 }} }]
``series={series}>`
``|**Property:** *dataLabel.opacity*

``
``
``
``| -|Text position of data label| **Property:** *dataLabel.textPosition*

var series =[{marker:{ dataLabel: {textPosition: 'middle' }} }]
``series={series}>`
``|**Property:** *dataLabel.position*

``
``
``
``| -|Alignment of data label| **Property:** *dataLabel.verticalAlignment*

var series =[{marker:{ dataLabel: {verticalAlignment: 'near' }} }]
``series={series}>`
``|**Property:** *dataLabel.alignment*

``
``
``
``| -|Border of data label| **Property:** *dataLabel.border*

var series =[{marker:{ dataLabel: {border: {}} }]
``series={series}>`
``|**Property:** *dataLabel.border*

``
``
``
``| +|visibility of marker| **Property:** *marker.visible*

var series =[{marker: { visible: true }}]
``series={series}>`
``|**Property:** *marker.visible*

``
``
``
``| +|Fill for marker| **Property:** *marker.fill*

var series =[{marker: { fill : 'red' }}]
``series={series}>`
``|**Property:** *marker.fill*

``
``
``
``| +|Opacity for marker| **Property:** *marker.opacity*

var series =[{marker: { opacity : 0.5 }}]
``series={series}>`
``|**Property:** *marker.opacity*

``
``
``
``| +|Shape of marker| **Property:** *marker.shape*

var series =[{marker: { shape : 'Circle'}}]
``series={series}>`
``|**Property:** *marker.shape*

``
``
``
``| +|ImageUrl of marker| **Property:** *imageUrl*

var series =[{marker: { imageUrl : ''}}]
``series={series}>`
``|**Property:** *imageUrl*

``
``
``
``| +|Border of marker| **Property:** *border*

var series =[{marker: { border : { width: 2, color: 'red' }}}]
``series={series}>`
``|**Property:** *border*

``
``
``
``| +|Height of marker| **Property:** *size.height*

var series =[{marker:{ size: { height: 30}} }]
``series={series}>`
``|**Property:** *height*

``
``
``
``| +|Width of marker| **Property:** *size.width*

var series =[{marker:{ size: { width: 30}} }]
``series={series}>`
``|**Property:** *width*

``
``
``
``| +|DataLabelSettings of marker| **Property:** *marker.dataLabel*

var series =[{marker:{ dataLabel: { }} }]
``series={series}>`
``|**Property:** *marker.dataLabel*

``
``
``
``| +|Visibility of dataLabel| **Property:** *dataLabel.visible*

var series =[{marker:{ dataLabel: { visible: true }} }]
``series={series}>`
``|**Property:** *dataLabel.visible*

``
``
``
``| +|Text mapping name of dataLabel| **Property:** *dataLabel.textMappingName*

var series =[{marker:{ dataLabel: { textMappingName: '' }} }]
``series={series}>`
``|**Property:** *dataLabel.name*

``
``
``
``| +|Fill color of data label| **Property:** *dataLabel.fill*

var series =[{marker:{ dataLabel: { fill: 'pink' }} }]
``series={series}>`
``|**Property:** *dataLabel.fill*

``
``
``
``| +|Opacity of data label| **Property:** *dataLabel.opacity*

var series =[{marker:{ dataLabel: { opacity: 0.6 }} }]
``series={series}>`
``|**Property:** *dataLabel.opacity*

``
``
``
``| +|Text position of data label| **Property:** *dataLabel.textPosition*

var series =[{marker:{ dataLabel: {textPosition: 'middle' }} }]
``series={series}>`
``|**Property:** *dataLabel.position*

``
``
``
``| +|Alignment of data label| **Property:** *dataLabel.verticalAlignment*

var series =[{marker:{ dataLabel: {verticalAlignment: 'near' }} }]
``series={series}>`
``|**Property:** *dataLabel.alignment*

``
``
``
``| +|Border of data label| **Property:** *dataLabel.border*

var series =[{marker:{ dataLabel: {border: {}} }]
``series={series}>`
``|**Property:** *dataLabel.border*

``
``
``
``| |Offset for data label| **Property:** *dataLabel.offset*

var series =[{marker:{ dataLabel: {offset: { x: 5, y: 6 }} }]
``series={series}>`
``|Not Applicable| -|Margin of data label| **Property:** *dataLabel.margin*

var series =[{marker:{ dataLabel: {margin: {}} }]
``series={series}>`
``|**Property:** *dataLabel.margin*

``
``
``
``| -|Font of data label| **Property:** *dataLabel.font*

var series =[{marker:{ dataLabel: {font: {}} }]
``series={series}>`
``|**Property:** *dataLabel.font*

``
``
``
``| -|HTML template in dataLabel| **Property:** *dataLabel.template*

var series =[{marker:{ dataLabel: {template: '
Chart
'} }]
``series={series}>`
``|**Property:** *dataLabel.template*

``
`Chart' }}>`
``
``| -|Rounded corner radius X| Not Applicable|**Property:** *dataLabel.rx*

``
``
``
``| -|Rounded corner radius Y| Not Applicable|**Property:** *dataLabel.ry*

``
``
``
``| +|Margin of data label| **Property:** *dataLabel.margin*

var series =[{marker:{ dataLabel: {margin: {}} }]
``series={series}>`
``|**Property:** *dataLabel.margin*

``
``
``
``| +|Font of data label| **Property:** *dataLabel.font*

var series =[{marker:{ dataLabel: {font: {}} }]
``series={series}>`
``|**Property:** *dataLabel.font*

``
``
``
``| +|HTML template in dataLabel| **Property:** *dataLabel.template*

var series =[{marker:{ dataLabel: {template: '
Chart
'} }]
``series={series}>`
``|**Property:** *dataLabel.template*

``
`Chart' } }}>`
``
``| +|Rounded corner radius X| Not Applicable|**Property:** *dataLabel.rx*

``
``
``
``| +|Rounded corner radius Y| Not Applicable|**Property:** *dataLabel.ry*

``
``
``
``| |Maximum Label width for data label| **Property:** *dataLabel.maximumLabelWidth*

var series =[{marker:{ dataLabel: {maximumLabelWidth: 20} }]
``series={series}>`
``|Not Applicable| |Enable wrapping of text for data label| **Property:** *dataLabel.enableWrap*

var series =[{marker:{ dataLabel: {enableWrap: true} }]
``series={series}>`
``|Not Applicable| |To show contrast color for data label| **Property:** *dataLabel.showContrastColor*

var series =[{marker:{ dataLabel: {showContrastColor: true} }]
``series={series}>`
``|Not Applicable| @@ -474,8 +472,8 @@ This article describes the API migration process of the Chart component from Ess |Width for trendLines| **Property:** *trendLines.width*

var series =[{trendlines: [{ width: 2 }] }]
``series={series}>`
``|**Property:** *trendLines.width*

``
``
``
``| |Intercept value for trendLines| **Property:** *trendLines.intercept*

var series =[{trendlines: [{ intercept: 2 }] }]
``series={series}>`
``|**Property:** *trendLines.intercept*

``
``
``
``| |Legend shape for trendLines| Not Applicable|**Property:** *trendLines.legendShape*

``
``
``
``| -|Animation settings for trendLines| Not Applicable|**Property:** *trendLines.animation*

``
``
``
``| -|Marker settings for trendLines| Not Applicable|**Property:** *trendLines.marker*

``
``
``
``| +|Animation settings for trendLines| Not Applicable|**Property:** *trendLines.animation*

``
``
``
``| +|Marker settings for trendLines| Not Applicable|**Property:** *trendLines.marker*

``
``
``
``| |Tooltip for trendLines| **Property:** *trendLines.tooltip*

var series =[{trendlines: [{ tooltip: { } }] }]
``series={series}>`
``|**Property:** *trendLines.enableTooltip*

``
``
``
``| |DashArray for trendLines| **Property:** *trendLines.dashArray*

var series =[{trendlines: [{ dashArray: '10, 5' }] }]
``series={series}>`
``|Not Applicable.| |Visible on legend for trendLines| **Property:** *trendLines.visibleOnLegend*

var series =[{trendlines: [{ visibleOnLegend: true }] }]
``series={series}>`
``|Not Applicable.| @@ -503,15 +501,15 @@ This article describes the API migration process of the Chart component from Ess | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | -|Default behaviour for multilevelLabels| **Property:** *stripLines.fontStyle*

var primaryYAxis = { multiLevelLabels: [{ }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *primaryXAxis.multilevelLabels*

``
``| -|Text alignment for multilevelLabels| **Property:** *multiLevelLabels.textAlignment*

var primaryYAxis = { multiLevelLabels: [{ textAlignment: 'Near' }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *primaryXAxis.multilevelLabels*

``
``| -|multilevelLabels.alignment| **Property:** *multiLevelLabels.textAlignment*

var primaryYAxis = { multiLevelLabels: [{ textAlignment: 'Near' }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multilevelLabels.alignment*

``
``| -|Text overflow for multilevelLabels| **Property:** *multiLevelLabels.textOverFlow*

var primaryYAxis = { multiLevelLabels: [{ textOverFlow : 'Trim' }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multiLevelLabels.overFlow*

``
``| -|Border for multilevelLabels| **Property:** *multiLevelLabels.border*

var primaryYAxis = { multiLevelLabels: [{ border: { } }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multiLevelLabels.border*

``
``| -|Start value for label| **Property:** *multiLevelLabels.start*

var primaryYAxis = { multiLevelLabels: [{ start: 45 }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multiLevelLabels.categories.start*

``
``| -|End value for label| **Property:** *multiLevelLabels.end*

var primaryYAxis = { multiLevelLabels: [{ end: 45 }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multiLevelLabels.categories.end*

``
``| -|Text for label| **Property:** *multiLevelLabels.text*

var primaryYAxis = { multiLevelLabels: [{ text: 'Start' }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multiLevelLabels.categories.text*

``
``| -|maximum text width for label| **Property:** *multiLevelLabels.maximumTextWidth*

var primaryYAxis = { multiLevelLabels: [{ maximumTextWidth: 10 }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multiLevelLabels.categories.maximumTextWidth*

``
``| +|Default behaviour for multilevelLabels| **Property:** *multiLevelLabels*

var primaryYAxis = { multiLevelLabels: [{ }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *primaryXAxis.multilevelLabels*

``
``| +|Text alignment for multilevelLabels| **Property:** *multiLevelLabels.textAlignment*

var primaryYAxis = { multiLevelLabels: [{ textAlignment: 'Near' }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *primaryXAxis.multilevelLabels*

``
``| +|multilevelLabels.alignment| **Property:** *multiLevelLabels.textAlignment*

var primaryYAxis = { multiLevelLabels: [{ textAlignment: 'Near' }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multilevelLabels.alignment*

``
``| +|Text overflow for multilevelLabels| **Property:** *multiLevelLabels.textOverFlow*

var primaryYAxis = { multiLevelLabels: [{ textOverFlow : 'Trim' }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multilevelLabels.overFlow*

``
``| +|Border for multilevelLabels| **Property:** *multiLevelLabels.border*

var primaryYAxis = { multiLevelLabels: [{ border: { } }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multilevelLabels.border*

``
``| +|Start value for label| **Property:** *multiLevelLabels.start*

var primaryYAxis = { multiLevelLabels: [{ start: 45 }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multilevelLabels.categories.start*

``
``| +|End value for label| **Property:** *multiLevelLabels.end*

var primaryYAxis = { multiLevelLabels: [{ end: 45 }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multilevelLabels.categories.end*

``
``| +|Text for label| **Property:** *multiLevelLabels.text*

var primaryYAxis = { multiLevelLabels: [{ text: 'Start' }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multilevelLabels.categories.text*

``
``| +|maximum text width for label| **Property:** *multiLevelLabels.maximumTextWidth*

var primaryYAxis = { multiLevelLabels: [{ maximumTextWidth: 10 }] };
``primaryXAxis ={primaryXAxis}>`
``|**Property:** *multilevelLabels.categories.maximumTextWidth*

``
``| |level of label| **Property:** *multiLevelLabels.level*

var primaryYAxis = { multiLevelLabels: [{ level: 10 }] };
``primaryXAxis ={primaryXAxis}>`
``|Not applicable| ## Methods @@ -520,11 +518,11 @@ This article describes the API migration process of the Chart component from Ess | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | |animation for series| **Property:** *animate()*

var chartobj= document.getElementById('chart');
``id= chart>`
``
chartobj.animate();|Not applicable| -|Redraw for chart| **Property:** *redraw()*

var chartobj= document.getElementById('chart');
``id= chart>`
``
chartobj.redraw();|**Property:** *refresh()*

public loaded(args: ILoadedEventArgs): void {
function () => {
args.chart.refresh();
``
``| +|Redraw for chart| **Property:** *redraw()*

var chartobj= document.getElementById('chart');
``id= chart>`
``
chartobj.redraw();|**Property:** *refresh()*

public loaded(args: ILoadedEventArgs): void {
args.chart.refresh();
}
``
``| |Export| **Property:** *chart.export()*

var chartObj = $("#chartcontainer").ejChart("instance");
chartObj.export("chartcontainer");
``id= chartcontainer>`
``|**Property:** *chart.export()*

public chartInstance: ChartComponent;
public clickHandler() {
this.chartInstance.export();
``
``| -|Print| **Property:** *chart.print()*

var chartObj = $("#chartcontainer").ejChart("instance");
chartObj.print("chartcontainer");
``id= chartcontainer>`
``|**Property:** *chart.print()*

public chartInstance: ChartComponent;
public clickHandler() {
this.chartInstance.print();
``
``| +|Print| **Property:** *chart.print()*

var chartObj = $("#chartcontainer").ejChart("instance");
chartObj.print("chartcontainer");
``id= chartcontainer>`
``|**Property:** *chart.print()*

public chartInstance: ChartComponent;
public clickHandler() {
this.chartInstance.print();
}
``
``| |AddSeries| Not Applicable|**Property:** *chart.addSeries()*

public add() {
this.chartInstance.addSeries([{ }]) };
``
``| -|AddSeries| Not Applicable|**Property:** *chart.removeSeries()*

public add() {
this.chartInstance.removeSeries([{ }]) };
``
``| +|RemoveSeries| Not Applicable|**Property:** *chart.removeSeries()*

public remove() {
this.chartInstance.removeSeries([{ }]) };
``
``| ## Events @@ -586,7 +584,7 @@ This article describes the API migration process of the Chart component from Ess | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | |selected data index| **Property:** *selectedDataPointIndexes*

var selectedDataPointIndexes = [ { seriesIndex: 0, pointIndex: 1}];
``id= 'chartcontainer' selectedDataPointIndexes= {selectedDataPointIndexes}>`
``|**Property:** *selectedDataIndexes*

public selectedDataIndexes: [ { series: 0, point: 1}];
``id='charts' selectedDataIndexes={this.selectedDataIndexes}>`
``| -|sideBySideSeriesPlacement for column based series| **Property:** *sideBySideSeriesPlacement*

var sideBySideSeriesPlacement = [ { seriesIndex: 0, pointIndex: 1}];
``id= 'chartcontainer' sideBySideSeriesPlacement= {sideBySideSeriesPlacement}>`
``|**Property:** *sideBySidePlacement*

public sideBySidePlacement: [{true}];
``id='charts' sideBySidePlacement={this.sideBySidePlacement}>`
``
| +|sideBySideSeriesPlacement for column based series| **Property:** *sideBySideSeriesPlacement*

var sideBySideSeriesPlacement = true;
``id= 'chartcontainer' sideBySideSeriesPlacement= {sideBySideSeriesPlacement}>`
``|**Property:** *sideBySidePlacement*

public sideBySidePlacement: [{true}];
``id='charts' sideBySidePlacement={this.sideBySidePlacement}>`
``
| |ZoomSettings| **Property:** *zooming*

var zooming = {enable: true};
``id= 'chartcontainer' zooming= {zooming}>`
``|**Property:** *zoomSettings*

public zoomsettings: ZoomSettingsModel =
{enableMouseWheelZooming: true}
``id='charts' zoomSettings={this.zoomsettings}>`
``
| |Background color of the chart| **Property:** *background*

``id= 'chartcontainer' background='transparent'>`
``|**Property:** *background*

``id='charts' background='#EEFFCC'>`
``
| |URL of the image to be used as chart background.| **Property:** *backGroundImageUrl*

``id= 'chartcontainer' background='transparent'>`
``|Not Applicable| diff --git a/chart-sdk/react/charts/feature-modules.md b/chart-sdk/react/charts/feature-modules.md index 862d5ee3f..16f18ee30 100644 --- a/chart-sdk/react/charts/feature-modules.md +++ b/chart-sdk/react/charts/feature-modules.md @@ -10,73 +10,105 @@ domainurl: https://help.syncfusion.com/chart-sdk # Module in React Chart component -The following available modules should be injected to extend the Chart's functionality. +Chart features in the Syncfusion React Chart are opt-in. To use a specific series, axis, indicator, or feature such as tooltip, legend, or zoom, the corresponding module must be injected. Modules keep the base bundle small and let you include only what your chart needs. -The available chart modules are +## Injecting modules + +Import the modules you need from `@syncfusion/ej2-react-charts` and register them on the `Chart` class using the static `Inject` method. Place the `Inject` call once, outside the component function, so it runs when the module loads. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/getting-started-cs1/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/getting-started-cs1/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +> Tip: Importing only the modules you use enables tree-shaking and reduces the final bundle size. + +The available chart modules are listed below. + +## Axis Type Feature Modules | Module | Description | |------|-------------| -| **Axis Type Feature Modules** | -| [`Category`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype)| Inject this module to use category axis type to visualize category (string type) values.| -| [`DateTime`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype)| Inject this module to use date time axis type to visualize datetime values.| -| [`Logarithmic`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype)| Inject this module to use log axis type to visualize logarithmic values.| -| [`DateTimeCategory`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype)| Inject this module to use date time category axis type to visualize datetime category values.| -| **Series Type Feature Modules** | -| [`LineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the line type series in the chart.| -| [`StepLineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the step line type series in the chart.| -| [`StackingLineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the stacking line type series in the chart.| -| [`MultiColoredLineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the multi colored line type series in the chart.| -| [`SplineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the spline type series in the chart.| -| [`AreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the area type series in the chart.| -| [`RangeAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the range area type series in the chart.| -| [`RangeStepAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the range step area type series in the chart.| -| [`SplineRangeAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the spline range area type series in the chart.| -| [`StackingAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the stacking area type series in the chart.| -| [`StackingStepAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the stacking step area type series in the chart.| -| [`StepAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the step area type series in the chart.| -| [`SplineAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the spline area type series in the chart.| -| [`MultiColoredAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the multi colored area type series in the chart.| -| [`ColumnSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the column type series in the chart.| -| [`RangeColumnSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the range column type series in the chart.| -| [`StackingColumnSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the stacking column type series in the chart.| -| [`BarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the bar type series in the chart.| -| [`StackingBarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the stacking bar type series in the chart.| -| [`ScatterSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the scatter type series in the chart.| -| [`BubbleSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the bubble type series in the chart.| -| [`PolarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the polar type series in the chart.| -| [`RadarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the radar type series in the chart.| -| [`HiloSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the hilo type series in the chart.| -| [`HiloOpenCloseSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the hilo open close type series in the chart.| -| [`CandleSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the candle type series in the chart.| -| [`BoxAndWhiskerSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the box and whisker type series in the chart.| -| [`WaterfallSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the waterfall type series in the chart.| -| [`HistogramSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type)| Inject this module to use the histogram type series in the chart.| -| [`ParetoSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#paretooptions)| Inject this module to use the pareto type series in the chart.| -| [`ErrorBar`](https://ej2.syncfusion.com/react/documentation/api/chart/series#errorbar)| Inject this module to use the error bar feature in series.| -| **Indicator Type Feature Modules** | -| [`AccumulationDistributionIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicator)| Inject this module to use the accumulation distribution indicator.| -| [`AtrIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator)| Inject this module to use the average true range (ATR) indicator.| -| [`BollingerBands`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator)| Inject this module to use the bollinger band indicator.| -| [`EMAIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator)| Inject this module to use the exponential moving average (EMA) indicator.| -| [`MomentumIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator)| Inject this module to use the momentum indicator.| -| [`MACDIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator)| Inject this module to use the moving average convergence divergence (MACD) indicator.| -| [`RsiIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator)| Inject this module to use the relative Strength index (Rsi) indicator.| -| [`SmaIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator)| Inject this module to use the simple moving average (SMA) indicator.| -| [`StochasticIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator)| Inject this module to use the stochastic indicator.| -| [`TmaIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator)| Inject this module to use the triangular moving average indicator.| -| **Other Feature Modules** | -| [`StripLine`](https://ej2.syncfusion.com/react/documentation/api/chart/stripline)| Inject this module to use strip line feature.| -| [`Trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart/trendline)| Inject this module to use the trendline feature.| -| [`DataLabel`](https://ej2.syncfusion.com/react/documentation/api/chart/datalabel)| Inject this module to use the data label feature.| -| [`ChartAnnotation`](https://ej2.syncfusion.com/react/documentation/api/chart/chartannotationsettings)| Inject this module to use the annotation feature.| -| [`Legend`](https://ej2.syncfusion.com/react/documentation/api/chart/legendsettings)| Inject this module to use the legend feature.| -| [`Tooltip`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipsettings)| Inject this module to use the tooltip feature.| -| [`Zoom`](https://ej2.syncfusion.com/react/documentation/api/chart/zoomsettings)| Inject this module to use the zooming and panning feature.| -| [`DataEditing`](https://ej2.syncfusion.com/react/documentation/api/chart/dragsettings)| Inject this module to use the data editing feature.| -| [`Crosshair`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshair)| Inject this module to use the crosshair feature.| -| [`Selection`](https://ej2.syncfusion.com/react/documentation/api/chart/selection)| Inject this module to use the selection feature.| -| [`Highlight`](https://ej2.syncfusion.com/react/documentation/api/chart/highlight)| Inject this module to use the highlight feature.| -| [`Export`](https://ej2.syncfusion.com/react/documentation/api/chart/export)| Inject this module to use the export feature.| -| [`MultiLevelLabel`](https://helpej2.syncfusion.com/react/documentation/api/chart/multiLevelLabels)| Inject this module to use the multi level label feature.| - -These modules should be injected into the `modules` section of the root `NgModule` or into a standalone component that requires the feature. +| [`Category`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype) | Inject this module to use the category axis type to visualize category (string) values. | +| [`DateTime`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype) | Inject this module to use the date time axis type to visualize datetime values. | +| [`Logarithmic`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype) | Inject this module to use the log axis type to visualize logarithmic values. | +| [`DateTimeCategory`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype) | Inject this module to use the date time category axis type to visualize datetime category values. | + +## Series Type Feature Modules + +| Module | Description | +|------|-------------| +| [`LineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the line type series in the chart. | +| [`StepLineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the step line type series in the chart. | +| [`StackingLineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the stacking line type series in the chart. | +| [`MultiColoredLineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the multi-colored line type series in the chart. | +| [`SplineSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the spline type series in the chart. | +| [`AreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the area type series in the chart. | +| [`RangeAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the range area type series in the chart. | +| [`RangeStepAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the range step area type series in the chart. | +| [`SplineRangeAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the spline range area type series in the chart. | +| [`StackingAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the stacking area type series in the chart. | +| [`StackingStepAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the stacking step area type series in the chart. | +| [`StepAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the step area type series in the chart. | +| [`SplineAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the spline area type series in the chart. | +| [`MultiColoredAreaSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the multi-colored area type series in the chart. | +| [`ColumnSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the column type series in the chart. | +| [`RangeColumnSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the range column type series in the chart. | +| [`StackingColumnSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the stacking column type series in the chart. | +| [`BarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the bar type series in the chart. | +| [`StackingBarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the stacking bar type series in the chart. | +| [`ScatterSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the scatter type series in the chart. | +| [`BubbleSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the bubble type series in the chart. | +| [`PolarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the polar type series in the chart. | +| [`RadarSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the radar type series in the chart. | +| [`HiloSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the hilo type series in the chart. | +| [`HiloOpenCloseSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the hilo open close type series in the chart. | +| [`CandleSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the candle type series in the chart. | +| [`BoxAndWhiskerSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the box and whisker type series in the chart. | +| [`WaterfallSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the waterfall type series in the chart. | +| [`HistogramSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) | Inject this module to use the histogram type series in the chart. | +| [`ParetoSeries`](https://ej2.syncfusion.com/react/documentation/api/chart/series#paretooptions) | Inject this module to use the pareto type series in the chart. | +| [`ErrorBar`](https://ej2.syncfusion.com/react/documentation/api/chart/series#errorbar) | Inject this module to use the error bar feature in series. | + +## Indicator Type Feature Modules + +| Module | Description | +|------|-------------| +| [`AccumulationDistributionIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator) | Inject this module to use the accumulation distribution indicator. | +| [`AtrIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator) | Inject this module to use the average true range (ATR) indicator. | +| [`BollingerBands`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator) | Inject this module to use the bollinger band indicator. | +| [`EMAIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator) | Inject this module to use the exponential moving average (EMA) indicator. | +| [`MomentumIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator) | Inject this module to use the momentum indicator. | +| [`MACDIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator) | Inject this module to use the moving average convergence divergence (MACD) indicator. | +| [`RsiIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator) | Inject this module to use the relative strength index (RSI) indicator. | +| [`SmaIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator) | Inject this module to use the simple moving average (SMA) indicator. | +| [`StochasticIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator) | Inject this module to use the stochastic indicator. | +| [`TmaIndicator`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicator) | Inject this module to use the triangular moving average indicator. | + +## Other Feature Modules + +| Module | Description | +|------|-------------| +| [`StripLine`](https://ej2.syncfusion.com/react/documentation/api/chart/stripline) | Inject this module to use the strip line feature. | +| [`Trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart/trendline) | Inject this module to use the trendline feature. | +| [`DataLabel`](https://ej2.syncfusion.com/react/documentation/api/chart/datalabel) | Inject this module to use the data label feature. | +| [`ChartAnnotation`](https://ej2.syncfusion.com/react/documentation/api/chart/chartannotationsettings) | Inject this module to use the annotation feature. | +| [`Legend`](https://ej2.syncfusion.com/react/documentation/api/chart/legendsettings) | Inject this module to use the legend feature. | +| [`Tooltip`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipsettings) | Inject this module to use the tooltip feature. | +| [`Zoom`](https://ej2.syncfusion.com/react/documentation/api/chart/zoomsettings) | Inject this module to use the zooming and panning feature. | +| [`DataEditing`](https://ej2.syncfusion.com/react/documentation/api/chart/dragsettings) | Inject this module to use the data editing feature. | +| [`Crosshair`](https://ej2.syncfusion.com/react/documentation/api/chart/crosshair) | Inject this module to use the crosshair feature. | +| [`Selection`](https://ej2.syncfusion.com/react/documentation/api/chart/selection) | Inject this module to use the selection feature. | +| [`Highlight`](https://ej2.syncfusion.com/react/documentation/api/chart/highlight) | Inject this module to use the highlight feature. | +| [`Export`](https://ej2.syncfusion.com/react/documentation/api/chart/export) | Inject this module to use the export feature. | +| [`MultiLevelLabel`](https://ej2.syncfusion.com/react/documentation/api/chart/multilevellabel) | Inject this module to use the multi-level label feature. | + +## See also + +* [Getting Started with the React Chart](getting-started) +* [Chart Series](chart-series) +* [Chart API Reference](api) \ No newline at end of file diff --git a/chart-sdk/react/charts/financial-types.md b/chart-sdk/react/charts/financial-types.md index 76a763506..dd4a4bc77 100644 --- a/chart-sdk/react/charts/financial-types.md +++ b/chart-sdk/react/charts/financial-types.md @@ -10,19 +10,21 @@ domainurl: https://help.syncfusion.com/chart-sdk # Financial types in React Chart component -Financial charts are used to illustrate the movements in the price of a financial instrument over time. +Financial charts illustrate the price movements of a financial instrument over time. -To get start quickly with React Financial Charts, you can check on this video: +To get started quickly with React financial charts, you can watch this video: {% youtube "https://www.youtube.com/watch?v=nxcMqkfI-nA" %} -Chart supports the following financial series +The Chart component supports the following financial series: ## Hilo -To render a Hilo series, use series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) as `Hilo` and inject `HiloSeries` module into the `services`. +To render a Hilo series, set the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) to `Hilo` and inject the `HiloSeries` module via the `services` prop of ``. + +**Required data fields:** The data source must contain an `x` value, a `low` value, and a `high` value. Map the `xName`, `low`, and `high` properties of the `SeriesDirective` to the corresponding fields in your data. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -35,9 +37,11 @@ To render a Hilo series, use series [`type`](https://ej2.syncfusion.com/react/do {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/hilo-cs1" %} -## High Low Open Close +## Hilo Open Close + +To render a Hilo Open Close series, set the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) to `HiloOpenClose` and inject the `HiloOpenCloseSeries` module via the `services` prop of ``. -To render a HiloOpenClose series, use series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) as `HiloOpenClose` and inject `HiloOpenCloseSeries` module into the `services`. +**Required data fields:** The data source must contain `x`, `low`, `high`, `open`, and `close` values. Map the `xName`, `low`, `high`, `open`, and `close` properties of the `SeriesDirective` to the corresponding fields in your data. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -50,9 +54,9 @@ To render a HiloOpenClose series, use series [`type`](https://ej2.syncfusion.com {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/hiloOpenClose-cs1" %} -## Customization of HiloOpenClose Series +### Customization of Hilo Open Close Series -In HiloOpenClose series, [`bullFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/series#bullfillcolor) is used to fill the segment when the open value is greater than the close value and [`bearFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/series#bearfillcolor) is used to fill the segment when the open value is less than the close value. +In the Hilo Open Close series, the [`bullFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/series#bullfillcolor) is used to fill the segment when the open value is greater than the close value, and the [`bearFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/series#bearfillcolor) is used to fill the segment when the open value is less than the close value. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -67,7 +71,9 @@ In HiloOpenClose series, [`bullFillColor`](https://ej2.syncfusion.com/react/docu ## Candle -To render a Candle series, use series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) as `Candle` and inject `CandleSeries` module into the `services`. +To render a Candle series, set the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) to `Candle` and inject the `CandleSeries` module via the `services` prop of ``. + +**Required data fields:** The data source must contain `x`, `low`, `high`, `open`, and `close` values. Map the `xName`, `low`, `high`, `open`, and `close` properties of the `SeriesDirective` to the corresponding fields in your data. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -82,36 +88,35 @@ To render a Candle series, use series [`type`](https://ej2.syncfusion.com/react/ ### Hollow Candles -Candle charts allow to visually compare the current price with previous price by coloring them. +Candle charts allow you to visually compare the current price with the previous price by coloring them. -Candles are filled/left as hollow based on the following criteria. +Candles are filled or left as hollow based on the following criteria: - + - + - +
StatesDescription Description
Filledcandle sticks are filled when the close value is lesser than the open valueCandles are filled when the close value is lesser than the open value.
Unfilledcandle sticks are unfilled when the close value is greater than the open valueCandles are unfilled when the close value is greater than the open value.
-The color of the candle will be defined by comparing with previous values. Bear color will be applied when the current closing value is greater than the previous closing value. Bull color will be applied when the current closing value is less than the previous closing value. +The color of each candle is determined by comparing it with the previous value. The **bull** color is applied when the current closing value is greater than the previous closing value. The **bear** color is applied when the current closing value is less than the previous closing value. -By default, bullFillColor is set as red and bearFillColor is set as green. +By default, `bullFillColor` is set to red and `bearFillColor` is set to green. ### Solid Candles -[`enableSolidCandles`](https://ej2.syncfusion.com/react/documentation/api/chart/series#enableSolidCandles-string) is used to enable/disable the solid candles. By default is set to be false. The fill color of the candle will be defined by its opening and closing values. +The [`enableSolidCandles`](https://ej2.syncfusion.com/react/documentation/api/chart/series#enablesolidcandles) property is used to enable or disable solid candles. By default, it is set to `false`. When enabled, the fill color of each candle is defined by its opening and closing values. -[`bearFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/series#bearFillColor-string) will be applied when the opening value is less than the closing value. -[`bullFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/series#bullFillColor-string) will be applied when the opening value is greater than closing value. +The [`bearFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/series#bearfillcolor) is applied when the opening value is less than the closing value. The [`bullFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/series#bullfillcolor) is applied when the opening value is greater than the closing value. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -122,4 +127,10 @@ By default, bullFillColor is set as red and bearFillColor is set as green. {% endhighlight %} {% endtabs %} - {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/candle-cs2" %} \ No newline at end of file + {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/candle-cs2" %} + +## See also + +* [Technical Indicators](./technical-indicators) +* [Tooltip](./tool-tip) +* [Chart Series in React Chart](./chart-series) \ No newline at end of file diff --git a/chart-sdk/react/charts/gradient.md b/chart-sdk/react/charts/gradient.md index 30a3b0d06..b4960f50a 100644 --- a/chart-sdk/react/charts/gradient.md +++ b/chart-sdk/react/charts/gradient.md @@ -24,20 +24,34 @@ Gradients can be applied to: ## Linear gradient -A linear gradient blends color along side a straight path from a defined start point to an end point. Configure it by adding `linearGradient` inside the target element (Series, Trendlines or Indicators) and define one or more color stops that control how colors transition across the gradient. Set the start and end positions of the gradient using `x1`, `y1`, `x2` and `y2` properties. The gradient color stop values such as `offset`, `color`, `opacity`, `lighten` and `brighten` are set using the `gradientColorStop` property. +A linear gradient blends colors along a straight path from a defined start point to an end point. Configure it by adding `linearGradient` inside the target element (Series, Trendlines or Indicators) and define one or more color stops that control how colors transition across the gradient. Set the start and end positions of the gradient using `x1`, `y1`, `x2` and `y2` properties. The gradient color stop values such as `offset`, `color`, `opacity`, `lighten` and `brighten` are set using the `gradientColorStop` property. + +The basic structure of a `linearGradient` is shown below. + +```ts +{ + linearGradient: { + x1: 0, y1: 0, x2: 1, y2: 0, + gradientColorStops: [ + { offset: 0, color: '#f6dcd0', opacity: 1 }, + { offset: 1, color: '#a04836', opacity: 1 } + ] + } +} +``` In the `linearGradient`: -- `x1` - Sets the horizontal start position of the gradient (0 to 1). -- `y1` - Sets the vertical start position of the gradient (0 to 1). -- `x2` - Sets the horizontal end position of the gradient (0 to 1). -- `y2` - Sets the vertical end position of the gradient (0 to 1). +- `x1` - Sets the horizontal start position of the gradient (0 to 1). Default: `0`. +- `y1` - Sets the vertical start position of the gradient (0 to 1). Default: `0`. +- `x2` - Sets the horizontal end position of the gradient (0 to 1). Default: `1`. +- `y2` - Sets the vertical end position of the gradient (0 to 1). Default: `0`. In the `gradientColorStop`: - `offset` - Specifies the position of the color stop along the gradient (0 to 100). - `color` - Sets the color at the stop. - `opacity` - Defines the transparency of the stop (0 to 1). - `lighten` - Adjusts lightness at the stop. Positive values lighten the color. Range: 0 to 1. -- `brighten` - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Ranges: -1 to 1. +- `brighten` - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Range: -1 to 1. ### Series @@ -106,13 +120,27 @@ Apply a linear gradient to a technical indicator by adding `linearGradient` insi A radial gradient blends colors outward from a central point, creating a circular or elliptical color progression. Configure it by adding `radialGradient` inside the target element (Series, Trendline, or Indicator) and define one or more color stops to control how colors transition from the center to the outer edge. Set the gradient’s center, optional focal point, and radius using `radialGradient` properties. The color stop values such as `offset`, `color`, `opacity`, `lighten`, and `brighten` are set using the `gradientColorStop` property. +The basic structure of a `radialGradient` is shown below. + +```ts +{ + radialGradient: { + cx: 0.5, cy: 0.5, fx: 0.5, fy: 0.5, r: 0.5, + gradientColorStops: [ + { offset: 0, color: '#f6dcd0', opacity: 1 }, + { offset: 1, color: '#a04836', opacity: 1 } + ] + } +} +``` + In the `radialGradient`: -- `cx` - Sets the normalized horizontal center of the gradient (0 to 1). -- `cy` - Sets the normalized vertical center of the gradient (0 to 1). -- `fx` - Sets the normalized horizontal focal point from which the gradient appears to originate (0 to 1). -- `fy` - Sets the normalized vertical focal point (0 to 1). -- `r` - Sets the normalized radius of the gradient circle (0 to 1). +- `cx` - Sets the normalized horizontal center of the gradient (0 to 1). Default: `0.5`. +- `cy` - Sets the normalized vertical center of the gradient (0 to 1). Default: `0.5`. +- `fx` - Sets the normalized horizontal focal point from which the gradient appears to originate (0 to 1). Default: same as `cx`. +- `fy` - Sets the normalized vertical focal point (0 to 1). Default: same as `cy`. +- `r` - Sets the normalized radius of the gradient circle (0 to 1). Default: `0.5`. In the `gradientColorStop`: @@ -120,7 +148,7 @@ In the `gradientColorStop`: - `color` - Sets the color at the stop. - `opacity` - Defines the transparency of the stop (0 to 1). - `lighten` - Adjusts lightness at the stop. Positive values lighten the color. Range: 0 to 1. -- `brighten` - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Ranges: -1 to 1. +- `brighten` - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Range: -1 to 1. ### Series @@ -145,7 +173,7 @@ Apply a radial gradient to a series by adding `radialGradient` inside the target ### Trendlines -Apply a linear gradient to a trendline by adding `linearGradient` inside the target Trendline. +Apply a radial gradient to a trendline by adding `radialGradient` inside the target Trendline. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -161,12 +189,12 @@ Apply a linear gradient to a trendline by adding `linearGradient` inside the tar {% include code-snippet/chart-sdk/react/charts/code-path/series/chart-gradient-cs9/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - + {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/chart-gradient-cs9" %} ### Technical Indicators -Apply a linear gradient to a technical indicator by adding `linearGradient` inside the target Indicator. +Apply a radial gradient to a technical indicator by adding `radialGradient` inside the target Indicator. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -182,5 +210,13 @@ Apply a linear gradient to a technical indicator by adding `linearGradient` insi {% include code-snippet/chart-sdk/react/charts/code-path/series/chart-gradient-cs10/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - + {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/chart-gradient-cs10" %} + +## See also + +* [Series linearGradient API](https://ej2.syncfusion.com/react/documentation/api/chart/series#lineargradient) +* [Series radialGradient API](https://ej2.syncfusion.com/react/documentation/api/chart/series#radialgradient) +* [Trendlines](https://ej2.syncfusion.com/react/documentation/chart/trendlines) +* [Technical indicators](https://ej2.syncfusion.com/react/documentation/chart/technical-indicators) +* [Chart series](https://ej2.syncfusion.com/react/documentation/chart/chart-series) diff --git a/chart-sdk/react/charts/internationalization.md b/chart-sdk/react/charts/internationalization.md index a73944999..f6c41ff17 100644 --- a/chart-sdk/react/charts/internationalization.md +++ b/chart-sdk/react/charts/internationalization.md @@ -16,16 +16,17 @@ Chart provides support for internationalization for the following elements: - Axis label - Tooltip -For more information about number and date formatting, see the internationalization guide: [`internationalization`](https://ej2.syncfusion.com/documentation/common/internationalization). +For more information about number and date formatting, see the internationalization guide: [`internationalization`](https://ej2.syncfusion.com/react/documentation/common/internationalization). - -**Globalization** +> Note: The `en-US` locale and `USD` currency code are set as defaults. To use another culture, call `loadCldr` (and optionally `setCulture`) before the Chart renders. The currency used by the `'c'` format is set via [`setCurrencyCode`](https://ej2.syncfusion.com/react/documentation/api/base/internationalization#setcurrencycode). -Globalization is the process of designing and developing a component that works in different cultures/locales. Use the internationalization library to localize numbers, dates, and times in the Chart component, for example by using the axis `labelFormat` property. +## Globalization -**Numeric Format** +Globalization is the process of designing and developing a component that works in different cultures/locales. Use the internationalization library to localize numbers, dates, and times in the Chart component — for example, by using the axis `labelFormat` property. You must call `setCurrencyCode` (and `loadCldr` for non `en-US` cultures) before the Chart mounts. -The example below globalize axis, point, and tooltip labels to the EUR currency format. +## Numeric Format + +The example below globalizes axis, point, and tooltip labels to the EUR currency format. To use a culture other than `en-US`, install [`@syncfusion/ej2-cldr-data`](https://www.npmjs.com/package/@syncfusion/ej2-cldr-data) and call `loadCldr` with the required JSON data before the Chart renders. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/charts/legend.md b/chart-sdk/react/charts/legend.md index 318671d3f..57a21858b 100644 --- a/chart-sdk/react/charts/legend.md +++ b/chart-sdk/react/charts/legend.md @@ -12,13 +12,13 @@ domainurl: https://help.syncfusion.com/chart-sdk The legend provides information about the series rendered in the chart and helps users identify each series by its color, shape, or style. -To get started quickly with legends in React Charts, refer to this video: +Watch this video to get started quickly with legends in React Charts: {% youtube "https://www.youtube.com/watch?v=7VYeN4W_wMc" %} ## Position and alignment -By using the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#position) property, the legend can be positioned at the left, right, top, or bottom of the chart. By default, the legend is positioned at the bottom of the chart. +Use the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#position) property to place the legend at the left, right, top, or bottom of the chart. By default, it is placed at the bottom. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -37,7 +37,7 @@ By using the [`position`](https://ej2.syncfusion.com/react/documentation/api/ch {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/category-cs13" %} -Custom positioning allows the legend to be placed anywhere in the chart using `x` and `y` coordinates. +Custom positioning allows you to place the legend anywhere in the chart using `x` and `y` coordinates. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -79,7 +79,7 @@ Use the [`reverse`](https://ej2.syncfusion.com/react/documentation/api/chart/leg -**Legend alignment** +### Legend alignment @@ -125,7 +125,7 @@ To change the legend icon shape, use the [`legendShape`](https://ej2.syncfusion. ### Legend size -By default, the legend occupies approximately 20%–25% of the chart height when positioned at the top or bottom, and 20%–25% of the chart width when positioned at the left or right. Change the default size using the [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#height) properties of `legendSettings`. +By default, the legend occupies approximately 20%–25% of the chart height when positioned at the top or bottom, and 20%–25% of the chart width when positioned at the left or right. Customize the default size using the [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#height) properties of `legendSettings`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -272,7 +272,7 @@ By default, clicking a legend item toggles the visibility of its series. To sele ## Enable animation -Enable or disable animation during legend interactions by setting `enableAnimation` to `true` or `false` in the chart. +Enable or disable animation during legend interactions by setting the [`enableAnimation`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#enableanimation) property of `legendSettings` to `true` or `false`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -291,9 +291,9 @@ Enable or disable animation during legend interactions by setting `enableAnimati {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/category-cs22" %} -## Collapsing legend item +## Hiding a legend item -By default, the series name is displayed as a legend item. To omit a legend item for a particular series, set the series name to an empty string. +By default, the series name is displayed as a legend item. To hide a legend item for a particular series, set the series name to an empty string. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -314,7 +314,7 @@ By default, the series name is displayed as a legend item. To omit a legend item ## Legend title -Set a title for the legend using the `title` property in `legendSettings`. The title can be customized using `fontStyle`, `size`, `fontWeight`, `color`, `textAlignment`, `fontFamily`, `opacity`, and `textOverflow`. Use `titlePosition` to place the title at `Top`, `Left`, or `Right`. The `maximumTitleWidth` property sets the width of the legend title and defaults to `100px`. +Set a title for the legend using the [`title`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#title) property in `legendSettings`. The title can be customized using [`fontStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/fontModel#fontstyle), [`size`](https://ej2.syncfusion.com/react/documentation/api/chart/fontModel#size), [`fontWeight`](https://ej2.syncfusion.com/react/documentation/api/chart/fontModel#fontweight), [`color`](https://ej2.syncfusion.com/react/documentation/api/chart/fontModel#color), [`textAlignment`](https://ej2.syncfusion.com/react/documentation/api/chart/fontModel#textalignment), [`fontFamily`](https://ej2.syncfusion.com/react/documentation/api/chart/fontModel#fontfamily), [`opacity`](https://ej2.syncfusion.com/react/documentation/api/chart/fontModel#opacity), and [`textOverflow`](https://ej2.syncfusion.com/react/documentation/api/chart/fontModel#textoverflow). Use [`titlePosition`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#titleposition) to place the title at `Top`, `Left`, or `Right`. The [`maximumTitleWidth`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#maximumtitlewidth) property sets the width of the legend title and defaults to `100px`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -335,7 +335,7 @@ Set a title for the legend using the `title` property in `legendSettings`. The t ## Arrow page navigation -When legend paging is enabled, page numbers are shown by default. To display only left and right arrows for navigation, set `enablePages` to `false`. +When legend paging is enabled, page numbers are shown by default. To display only left and right arrows for navigation, set [`enablePages`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#enablepages) to `false`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -400,7 +400,9 @@ The [`layout`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSe Legend templates allow you to replace default legend icons and text with custom HTML for each series. This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization. -You can customize the legend items by using the [`template`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel) property of [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel). Legend interactions (click to toggle series) remain unless [`ToggleVisibility`] (https://ej2.syncfusion.com/react/documentation/api/chart/legendsettings#togglevisibility) is set to false. Templates work with all legend positions, alignments, and paging. +You can customize the legend items by using the [`template`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel) property of [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel). Legend interactions (click to toggle series) remain unless [`toggleVisibility`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#togglevisibility) is set to false. Templates work with all legend positions, alignments, and paging. + +Inside the template, the legend item data is available through the template context, where you can access the series `name`, `shape`, and the underlying `point` data. Use these fields to render branded icons, multi-line labels, or badges for each series. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -419,9 +421,21 @@ You can customize the legend items by using the [`template`](https://ej2.syncfus {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/legend-cs7" %} -> Note: To use legend features, inject the `Legend` module into the `services`. +> Note: To use legend features, inject the `Legend` module into the chart's `services` using `` alongside the `ChartComponent`. For example: +> +> ```tsx +> import { ChartComponent, Inject, Legend, SeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts'; +> ``` +> +> ```tsx +> +> +> +> +> +> +> ``` ## See Also -* [Customize each shape in legend](./how-to#customize-each-shape-in-legend) * [Add Custom Legend Using SVG](https://support.syncfusion.com/kb/article/21530/how-to-add-custom-legend-using-svg-in-react-chart) \ No newline at end of file diff --git a/chart-sdk/react/charts/localization.md b/chart-sdk/react/charts/localization.md index 97198f5a7..05755b883 100644 --- a/chart-sdk/react/charts/localization.md +++ b/chart-sdk/react/charts/localization.md @@ -10,14 +10,16 @@ domainurl: https://help.syncfusion.com/chart-sdk # Localization in React Chart component -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. +Use the `L10n` class from `@syncfusion/ej2-base` to translate 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, and setting the `locale` property on the Chart to match the loaded culture. The keys listed below are exposed by the Chart resource file (typically `src/chart/locale.json`); supply a translated value for each key in your translation object. + +> **Note:** The zoom toolbar must be enabled via `zoomSettings.toolbarItems` for the localized labels (Zoom, ZoomIn, ZoomOut, Reset, Pan, ResetZoom) to appear. Missing keys fall back to the default English text. - - + + @@ -25,11 +27,11 @@ The localization library localizes the Chart's default text content. Static text - + - + @@ -45,9 +47,63 @@ The localization library localizes the Chart's default text content. Static text
Locale keysText to displayLocale keyDefault text
Zoom
ZoomInZoomInZoom In
ZoomOutZoomOutZoom Out
Reset
-To load translation object in an application use load function of L10n class. +## Prerequisites + +Install the base package that provides the `L10n` class: + +```bash +npm install @syncfusion/ej2-base --save +``` + +## Loading the translation object + +Use the `load` function of the `L10n` class to load a translation object into the application. The call must be made **before** the Chart renders, for example in the application's entry point or in a parent component above the Chart. + +```ts +import { L10n } from '@syncfusion/ej2-base'; + +// Load translations for a specific culture. +// `path` can be a URL to a JSON file or an inline object passed as the second argument. +L10n.load({ + 'fr-FR': { + 'chart': { + Zoom: 'Zoom', + ZoomIn: 'Zoom avant', + ZoomOut: 'Zoom arrière', + Reset: 'Réinitialiser', + Pan: 'Déplacer', + ResetZoom: 'Réinitialiser le zoom' + } + } +}); +``` + +Then set the matching `locale` on the Chart component to apply the translations: + +```ts + +``` + +> If a key is missing from the translation object, the Chart falls back to the default English text. For cultures other than `en-US`, also call `loadCldr` and `setCulture` as described in the [Internationalization](./internationalization) topic. + +### Using pre-built locale files + +Instead of authoring a translation object by hand, you can install the official locale package and load a ready-made JSON for many languages: + +```bash +npm install @syncfusion/ej2-locale +``` + +```ts +import { L10n } from '@syncfusion/ej2-base'; +import * as frLocale from '@syncfusion/ej2-locale/src/fr.json'; + +L10n.load({ 'fr-FR': frLocale }); +``` + +Additional pre-built locale JSON files are available in the [ej2-locale GitHub repository](https://github.com/syncfusion/ej2-locale). -For more information about localization, see the localization guide: [`localization`](https://ej2.syncfusion.com/development/react/documentation/common/globalization/localization) +For more information about localization, see the localization guide: [`localization`](https://ej2.syncfusion.com/react/documentation/common/globalization/localization) {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/charts/logarithmic-axis.md b/chart-sdk/react/charts/logarithmic-axis.md index c720678a4..02a5cf80a 100644 --- a/chart-sdk/react/charts/logarithmic-axis.md +++ b/chart-sdk/react/charts/logarithmic-axis.md @@ -12,9 +12,11 @@ domainurl: https://help.syncfusion.com/chart-sdk -The logarithmic axis uses a logarithmic scale and is particularly useful for visualizing data that spans a wide range of values. It effectively represents datasets that include both very small values (for example, 10-6) and very large values (for example, 106) within the same chart, improving readability and comparison. +The logarithmic axis uses a logarithmic scale and is particularly useful for visualizing data that spans a wide range of values. It effectively represents datasets that include both very small values (for example, 10-6) and very large values (for example, 106) within the same chart, improving readability and enabling comparison. -To get start quickly with React Logarithmic Axis, you can check out this video: +> Note: To use the logarithmic axis, inject `Logarithmic` via `` and set the [`valueType`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype) property of the axis to `Logarithmic`. The default logarithmic base is `10`, and the axis requires all data values to be positive; zero or negative values will not be rendered. + +To get started quickly with React Logarithmic Axis, you can check out this video: {% youtube "https://www.youtube.com/watch?v=v7ICR9tdMyI" %} @@ -35,11 +37,9 @@ To get start quickly with React Logarithmic Axis, you can check out this video: {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs1" %} -> Note: To use the logarithmic axis, inject `Logarithmic` into the `provide` option and set the [`valueType`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype) property of the axis to `Logarithmic`. - ## Range -The range of the logarithmic axis is calculated automatically based on the provided data. This automatic calculation ensures that all data points are visible within the chart area. The axis range can also be customized explicitly using the [`minimum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#minimum), [`maximum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#maximum), and [`interval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#interval) properties. +The range of the logarithmic axis is calculated automatically based on the provided data. This automatic calculation ensures that all data points are visible within the chart area. Alternatively, the axis range can be customized explicitly using the [`minimum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#minimum), [`maximum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#maximum), and [`interval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#interval) properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -60,8 +60,8 @@ The range of the logarithmic axis is calculated automatically based on the provi ## Logarithmic base -The logarithmic base of the axis can be customized using the [`logBase`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#logbase) property. This property determines how the axis values are distributed along the scale. -For example, when the logarithmic base is set to `5`, the axis values follow the sequence 5-2, 5-1, 50, 51, 52, and so on. +The logarithmic base of the axis can be customized using the [`logBase`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#logbase) property. This property determines how the axis values are distributed along the scale. The base must be a value greater than `1`; the default is `10`. +For example, when the logarithmic base is set to `2`, the axis values follow the sequence 2-2, 2-1, 20, 21, 22, and so on. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -82,7 +82,7 @@ For example, when the logarithmic base is set to `5`, the axis values follow the ## Logarithmic interval -The spacing between logarithmic axis labels can be controlled using the [`interval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#interval) property. This property defines the step size between consecutive logarithmic values. +The spacing between logarithmic axis labels can be controlled using the [`interval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#interval) property (the same property used in the [Range](#range) section). This property defines the step size between consecutive logarithmic values. For example, when the logarithmic base is `10` and the interval is set to `2`, the axis labels are placed at values such as 102, 104, and 106. The default value of the interval is `1`. {% tabs %} @@ -100,4 +100,10 @@ For example, when the logarithmic base is `10` and the interval is set to `2`, t {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs4" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs4" %} + +## See also + +* [Numeric axis in React Chart](https://ej2.syncfusion.com/react/documentation/chart/numeric-axis) +* [Date-time axis in React Chart](https://ej2.syncfusion.com/react/documentation/chart/date-time-axis) +* [Category axis in React Chart](https://ej2.syncfusion.com/react/documentation/chart/category-axis) \ No newline at end of file diff --git a/chart-sdk/react/charts/multiple-panes.md b/chart-sdk/react/charts/multiple-panes.md index fd537b69b..64f1b3e3e 100644 --- a/chart-sdk/react/charts/multiple-panes.md +++ b/chart-sdk/react/charts/multiple-panes.md @@ -18,7 +18,7 @@ To split the chart area vertically into multiple rows, use the [`rows`](https:// - Space for each row can be allocated by using the [`height`](https://ej2.syncfusion.com/react/documentation/api/chart/row#height) property. The value can be specified either in pixels or as a percentage. - To associate a vertical axis with a specific row, assign the corresponding index using the [`rowIndex`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rowindex) property of the axis. -- To customize the bottom line of each row, use the [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#border) property. +- To customize the bottom border (separator) of each row, use the [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/row#border) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -59,11 +59,10 @@ To span a vertical axis across multiple rows, use the [`span`](https://ej2.syncf ## Columns To split the chart area horizontally into multiple columns, use the [`columns`](https://ej2.syncfusion.com/react/documentation/api/chart/column) property of the chart. - property.* - Space for each column can be allocated using the [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/column#width) property. The width can be specified either in pixels or as a percentage. - To associate a horizontal axis with a specific column, assign the corresponding index using the [`columnIndex`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#columnindex) property of the axis. -- To customize the bottom line of each column, use the [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/column#border) property. +- To customize the border (separator line) of each column, use the [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/column#border) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -99,4 +98,11 @@ To span a horizontal axis across multiple columns, use the [`span`](https://ej2. {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/multiple-panes-cs4" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/multiple-panes-cs4" %} + +## See Also + +- [Axis Customization](./axis-customization) +- [Chart Dimensions](./chart-dimensions) +- [Stock Chart Multiple Panes](../stock-chart/multiple-panes) +- [Chart API Reference](https://ej2.syncfusion.com/react/documentation/api/chart) \ No newline at end of file diff --git a/chart-sdk/react/charts/nextjs-getting-started.md b/chart-sdk/react/charts/nextjs-getting-started.md index c2fb5d69e..b42704e0e 100644 --- a/chart-sdk/react/charts/nextjs-getting-started.md +++ b/chart-sdk/react/charts/nextjs-getting-started.md @@ -19,12 +19,11 @@ Before getting started with the Next.js application, ensure the following prereq * [Node.js 18.17](https://nodejs.org/en) or later (required by Next.js 14/15). * [Next.js](https://nextjs.org) 14 or 15. * React 18 or 19. -* `@syncfusion/ej2-react-charts` 27.2.x or later (compatible with React 18/19). -* The application is compatible with macOS, Windows, and Linux operating systems. +* `@syncfusion/ej2-react-charts` 30.x or later (compatible with React 18/19). ## Step 1: Create a Next.js application -To create a new `Next.js` application, use one of the commands that are specific to either NPM or Yarn. +This guide uses the Next.js App Router. To create a new `Next.js` application, use one of the commands that are specific to either NPM or Yarn. {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -41,7 +40,7 @@ yarn create next-app Using one of the above commands will lead you to set up additional configurations for the project as below: -1.Define the project name: Users can specify the name of the project directly. Let's specify the name of the project as `ej2-nextjs-chart`. +1. Define the project name: Users can specify the name of the project directly. Let's specify the name of the project as `ej2-nextjs-chart`. When prompted, also select **TypeScript: Yes** so that the project uses the App Router with a `src/app/page.tsx` file. {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -51,7 +50,7 @@ Using one of the above commands will lead you to set up additional configuration {% endhighlight %} {% endtabs %} -2.Select the required packages. +2. Select the required packages. {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -61,9 +60,9 @@ Using one of the above commands will lead you to set up additional configuration {% endhighlight %} {% endtabs %} -By selecting default packages, all essential packages for Next.js will be installed. +By selecting the recommended Next.js defaults, all essential Next.js packages (App Router, TypeScript, ESLint, and Tailwind CSS) will be installed. -3.Once complete the above mentioned steps to create `ej2-nextjs-chart`, navigate to the directory using the below command: +3. Once the project is created, navigate to the project directory using the following command: {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -84,7 +83,7 @@ Here, the [React Chart component](https://www.syncfusion.com/react-components/re {% tabs %} {% highlight bash tabtitle="NPM" %} -npm install @syncfusion/ej2-react-charts --save +npm install @syncfusion/ej2-react-charts {% endhighlight %} {% highlight bash tabtitle="YARN" %} @@ -96,7 +95,9 @@ yarn add @syncfusion/ej2-react-charts ## Step 3: Add the Chart component -Replace the contents of `src/app/page.tsx` with the following code. The example below uses typed data, registers the Syncfusion license, imports a theme stylesheet, and renders the chart as columns. +Replace the contents of `src/app/page.tsx` with the following code. The example below uses typed data and renders the chart as columns. + +> To register a Syncfusion license, call `registerLicense('YOUR_LICENSE_KEY')` from `@syncfusion/ej2-base` at app startup. To apply a theme, import a stylesheet such as `@syncfusion/ej2-react-charts/styles/material.css`. Both are optional during local development but required for production builds. {% tabs %} {% highlight ts tabtitle="page.tsx" %} @@ -120,6 +121,7 @@ export default function Home() { { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }, ]; + // `as const` narrows the string literal to 'Category', matching Syncfusion's `ValueType` union type. const primaryXAxis = { valueType: 'Category' } as const; return ( @@ -157,11 +159,11 @@ yarn run dev {% endhighlight %} {% endtabs %} -Open the URL printed in the terminal (for example, `http://localhost:3000/`) in a browser. The application displays the chart as shown below: +Open the URL printed in the terminal (for example, `http://localhost:3000`) in a browser. If port 3000 is already in use, Next.js falls back to the next available port (for example, `http://localhost:3001`). The application displays the chart as shown in the following image: ![NextJS Chart in Next.js](./images/Getting-Started.png) -To learn more about the functionality of the Chart component, refer to the [documentation](https://ej2.syncfusion.com/react/documentation/chart/getting-started#module-injection). +To learn more about the functionality of the Chart component, refer to the [React Chart documentation](https://ej2.syncfusion.com/react/documentation/chart/getting-started). > [View the Next.js Chart sample in the GitHub repository](https://github.com/SyncfusionExamples/syncfusion-react-chart-component-in-nextjs). @@ -169,6 +171,14 @@ To learn more about the functionality of the Chart component, refer to the [docu - **Chart does not render (blank page)** - Confirm `src/app/page.tsx` begins with `'use client';`. + - Confirm `registerLicense('YOUR_LICENSE_KEY')` is called with a valid key from the [Syncfusion License Dashboard](https://www.syncfusion.com/account/downloads). A missing or invalid key still renders, but logs a console warning. + - Verify that a theme stylesheet (for example, `@syncfusion/ej2-react-charts/styles/material.css`) is imported. - **`Module not found: Can't resolve '@syncfusion/ej2-react-charts'`** - - Run `npm install @syncfusion/ej2-react-charts` (or `yarn add @syncfusion/ej2-react-charts`) in the project root. \ No newline at end of file + - Run `npm install @syncfusion/ej2-react-charts` (or `yarn add @syncfusion/ej2-react-charts`) in the project root. + +- **Hydration mismatch / `use client` error** + - Chart uses browser-only APIs and must be rendered in a Client Component. Ensure the file that exports the component begins with `'use client';` and that the component is not imported into a Server Component. + +- **Port 3000 is already in use** + - Next.js automatically falls back to the next available port (3001, 3002, and so on). Use the URL printed in the terminal output. \ No newline at end of file diff --git a/chart-sdk/react/charts/numeric-axis.md b/chart-sdk/react/charts/numeric-axis.md index e66719470..3755965d5 100644 --- a/chart-sdk/react/charts/numeric-axis.md +++ b/chart-sdk/react/charts/numeric-axis.md @@ -11,7 +11,9 @@ domainurl: https://help.syncfusion.com/chart-sdk # Numeric axis in React Chart component -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. +The numeric axis is used to represent numeric values in a chart. By default, the [`valueType`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#valuetype) of an axis is set to `Double`, which is suitable for displaying continuous numerical data. + +> Before you begin, ensure the Syncfusion React Chart is installed and configured in your project. For setup steps, see the [Getting Started for React](getting-started) documentation. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -32,7 +34,7 @@ The numeric axis is used to represent numeric values in a chart. By default, the ## Range -The range of the axis is calculated automatically based on the provided data. You can also customize the visible range by using the [`minimum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#minimum), [`maximum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#maximum), and [`interval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#interval) properties of the axis. +The range of the axis is calculated automatically based on the provided data. You can also customize the visible range by using the [`minimum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#minimum), [`maximum`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#maximum), and [`interval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#interval) properties of the `AxisModel`. To control the lower bound separately, use the [`startFromZero`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#startfromzero) property, and to derive evenly spaced intervals, use [`desiredIntervals`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#desiredintervals). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -53,7 +55,7 @@ The range of the axis is calculated automatically based on the provided data. Yo ## Range Padding -Padding can be applied to the minimum and maximum values of the axis range by using the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property. The numeric axis supports the following padding options: +Padding can be applied to the minimum and maximum values of the axis range by using the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property. The default value is `Auto`. The numeric axis supports the following padding options: * None * Round @@ -61,7 +63,28 @@ Padding can be applied to the minimum and maximum values of the axis range by us * Normal * Auto -**Numeric - None** +### Numeric - Auto (default) + +When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property is set to `Auto`, the horizontal numeric axis uses `None` as padding, while the vertical numeric axis uses `Normal` padding. The orientation is determined by whether the axis is the `primaryXAxis` or `primaryYAxis`. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/axis/double-cs9/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/axis/double-cs9/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/axis/double-cs9/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/axis/double-cs9/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs9" %} + +### Numeric - None When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property is set to `None`, the minimum and maximum values of the axis are derived directly from the data. @@ -82,9 +105,9 @@ When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/cha {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs5" %} -**Numeric - Round** +### Numeric - Round -When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property is set to `Round`, the minimum and maximum values are rounded to the nearest values divisible by the interval. For example, if the minimum value is 3.5 and the interval is 1, the minimum value is rounded to 3. +When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property is set to `Round`, the minimum and maximum values are rounded to the nearest values divisible by the interval. For example, with a data minimum of 3 and an interval of 5, the axis minimum is rounded to 5, and with a data maximum of 17, the axis maximum is rounded to 20. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -103,7 +126,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/cha {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs6" %} -**Numeric - Additional** +### Numeric - Additional When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property is set to `Additional`, one interval is added to both the minimum and maximum values of the axis range. @@ -124,9 +147,9 @@ When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/cha {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs7" %} -**Numeric - Normal** +### Numeric - Normal -When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property is set to `Normal`, padding is applied to the axis based on the default range calculation. +When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property is set to `Normal`, padding is applied to the axis by adding a default percentage of the range to both ends so that data points are not flush against the plot edges. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -145,32 +168,9 @@ When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/cha {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs8" %} -**Numeric - Auto** - -When the [`rangePadding`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#rangepadding) property is set to `Auto`, the horizontal numeric axis uses `None` as padding, while the vertical numeric axis uses `Normal` padding. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/axis/double-cs9/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/axis/double-cs9/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/axis/double-cs9/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/axis/double-cs9/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs9" %} - ## Label Format -**Numeric label format** - -Numeric axis labels can be formatted by using the [`labelFormat`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#labelformat) property. This property supports all Globalize numeric formats. +Numeric axis labels can be formatted by using the [`labelFormat`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#labelformat) property. This property supports all [Globalize](https://github.com/globalizejs/globalize) numeric formats. The format applied is also affected by the chart's `locale`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -250,9 +250,9 @@ The following table shows examples of commonly used numeric label formats and th -## GroupingSeparator +## Grouping Separator -To separate groups of thousands in numeric labels, enable the [`useGroupingSeparator`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#usegroupingseparator) property in the chart. +To separate groups of thousands in numeric labels, enable the [`useGroupingSeparator`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#usegroupingseparator) property on the `Chart` (a chart-level `ChartModel` property, not an axis property). The separator character is determined by the chart's `locale`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -273,7 +273,7 @@ To separate groups of thousands in numeric labels, enable the [`useGroupingSepar ## Custom Label Format -The numeric axis also supports custom label formats by using placeholders such as `{value}°C`, where `{value}` represents the numeric axis label. For example, the value `20` is displayed as `20°C`. +The numeric axis also supports custom label formats by using the `{value}` placeholder within the [`labelFormat`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#labelformat) string, where `{value}` is replaced with the actual numeric axis label. For example, `labelFormat: '{value}°C'` displays the value `20` as `20°C`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -290,4 +290,12 @@ The numeric axis also supports custom label formats by using placeholders such a {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs12" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs12" %} + +## See also + +* [Category axis](category-axis) +* [DateTime axis](date-time-axis) +* [Logarithmic axis](logarithmic-axis) +* [Axis customization](axis-customization) +* [Axis labels](axis-labels) \ No newline at end of file diff --git a/chart-sdk/react/charts/render-methods.md b/chart-sdk/react/charts/render-methods.md index 07e0b0837..b2a76f295 100644 --- a/chart-sdk/react/charts/render-methods.md +++ b/chart-sdk/react/charts/render-methods.md @@ -11,24 +11,55 @@ domainurl: https://help.syncfusion.com/chart-sdk # Render methods in React Chart component -Chart uses following two rendering methods. +The Chart component uses one of the following two rendering methods. Choose the method that best matches your performance and feature requirements. * SVG * Canvas ## SVG -SVG is used to render the Chart by default for all browsers except IE8 and older versions. +SVG is used to render the Chart by default in all modern browsers. It provides high-fidelity visuals and full support for Chart features such as animation, accessibility, and interactivity. ## Canvas -Switch between SVG and Canvas rendering by using the `enableCanvas` option. The canvas mode is useful in the following scenarios: +Switch between SVG and Canvas rendering by setting the `enableCanvas` property to `true`. The canvas mode is useful in the following scenarios: -* Plotting large number of data points. -* Performing high frequency live updates. +* Plotting a large number of data points. +* Performing high-frequency live updates. + +The `enableCanvas` property accepts a boolean value (`true` or `false`) and defaults to `false`. + +```ts +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries } from '@syncfusion/ej2-react-charts'; + + + + + + + +``` **Limitations** - Animation is not supported in canvas mode. -\ -Note: Canvas rendering improves performance for very large datasets or high-frequency updates but may limit certain SVG-specific features. \ No newline at end of file +- Print and export quality may be lower than SVG for very large canvases. +- Some SVG-specific events and accessibility hooks may not be available in canvas mode. + +> Note: Canvas rendering improves performance for very large datasets or high-frequency updates but may limit certain SVG-specific features. + +**SVG vs. Canvas comparison** + +| Feature | SVG | Canvas | +|---|---|---| +| Animation | Supported | Not supported | +| Performance with large data | Moderate | High | +| High-frequency updates | Moderate | High | +| Print/Export quality | High | Moderate | +| Accessibility | Full | Limited | + +## See also + +* [Getting started with React Chart](getting-started) +* [Chart appearance](chart-appearance) +* [Chart dimensions](chart-dimensions) \ No newline at end of file diff --git a/chart-sdk/react/charts/selection.md b/chart-sdk/react/charts/selection.md index ce7a0a468..7c1c298aa 100644 --- a/chart-sdk/react/charts/selection.md +++ b/chart-sdk/react/charts/selection.md @@ -11,19 +11,36 @@ domainurl: https://help.syncfusion.com/chart-sdk # Selection in React Chart component -The chart provides selection support for both series and individual data points when users interact with the chart using mouse clicks. +The Chart component provides selection support for both series and individual data points via click or tap interactions. -> When a data point is clicked, the corresponding series legend item is also selected. +> When selection is enabled with the `Series` or `Cluster` mode, clicking a data point also selects the corresponding series legend item. -Multiple selection modes are available to help select and analyze chart data effectively. The supported selection modes are: +## Prerequisites -* None -* Point -* Series -* Cluster -* DragXY -* DragX -* DragY +Before using the selection features, ensure the [React Chart getting started](getting-started.md) steps are complete and the `Selection` module is injected into the chart's `services`. + +```ts +import { ChartComponent, Inject, Selection, LineSeries } from '@syncfusion/ej2-react-charts'; + + + + +``` + +## Selection modes + +Multiple selection modes are available. The supported `selectionMode` values are: + +| Mode | Description | +|---|---| +| None | Disables selection. | +| Point | Selects a single data point. | +| Series | Selects an entire series. | +| Cluster | Selects all data points that share the same index across series. | +| DragXY | Selects data points within a rectangular region (both axes). | +| DragX | Selects data points within a rectangular region (horizontal axis). | +| DragY | Selects data points within a rectangular region (vertical axis). | +| Lasso | Selects data points inside a freehand-drawn region. | ## Point @@ -88,59 +105,51 @@ Cluster selection allows selection of data points that share the same index acro {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/selection-cs3" %} -## Rectangular selection - -**DragXY, DragX, and DragY** - -Rectangular selection enables users to select a group of data points within a defined region by setting the `selectionMode` property accordingly. - -* **DragXY** – Selects data points along both the horizontal and vertical axes. -* **DragX** – Selects data points along the horizontal axis. -* **DragY** – Selects data points along the vertical axis. +## Lasso selection -The selected data points are returned as an array collection through the [`dragComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/iDragCompleteEventArgs) event. +Lasso selection allows users to draw a freehand shape on the chart to select data points within that region. Set the `selectionMode` property to `Lasso` to enable this feature. Multiple regions can be selected on the same chart using this mode. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs1/app/index.jsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs2/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs1/app/index.tsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs2/app/index.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs1/app/datasource.jsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs2/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs1/app/datasource.tsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs2/app/datasource.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/drag-cs1" %} +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/drag-cs2" %} -## Lasso selection +## Multi-selection -Lasso selection allows users to draw a freehand shape on the chart to select data points within that region. Set the `selectionMode` property to `Lasso` to enable this feature. Multiple regions can be selected on the same chart using this mode. +Multiple data points or series can be selected simultaneously by enabling the [`isMultiSelect`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#ismultiselect) property. The `isMultiSelect` property accepts a boolean value and defaults to `false`. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs2/app/index.jsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/selection-cs4/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs2/app/index.tsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/selection-cs4/app/index.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs2/app/datasource.jsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/selection-cs4/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs2/app/datasource.tsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/selection-cs4/app/datasource.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/drag-cs2" %} +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/selection-cs4" %} ## Multi-region selection -Multiple regions can be selected on the chart by setting the `allowMultiSelection` property to **true**. +Multiple regions can be selected on the chart by setting the `allowMultiSelection` property to **true**. The `allowMultiSelection` property accepts a boolean value and defaults to `false`, and applies to rectangular (`DragXY`, `DragX`, `DragY`) and `Lasso` selection modes. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -159,30 +168,38 @@ Multiple regions can be selected on the chart by setting the `allowMultiSelectio {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/drag-cs3" %} -## Selection Type +## Rectangular selection + +**DragXY, DragX, and DragY** -Multiple data points or series can be selected simultaneously by enabling the [`isMultiSelect`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#ismultiselect) property. +Rectangular selection enables users to select a group of data points within a defined region by setting the `selectionMode` property accordingly. + +* **DragXY** – Selects data points along both the horizontal and vertical axes. +* **DragX** – Selects data points along the horizontal axis. +* **DragY** – Selects data points along the vertical axis. + +The selected data points are returned as an array collection through the [`dragComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/iDragCompleteEventArgs) event. The `dragComplete` event payload includes the selected data points and the rectangular region (x and y range). {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/selection-cs4/app/index.jsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs1/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/selection-cs4/app/index.tsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs1/app/index.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/selection-cs4/app/datasource.jsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs1/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/selection-cs4/app/datasource.tsx %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/drag-cs1/app/datasource.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/selection-cs4" %} +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/drag-cs1" %} -## Selection on Load +## Selection on load -Data points or series can be selected programmatically when the chart is loaded by using the [`selectedDataIndexes`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#selecteddataindexes) property. +Data points or series can be selected programmatically when the chart is loaded by using the [`selectedDataIndexes`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#selecteddataindexes) property. The `selectedDataIndexes` value is an array of `{ seriesIndex, pointIndex }` objects. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -201,12 +218,12 @@ Data points or series can be selected programmatically when the chart is loaded {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/selection-cs5" %} -## Selection through on legend +## Selection through legend -Points or series can also be selected through the legend by enabling the [`toggleVisibility`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel#toggleVisibility) property. -To visually emphasize the selected series, use the [`enableHighlight`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#enableHighlight) property. +Points or series can also be selected through the legend by enabling the [`toggleVisibility`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel#togglevisibility) property. +To visually emphasize the selected series, use the [`enableHighlight`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#enablehighlight) property. -> When [`highlightMode`](https://ej2.syncfusion.com/react/documentation/api/stock-chart/highlightmode) is set to `Series`, `Cluster`, or `Point`, legend highlighting occurs even if [`enableHighlight`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#enableHighlight) is set to **false**. In this case, `highlightMode` takes precedence, and hovering over legend items highlights the corresponding series. +> When [`highlightMode`](https://ej2.syncfusion.com/react/documentation/api/chart/highlightmode) is set to `Series`, `Cluster`, or `Point`, legend highlighting occurs even if [`enableHighlight`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#enablehighlight) is set to **false**. In this case, `highlightMode` takes precedence, and hovering over legend items highlights the corresponding series. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -227,7 +244,7 @@ To visually emphasize the selected series, use the [`enableHighlight`](https://e ## Customization for selection -Custom styles can be applied to selected points or series by using the [`selectionStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/series#selectionstyle) property. +Custom styles can be applied to selected points or series by using the [`selectionStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/series#selectionstyle) property. The `selectionStyle` property accepts a string value (for example, a CSS color) and applies to the selected point or series. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -246,8 +263,15 @@ Custom styles can be applied to selected points or series by using the [`selecti {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/selection-cs7" %} ->Note: To use select feature, we need to Inject `Selection` module into the `services`. +> Note: To use the selection feature, inject the `Selection` module into the chart's `services` as shown in the [Prerequisites](#prerequisites) section. + +## Troubleshooting + +* If selection has no effect, confirm the `Selection` module is injected via ``. +* For drag-based selection, ensure the chart receives `pointer` events (no overlapping elements blocking the chart area). +* If `isMultiSelect` or `allowMultiSelection` does not behave as expected, verify the `selectionMode` is set to a compatible value. -## See Also +## See also -* [Display selected data for range selection](./how-to#display-selected-data-for-range-selection) +* [Getting started with React Chart](getting-started) +* [Selected data grid in React Chart](how-to/selected-data-grid) diff --git a/chart-sdk/react/charts/series-label.md b/chart-sdk/react/charts/series-label.md index ef6ffe7c5..c719fde7a 100644 --- a/chart-sdk/react/charts/series-label.md +++ b/chart-sdk/react/charts/series-label.md @@ -12,7 +12,11 @@ domainurl: https://help.syncfusion.com/chart-sdk 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. -## Overview +The series label is supported by Line, Column, Area, Spline, and Stacked variants. Before using this feature, make sure the chart is set up by following the [Getting Started](./getting-started) page. + +> Note: To use the series label feature, import the `SeriesLabel` module from `@syncfusion/ej2-react-charts` and include it in the `services` array of the `Inject` component. + +## Enable series label Enable series labels using the [`labelSettings`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#labelsettings) property within the series configuration. Set the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#visible) property to **true** to display the label. @@ -33,18 +37,21 @@ Enable series labels using the [`labelSettings`](https://ej2.syncfusion.com/reac {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/series-label" %} -> Note: To use the series label feature, inject the `SeriesLabel` module into the `services`. - ## Customization -Customize the appearance of series labels using the following properties: +Customize the appearance and behavior of series labels using the following properties: +* [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#visible) – Enables or disables the series label. Default: **false**. * [`text`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#text) – Custom text for the label. Defaults to the series name. -* [`font`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#font) – Font customization options including color, size, family, and weight. +* [`font`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#font) – Font customization options including `color`, `size`, `fontFamily`, `fontStyle`, and `fontWeight`. * [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#background) – Background color of the label. -* [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#border) – Border width and color. -* [`opacity`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#opacity) – Label transparency (default: 1). -* [`showOverlapText`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#showoverlaptext) – When **false**, overlapping labels are hidden. +* [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#border) – Border of the label, configured with `width` and `color`. +* [`opacity`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#opacity) – Label transparency. Default: **1**. +* [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#position) – Label placement relative to the end of the series (for example, `Near`, `Middle`, `Far`). +* [`margin`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#margin) – Spacing around the label with `left`, `right`, `top`, and `bottom` values. +* [`rx`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#rx) and [`ry`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#ry) – Corner radii for the label background. Require a non-null `border`. +* [`showOverlapText`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#showoverlaptext) – Controls whether labels that overlap other labels are shown. Default: **true**. +* [`connectorLine`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#connectorline) – Properties of the line drawn between the last data point and the label, including `width`, `color`, and `dashArray`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -62,3 +69,16 @@ Customize the appearance of series labels using the following properties: {% endtabs %} {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/series-label-customization" %} + +## Troubleshooting + +* **Series label is not visible.** Confirm the `SeriesLabel` module is registered in the `Inject` `services` array and that `labelSettings.visible` is set to **true** on each series. +* **Label does not appear at the end of the series.** The label is anchored to the last visible data point. If the last point is filtered or null, the label will not render. +* **Label text overlaps with another label.** Set [`showOverlapText`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel#showoverlaptext) to **false** to hide overlapping labels. +* **Customizations do not apply.** Ensure properties are set inside the series' `labelSettings` (e.g., `series.labelSettings.background`), not on the chart-level default. + +## See Also + +* [Modules in React Chart component](./feature-modules) +* [Data labels in React Chart component](./data-labels) +* [SeriesLabelSettingsModel API reference](https://ej2.syncfusion.com/react/documentation/api/chart/seriesLabelSettingsModel) diff --git a/chart-sdk/react/charts/strip-line.md b/chart-sdk/react/charts/strip-line.md index 2ac91e27a..5e8018487 100644 --- a/chart-sdk/react/charts/strip-line.md +++ b/chart-sdk/react/charts/strip-line.md @@ -12,7 +12,11 @@ domainurl: https://help.syncfusion.com/chart-sdk # Strip line in React Chart component -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`. +The [React Charts](https://www.syncfusion.com/react-components/react-charts) component supports horizontal and vertical strip lines and provides 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 using the `Inject` directive in the React component. + +```jsx +import { ChartComponent, Inject, StripLine } from '@syncfusion/ej2-react-charts'; +``` ## Horizontal strip lines @@ -35,7 +39,7 @@ Horizontal strip lines are created by adding the `stripline` configuration to th {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/multiple-cs23" %} -## Vertical striplines +## Vertical strip lines Vertical strip lines are created by adding the `stripline` configuration to the horizontal axis and enabling the `visible` property. They highlight vertical regions in the chart and support multiple entries for an axis. @@ -60,12 +64,15 @@ Vertical strip lines are created by adding the `stripline` configuration to the Strip lines can be customized to highlight specific regions more effectively: +- Use `color` to set the fill color of the strip line. +- Use `opacity` to adjust the strip line transparency. +- Use `text` to display a label on the strip line. - Use `start` to set the beginning value of the strip line. - Use `end` to define the ending value. - Use `startFromOrigin` to begin the strip line from the axis origin. - Use `size` to specify the strip line height or width (based on orientation). -- Use `border` to customize border appearance. -- Use `zIndex` to control whether the strip line appears behind or above chart series. +- Use `border` to configure border `color`, `width`, and `dashArray`. +- Use `zIndex` to control whether the strip line appears behind or above the chart series. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -84,11 +91,11 @@ Strip lines can be customized to highlight specific regions more effectively: {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/multiple-cs25" %} -## Customize the stripline text +## Customize the strip line text Strip line text labels can be customized for readability and visual presentation: -- Use `textStyle` to set text appearance. +- Use `textStyle` to set the text appearance. - Use `rotation` to rotate the strip line text. - Use `horizontalAlignment` and `verticalAlignment` to adjust label placement. @@ -111,7 +118,7 @@ Strip line text labels can be customized for readability and visual presentation ## Dash array -Dashed strip lines can be rendered using the `dashArray` property. The dash pattern is defined using a series of numbers representing dash and gap lengths. +Dashed strip lines can be rendered using the `dashArray` property. Each number pair defines the dash length and gap length (for example, `"5,5"`). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -130,13 +137,13 @@ Dashed strip lines can be rendered using the `dashArray` property. The dash patt {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/multiple-cs27" %} -## Recurrence stripline +## Recurrence strip line Recurring strip lines help mark repeating events across the chart axis. The following properties configure recurrence: - `isRepeat` – Enables or disables repeating strip lines. - `repeatEvery` – Specifies the interval at which the strip line repeats. -- `repeatUntil` – Defines the end value up to which strip lines should repeat. +- `repeatUntil` – Defines the end value up to which the strip lines should repeat. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -157,7 +164,7 @@ Recurring strip lines help mark repeating events across the chart axis. The foll ## Size type -The `sizeType` property determines how strip line size is interpreted. Supported units include: +The `sizeType` property determines how the strip line size is interpreted. Supported units include: - `Auto` - `Pixel` @@ -168,6 +175,8 @@ The `sizeType` property determines how strip line size is interpreted. Supported - `Minutes` - `Seconds` +Use `Pixel` for numeric axes and the date-based units (`Years`, `Months`, `Days`, `Hours`, `Minutes`, `Seconds`) for date-time axes. + {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/chart-sdk/react/charts/code-path/axis/multiple-cs29/app/index.jsx %} @@ -185,15 +194,15 @@ The `sizeType` property determines how strip line size is interpreted. Supported {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/axis/multiple-cs29" %} -## Segment stripline +## Segment strip line Segment strip lines highlight a specific region corresponding to another axis. This is useful for marking regions that depend on values across two dimensions. Key properties: - `isSegmented` – Enables segmented strip lines. -- `segmentStart` – Defines the starting point of the segment line. -- `segmentEnd` – Defines the ending point of the segment line. +- `segmentStart` – Defines the starting point of the segment region. +- `segmentEnd` – Defines the ending point of the segment region. - `segmentAxisName` – Specifies the associated axis for segmentation. {% tabs %} @@ -215,4 +224,5 @@ Key properties: ## See also -- [Mark the threshold in chart](./how-to#mark-a-threshold-in-chart) \ No newline at end of file +- [Axis customization](./axis-customization) +- [Chart annotations](./chart-annotations) \ No newline at end of file diff --git a/chart-sdk/react/charts/synchronized-chart.md b/chart-sdk/react/charts/synchronized-chart.md index 60f107a4a..0cb163f87 100644 --- a/chart-sdk/react/charts/synchronized-chart.md +++ b/chart-sdk/react/charts/synchronized-chart.md @@ -12,14 +12,33 @@ domainurl: https://help.syncfusion.com/chart-sdk 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. +## Prerequisites + +Before implementing synchronized charts, ensure: + +* Two or more `ChartComponent` instances are rendered on the same page and are accessible via React refs. +* The required feature modules are injected into the `services` of every chart that participates in synchronization. Each sub-section below lists the modules it depends on. +* The corresponding feature (tooltip, crosshair, zoom, or selection) is enabled on each chart that should participate in the synchronization. + +## Summary + +| Sync type | Method / Event | Required module(s) | +| --- | --- | --- | +| Tooltip | [`showTooltip`](https://ej2.syncfusion.com/react/documentation/api/chart#showtooltip), [`hideTooltip`](https://ej2.syncfusion.com/react/documentation/api/chart#hidetooltip) | `Tooltip` | +| Crosshair | [`showCrosshair`](https://ej2.syncfusion.com/react/documentation/api/chart#showcrosshair), [`hideCrosshair`](https://ej2.syncfusion.com/react/documentation/api/chart#hidecrosshair) | `Crosshair` | +| Zoom | [`zoomComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/IZoomCompleteEventArgs) event | `Zoom`, `Selection` | +| Selection | [`selectionComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/ISelectionCompleteEventArgs) event | `Zoom`, `Selection` | + ## Tooltip synchronization -The tooltip can be synchronized across multiple charts by using the [`showTooltip`](https://ej2.syncfusion.com/react/documentation/api/chart#showtooltip) and [`hideTooltip`](https://ej2.syncfusion.com/react/documentation/api/chart#hidetooltip) methods. When the user hovers over a data point in one chart, the `showTooltip` method can be invoked for the other charts to display the corresponding tooltip information simultaneously. +The tooltip can be synchronized across multiple charts by using the [`showTooltip`](https://ej2.syncfusion.com/react/documentation/api/chart#showtooltip) and [`hideTooltip`](https://ej2.syncfusion.com/react/documentation/api/chart#hidetooltip) methods. When the user hovers over a data point in one chart, call `showTooltip` on the other charts to display the corresponding tooltip information simultaneously. + +The `showTooltip` method accepts the pointer position (in chart pixel coordinates) obtained from the source chart's mouse event: -In the `showTooltip` method, specify the following parameters programmatically to enable the tooltip for a specific chart: +* `x` – The x-coordinate of the pointer in chart coordinates. +* `y` – The y-coordinate of the pointer in chart coordinates. -* `x` – The x-value of the data point or the x-coordinate. -* `y` – The y-value of the data point or the y-coordinate. +> Note: The `Tooltip` module must be injected and `tooltip.enable` must be set to `true` on every chart that participates in the synchronization. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -40,12 +59,14 @@ In the `showTooltip` method, specify the following parameters programmatically t ## Crosshair synchronization -The crosshair can be synchronized across multiple charts by using the [`showCrosshair`](https://ej2.syncfusion.com/react/documentation/api/chart#showcrosshair) and [`hideCrosshair`](https://ej2.syncfusion.com/react/documentation/api/chart#hidecrosshair) methods. When the user moves the pointer over one chart, calling the `showCrosshair` method on the other charts aligns the crosshair position across all synchronized charts, making data comparison easier. +The crosshair can be synchronized across multiple charts by using the [`showCrosshair`](https://ej2.syncfusion.com/react/documentation/api/chart#showcrosshair) and [`hideCrosshair`](https://ej2.syncfusion.com/react/documentation/api/chart#hidecrosshair) methods. When the user moves the pointer over one chart, call `showCrosshair` on the other charts to align the crosshair position across all synchronized charts, making data comparison easier. -In the `showCrosshair` method, specify the following parameters to render the crosshair for a particular chart: +The `showCrosshair` method accepts the pointer position (in chart pixel coordinates) obtained from the source chart's mouse event: -* `x` – Specifies the x-value of the data point or the x-coordinate. -* `y` – Specifies the y-value of the data point or the y-coordinate. +* `x` – The x-coordinate of the pointer in chart coordinates. +* `y` – The y-coordinate of the pointer in chart coordinates. + +> Note: The `Crosshair` module must be injected and `crosshair.enable` must be set to `true` on every chart that participates in the synchronization. Optionally enable `primaryXAxis.crosshairTooltip.enable` to display the crosshair value label. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -66,8 +87,10 @@ In the `showCrosshair` method, specify the following parameters to render the cr ## Zooming synchronization -Zoom levels can be synchronized across multiple charts by using the [`zoomComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/iZoomCompleteEventArgs) event. In the `zoomComplete` event, retrieve the [`zoomFactor`](https://ej2.syncfusion.com/react/documentation/api/chart/iZoomCompleteEventArgs#currentzoomfactor) and [`zoomPosition`](https://ej2.syncfusion.com/react/documentation/api/chart/iZoomCompleteEventArgs#currentzoomposition) values from the zoomed chart. -These values can then be applied to the other charts to ensure that all synchronized charts maintain the same zoom state during user interaction. +Zoom levels can be synchronized across multiple charts by using the [`zoomComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/IZoomCompleteEventArgs) event. In the `zoomComplete` event, retrieve the [`currentZoomFactor`](https://ej2.syncfusion.com/react/documentation/api/chart/IZoomCompleteEventArgs#currentzoomfactor) and [`currentZoomPosition`](https://ej2.syncfusion.com/react/documentation/api/chart/IZoomCompleteEventArgs#currentzoomposition) values from the chart that triggered the event. +These values can then be applied to the other charts so that all synchronized charts maintain the same zoom state during user interaction. + +> Note: The `Zoom` and `Selection` modules must be injected, and `zoomSettings` (for example, `enableSelectionZooming`, `enableMouseWheelZooming`, `enablePan`, and `mode`) must be configured consistently on every chart that participates in the synchronization. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -88,8 +111,13 @@ These values can then be applied to the other charts to ensure that all synchron ## Selection synchronization -Selection can be synchronized across multiple charts by using the [`selectionComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/iSelectionCompleteEventArgs) event. In the `selectionComplete` event, retrieve the selected data values or region from the active chart and apply the same selection state to the other charts. -This ensures consistent selection behavior across all connected charts and helps maintain a unified analysis experience. +Selection can be synchronized across multiple charts by using the [`selectionComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/ISelectionCompleteEventArgs) event. In the `selectionComplete` event, retrieve the `selectedDataValues` array from the chart that triggered the event and apply the same selection state to the other charts. + +The `selectedDataValues` array uses the `point` and `series` properties to identify each selection. To apply these values to another chart, remap them to `pointIndex` and `seriesIndex` and assign the result to that chart's `selectedDataIndexes` property, then call `dataBind()`. + +This ensures consistent selection behavior across all synchronized charts and helps maintain a unified analysis experience. + +> Note: The `Zoom` and `Selection` modules must be injected. The source chart must have `enableSelectionZooming: true` in `zoomSettings`, along with `selectionMode` and `selectionPattern` configured, so that selections can be raised and propagated. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -106,4 +134,18 @@ This ensures consistent selection behavior across all connected charts and helps {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/synchronized-cs4" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/synchronized-cs4" %} + +## Troubleshooting + +* Tooltip or crosshair does not appear on the target chart — verify that the corresponding module (`Tooltip` or `Crosshair`) is injected and that the feature's `enable` property is set to `true` on the target chart as well. +* Selection sync has no effect — ensure `enableSelectionZooming: true` is set in `zoomSettings` on every chart, and that `selectedDataValues` is remapped to `pointIndex`/`seriesIndex` before being assigned to `selectedDataIndexes`. +* Zoom sync drifts between charts — confirm `zoomSettings.mode` is the same on every chart (for example, `X`) and that the source event's `args.axis.name` matches the axis you intend to synchronize. +* `startMove` flag in the tooltip and crosshair samples — used internally to track active pointer movement on touch devices; do not toggle it manually. + +## See also + +* [Tooltip](tool-tip) +* [Crosshair and Trackball](cross-hair-and-track-ball) +* [Zooming](zooming) +* [Selection](selection) \ No newline at end of file diff --git a/chart-sdk/react/charts/technical-indicators.md b/chart-sdk/react/charts/technical-indicators.md index 49dfd364a..a73ca3a27 100644 --- a/chart-sdk/react/charts/technical-indicators.md +++ b/chart-sdk/react/charts/technical-indicators.md @@ -13,11 +13,47 @@ domainurl: https://help.syncfusion.com/chart-sdk A technical indicator is a mathematical calculation based on historical price, volume, or open‑interest information that aims to forecast financial market direction. -Chart supports 10 types of technical indicators. +The React Chart component supports the following 10 types of technical indicators: + +- [Accumulation Distribution](#accumulation-distribution) +- [Average True Range (ATR)](#average-true-range-atr) +- [Bollinger Bands](#bollinger-bands) +- [Exponential Moving Average (EMA)](#exponential-moving-average-ema) +- [Momentum](#momentum) +- [Moving Average Convergence Divergence (MACD)](#moving-average-convergence-divergence-macd) +- [Relative Strength Index (RSI)](#relative-strength-index-rsi) +- [Simple Moving Average (SMA)](#simple-moving-average-sma) +- [Stochastic](#stochastic) +- [Triangular Moving Average (TMA)](#triangular-moving-average-tma) + +## Data Source + +Technical indicators are usually added along with a financial series. The [`seriesName`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#seriesname) property represents the series whose data has to be analyzed through the indicator. The linked series must provide OHLC (and where required, `volume`) fields. + +Technical indicators can also be added without a series by using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#datasource) property of the indicator. When `dataSource` is set, it overrides the data of the series referenced by `seriesName`. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/series/technical-indicators-cs16/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/series/technical-indicators-cs16/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/series/technical-indicators-cs16/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/series/technical-indicators-cs16/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/technical-indicators-cs16" %} ## Accumulation Distribution -Accumulation Distribution combines price and volume to show how money may be flowing into or out of a stock. To render an Accumulation Distribution indicator, use indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) as `AccumulationDistribution` and inject `AccumulationDistributionIndicator` into services. To calculate the signal line, the [`volume`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#volume) field must be included in the `dataSource`. +Accumulation Distribution combines price and volume to show how money may be flowing into or out of a stock. To render an Accumulation Distribution indicator, set indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) to `AccumulationDistribution` and inject `AccumulationDistributionIndicator` into services. The [`volume`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#volume) field is required in the `dataSource` to compute the indicator. + +**Required modules:** `LineSeries`, `AccumulationDistributionIndicator`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -38,7 +74,9 @@ Accumulation Distribution combines price and volume to show how money may be flo ## Average True Range (ATR) -ATR measures stock volatility by comparing the current value with the previous value. To render an Average True Range (ATR) indicator, use indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) as `Atr` and inject `AtrIndicator` into services. +ATR measures stock volatility by computing the True Range (the greatest of: high minus low, absolute high minus previous close, and absolute low minus previous close) and applying Wilder smoothing over the period. To render an ATR indicator, set indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) to `Atr` and inject `AtrIndicator` into services. The default [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#period) is 14. + +**Required modules:** `LineSeries`, `AtrIndicator`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -57,9 +95,11 @@ ATR measures stock volatility by comparing the current value with the previous v {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/technical-indicators-cs2" %} -## Bollinger Band +## Bollinger Bands -A chart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. To render a Bollinger Band, use indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) as `BollingerBand` and inject the `BollingerBands` module and `RangeAreaSeries` into services. Bollinger Band is represented by three lines (`upperLine`, `lowerLine`, `signalLine`). The default values of the Bollinger Band [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#period) is 14 and [`standardDeviations`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#standarddeviation) is 2. +A chart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. To render Bollinger Bands, set indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) to `BollingerBand` and inject the `BollingerBands` module and `RangeAreaSeries` into services. Bollinger Bands are represented by three lines: `upperLine`, `lowerLine`, and `middleLine` (the basis/SMA). The default [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#period) is 14 and the default [`standardDeviation`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#standarddeviation) is 2. The `period` accepts positive integers; the `standardDeviation` typically ranges from 1 to 3. + +**Required modules:** `LineSeries`, `BollingerBands`, `RangeAreaSeries`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -78,9 +118,9 @@ A chart overlay that shows the upper and lower limits of normal price movements {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/technical-indicators-cs3" %} -**Customization of BollingerBand** +### Customization of Bollinger Bands -`stroke`, `stroke-width`, and `color` of `upperLine` can be customized by using [`upperLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#upperline), and the `lowerLine` can be customized by using [`lowerLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#lowerline) properties of the indicator. +The `fill`, `width`, and `dashArray` of the `upperLine` can be customized by using the [`upperLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#upperline) property, and the `lowerLine` can be customized by using the [`lowerLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#lowerline) property of the indicator. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -101,7 +141,9 @@ A chart overlay that shows the upper and lower limits of normal price movements ## Exponential Moving Average (EMA) -Moving average indicators are used to define the direction of the trend. To render an EMA indicator, use indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) as `Ema` and inject `EmaIndicator` into services. +Moving average indicators are used to define the direction of the trend. To render an EMA indicator, set indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) to `Ema` and inject `EmaIndicator` into services. The default [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#period) is 14. + +**Required modules:** `LineSeries`, `EmaIndicator`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -122,7 +164,9 @@ Moving average indicators are used to define the direction of the trend. To rend ## Momentum -Momentum shows the speed at which the stock price is changing. To render a Momentum indicator, use indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) as `Momentum` and inject the `MomentumIndicator` module into services. The Momentum indicator is represented by two lines (`upperLine`, `signalLine`). In the Momentum indicator, the `upperBand` value is always rendered at 100. +Momentum shows the speed at which the stock price is changing. To render a Momentum indicator, set indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) to `Momentum` and inject the `MomentumIndicator` module into services. The Momentum indicator is represented by two lines: `upperBand` and `signalLine`. The `upperBand` value is always rendered at 100. The default [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#period) is 14. + +**Required modules:** `LineSeries`, `MomentumIndicator`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -141,9 +185,9 @@ Momentum shows the speed at which the stock price is changing. To render a Momen {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/technical-indicators-cs6" %} -**Customization of MomentumIndicator** +### Customization of Momentum -`stroke`, `stroke-width`, and `color` of `upperLine` can be customized by using the [`upperLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#upperline) property of the indicator. +The `fill`, `width`, and `dashArray` of the `upperBand` can be customized by using the [`upperLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#upperline) property of the indicator. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -164,7 +208,9 @@ Momentum shows the speed at which the stock price is changing. To render a Momen ## Moving Average Convergence Divergence (MACD) -MACD is based on the difference between two EMAs. To render a MACD indicator, use indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) as `Macd` and inject the `MacdIndicator` module into services. The MACD indicator is represented by the MACD line, signal line, and MACD histogram. The MACD histogram highlights the difference between the MACD line and the signal line. +MACD is based on the difference between two EMAs. To render a MACD indicator, set indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) to `Macd` and inject the `MacdIndicator` module into services. The MACD indicator is represented by the MACD line, signal line, and MACD histogram. The MACD histogram highlights the difference between the MACD line and the signal line. The default `slowPeriod` is 26, the default `fastPeriod` is 12, and the default `period` is 9. + +**Required modules:** `LineSeries`, `ColumnSeries`, `MacdIndicator`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -183,11 +229,9 @@ MACD is based on the difference between two EMAs. To render a MACD indicator, us {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/technical-indicators-cs8" %} -**Customization of MACD** - -`stroke`, `stroke-width`, and `color` of `macdLine` can be customized by using the [`macdLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#macdline) property of the indicator. The positive and negative changes of the histogram can be customized by [`macdPositiveColor`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#macdpositivecolor) and [`macdNegativeColor`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#macdnegativecolor) properties. The [`macdType`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#macdtype) is used to define the type of MACD indicator. Customize the MACD period using [`slowPeriod`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#slowperiod) and [`fastPeriod`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#fastperiod) properties. +### Customization of MACD -By default, `macdType` is `Both`. +The `fill`, `width`, and `dashArray` of the `macdLine` can be customized by using the [`macdLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#macdline) property of the indicator. The positive and negative changes of the histogram can be customized by the [`macdPositiveColor`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#macdpositivecolor) and [`macdNegativeColor`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#macdnegativecolor) properties. The [`macdType`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#macdtype) is used to define the type of MACD indicator. Valid values are `Both`, `Line`, and `Histogram`. By default, `macdType` is set to `Both`. Customize the MACD period using the [`slowPeriod`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#slowperiod) and [`fastPeriod`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#fastperiod) properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -208,7 +252,9 @@ By default, `macdType` is `Both`. ## Relative Strength Index (RSI) -RSI shows how strongly a stock is moving in its current direction. To render an RSI indicator, use indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) as `Rsi` and inject the `RsiIndicator` module into services. The RSI indicator is represented by three lines (`upperBand`, `lowerBand`, `signalLine`). The `upperBand` and `lowerBand` values are customized by [`overBought`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#overbought) and [`overSold`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#oversold) properties of the indicator, and the `signalLine` is calculated using the RSI formula. +RSI shows how strongly a stock is moving in its current direction. To render an RSI indicator, set indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) to `Rsi` and inject the `RsiIndicator` module into services. The RSI indicator is represented by three lines: `upperBand`, `lowerBand`, and `signalLine`. The `upperBand` and `lowerBand` values are customized by the [`overBought`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#overbought) and [`overSold`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#oversold) properties of the indicator, and the `signalLine` is calculated using the RSI formula. The defaults are `overBought` = 70, `overSold` = 30, and `period` = 14. Use the [`showZones`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#showzones) property to show or hide the overbought and oversold regions. + +**Required modules:** `LineSeries`, `RsiIndicator`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -229,7 +275,9 @@ RSI shows how strongly a stock is moving in its current direction. To render an ## Simple Moving Average (SMA) -Moving average indicators are used to define the direction of the trend. To render an SMA indicator, use indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) as `Sma` and inject the `SmaIndicator` module into services. +Moving average indicators are used to define the direction of the trend. To render an SMA indicator, set indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) to `Sma` and inject the `SmaIndicator` module into services. The default [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#period) is 14. + +**Required modules:** `LineSeries`, `SmaIndicator`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -250,7 +298,9 @@ Moving average indicators are used to define the direction of the trend. To rend ## Stochastic -Stochastic shows how a stock compares to its previous price levels. To render a Stochastic indicator, use indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) as `Stochastic` and inject the `StochasticIndicator` module into services. The Stochastic indicator is represented by four lines (`upperLine`, `lowerLine`, `periodLine`, `signalLine`). The `upperBand` and `lowerBand` values are customized by [`overBought`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#overbought) and [`overSold`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#oversold) properties of the indicator, and the `periodLine` and `signalLine` are rendered based on the stochastic formula. +Stochastic shows how a stock compares to its previous price levels. To render a Stochastic indicator, set indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) to `Stochastic` and inject the `StochasticIndicator` module into services. The Stochastic indicator is represented by four lines: `upperLine`, `lowerLine`, `kLine` (%K), and `signalLine` (%D). The `upperBand` and `lowerBand` values are customized by the [`overBought`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#overbought) and [`overSold`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#oversold) properties of the indicator, and the `kLine` and `signalLine` are rendered based on the stochastic formula. The defaults are `overBought` = 80, `overSold` = 20, `kPeriod` = 14, and `dPeriod` = 3. Use the [`showZones`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#showzones) property to show or hide the overbought and oversold regions. + +**Required modules:** `LineSeries`, `StochasticIndicator`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -269,9 +319,9 @@ Stochastic shows how a stock compares to its previous price levels. To render a {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/technical-indicators-cs12" %} -**Customization of StochasticIndicator** +### Customization of Stochastic -`stroke`, `stroke-width`, and `color` of `upperLine` can be customized by using [`upperLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#upperline), the `lowerLine` can be customized by using [`lowerLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#lowerline), and the `periodLine` can be customized by using [`periodLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#periodline) properties of the indicator. Customize the period used to find the average price using [`kPeriod`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#kperiod) and [`dPeriod`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#dperiod) properties. +The `fill`, `width`, and `dashArray` of the `upperLine` can be customized by using the [`upperLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#upperline) property, the `lowerLine` can be customized by using the [`lowerLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#lowerline) property, and the `kLine` can be customized by using the [`periodLine`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#periodline) property of the indicator. Customize the period used to find the average price using the [`kPeriod`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#kperiod) and [`dPeriod`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#dperiod) properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -292,7 +342,9 @@ Stochastic shows how a stock compares to its previous price levels. To render a ## Triangular Moving Average (TMA) -Moving average indicators are used to define the direction of the trend. To render a TMA indicator, use indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) as `Tma` and inject the `TmaIndicator` module into services. +Moving average indicators are used to define the direction of the trend. To render a TMA indicator, set indicator [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#type) to `Tma` and inject the `TmaIndicator` module into services. TMA requires OHLC fields in the `dataSource`. The default [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#period) is 14. + +**Required modules:** `LineSeries`, `TmaIndicator`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -311,9 +363,9 @@ Moving average indicators are used to define the direction of the trend. To rend {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/technical-indicators-cs14" %} -**Customization of Technical Indicators** +## General Customization -`stroke`, `stroke-width`, and `color` of `signalLine` can be customized by using [`fill`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#fill), [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#width), and [`dashArray`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#dasharray) properties. The [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#period) property defines the number of data points used for calculations. The [`field`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#field) value determines which price value to compare with the previous price. It is applicable to Bollinger Bands and moving averages. The [`showZones`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#showzones) property shows or hides the overbought and oversold regions. It is applicable for RSI and Stochastic indicators. +The `fill`, `width`, and `dashArray` of the `signalLine` can be customized by using the [`fill`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#fill), [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#width), and [`dashArray`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#dasharray) properties. The [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#period) property defines the number of data points used for calculations. The [`field`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#field) value determines which price value is used for the calculation. It is applicable to Bollinger Bands and moving averages. The [`showZones`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#showzones) property shows or hides the overbought and oversold regions. It is applicable to RSI and Stochastic indicators. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -332,28 +384,38 @@ Moving average indicators are used to define the direction of the trend. To rend {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/technical-indicators-cs15" %} -**Data Source** +## Module Dependencies -Usually, technical indicators are added along with a financial series. The [`seriesName`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#seriesname) represents the series whose data has to be analyzed through indicators. +To render any indicator, inject the `LineSeries` module using `Chart.Inject(LineSeries)`. The following additional modules are required per indicator: -Technical indicators can also be added without a series by using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#datasource) property of the indicator. +| Indicator | Additional required modules | +| --- | --- | +| Accumulation Distribution | `AccumulationDistributionIndicator` | +| ATR | `AtrIndicator` | +| Bollinger Bands | `BollingerBands`, `RangeAreaSeries` | +| EMA | `EmaIndicator` | +| Momentum | `MomentumIndicator` | +| MACD | `ColumnSeries`, `MacdIndicator` | +| RSI | `RsiIndicator` | +| SMA | `SmaIndicator` | +| Stochastic | `StochasticIndicator` | +| TMA | `TmaIndicator` | -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/series/technical-indicators-cs16/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/series/technical-indicators-cs16/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/series/technical-indicators-cs16/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/series/technical-indicators-cs16/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} +For the full list of chart modules, see [Chart feature modules](feature-modules.md). -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/technical-indicators-cs16" %} +## Troubleshooting + +- **Indicator does not render** — Ensure both `LineSeries` and the indicator-specific module are injected via `Chart.Inject(...)`. +- **Volume-required indicators (Accumulation Distribution) show no data** — Verify the [`volume`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#volume) field is present in your `dataSource`. +- **RSI/Stochastic lines are clipped** — Adjust the Y-axis range so the overbought/oversold bands fit, or set [`showZones`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#showzones) to `false`. +- **MACD histogram missing** — Inject `ColumnSeries` in addition to `MacdIndicator`. + +## Accessibility + +For information on building accessible charts (keyboard navigation, screen reader labels, and high-contrast support), see [Accessibility in React Charts](accessibility.md). + +## See also -**Module Dependencies** -To render an indicator, it is mandatory to inject the `LineSeries` module using `Chart.Inject(LineSeries)`. In addition, the MACD indicator requires `ColumnSeries`, and Bollinger Bands requires `RangeAreaSeries`. \ No newline at end of file +- [Chart series](chart-series.md) +- [Financial chart types](financial-types.md) +- [API reference: technicalIndicatorModel](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel) diff --git a/chart-sdk/react/charts/title-subtitle.md b/chart-sdk/react/charts/title-subtitle.md index 83bfd4626..084d7be3d 100644 --- a/chart-sdk/react/charts/title-subtitle.md +++ b/chart-sdk/react/charts/title-subtitle.md @@ -10,11 +10,13 @@ domainurl: https://help.syncfusion.com/chart-sdk # Title and Subtitle in React Chart Component +Chart titles and subtitles provide context for the visualized data. The title 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. Customize both elements in terms of position, alignment, and style to match your application's design. + 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. -## Chart title +## Chart Title -Add a chart title using the [`title`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#title) property. The title appears at the top of the chart by default and is used to describe the purpose or subject of the visualization. +Add a chart title using the [`title`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#title) property. By default, the title is rendered at the top of the chart and represents the value assigned to the `title` property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -33,7 +35,7 @@ Add a chart title using the [`title`](https://ej2.syncfusion.com/react/documenta {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/chart-title-cs5" %} -### Title position +### Title Position Use the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#position) property within [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#titlestyle) to place the title at the left, right, top, or bottom of the chart. The default position is at the top. @@ -54,7 +56,7 @@ Use the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/ti {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/chart-title-cs7" %} -To manually position the title anywhere within the chart, use the [`x`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#x) and [`y`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#y) properties. +To position the title anywhere within the chart, use the [`x`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#x) and [`y`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#y) properties. These values are pixel offsets from the chart area and override the `position` property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -73,7 +75,7 @@ To manually position the title anywhere within the chart, use the [`x`](https:// {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/chart-title-cs8" %} -### Title alignment +### Title Alignment Align the chart title to the near, center, or far side of the chart using the [`textAlignment`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#textalignment) property. @@ -94,30 +96,47 @@ Align the chart title to the near, center, or far side of the chart using the [` {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/chart-title-cs9" %} -### Title wrap +### Title Text Style -Customize the title’s appearance using the `textStyle` property. Options include `size`, `color`, `fontFamily`, `fontWeight`, `fontStyle`, `opacity`, `textAlignment`, and `textOverflow` to control how the title is rendered within the chart area. +Customize the title's appearance using the [`textStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#textstyle) property. Options include `size`, `color`, `fontFamily`, `fontWeight`, `fontStyle`, and `opacity` to control the title's font and color. -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/series/column-cs7/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/series/column-cs7/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/series/column-cs7/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart-sdk/react/charts/code-path/series/column-cs7/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} +```jsx +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category, Legend } from '@syncfusion/ej2-react-charts'; + +const titleStyle = { + fontFamily: 'Arial', + fontStyle: 'italic', + fontWeight: 'regular', + color: '#E27F2D', + size: '24px' +}; + + + + + + + +``` + +### Long Title Handling + +For long titles, control wrapping and overflow with the following [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#titlestyle) properties: + +- [`maximumTitleWidth`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#maximumtitlewidth) – Sets the maximum width (in pixels) for the title before wrapping or truncation applies. The default is `null` (no limit). +- [`textOverflow`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#textoverflow) – Specifies how overflowing text is rendered. Supported values are `Wrap` (default) and `Trim`. +- [`textWrap`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#textwrap) – Controls line-break behavior when `textOverflow` is `Wrap`. Supported values are `Normal`, `BreakWord`, and `AnyWhere`. -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/column-cs7" %} +```js +const titleStyle = { + textOverflow: 'Trim', + maximumTitleWidth: 250 +}; +``` -## Chart subtitle +## Chart Subtitle -Add a subtitle to the chart using the [`subTitle`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#subtitle) property. Subtitles help provide additional context such as descriptions, notes, or supporting information related to the chart data. +Add a subtitle to the chart using the [`subTitle`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#subtitle) property. Subtitles provide additional context such as descriptions, notes, or supporting information related to the chart data. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -134,4 +153,60 @@ Add a subtitle to the chart using the [`subTitle`](https://ej2.syncfusion.com/re {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/chart-title-cs6" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/chart-title-cs6" %} + +Customize the subtitle's appearance, position, and alignment using [`subTitleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#subtitlestyle). The subtitle supports the same `textStyle`, `position`, `textAlignment`, `x`, `y`, `maximumTitleWidth`, `textOverflow`, and `textWrap` properties as the title. + +### Subtitle Position + +Use the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#position) property within [`subTitleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#subtitlestyle) to place the subtitle at the top, bottom, left, or right of the chart. The default position is at the top, directly below the title. + +```jsx +const subTitleStyle = { position: 'Bottom' }; +``` + +### Subtitle Alignment + +Align the subtitle to the near, center, or far side of the chart using the [`textAlignment`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#textalignment) property within `subTitleStyle`. + +```jsx +const subTitleStyle = { position: 'Top', textAlignment: 'Center' }; +``` + +### Subtitle Text Style + +Customize the subtitle's appearance using the [`textStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#textstyle) property of `subTitleStyle`. It accepts the same `size`, `color`, `fontFamily`, `fontWeight`, `fontStyle`, and `opacity` options as the title. + +```jsx +const subTitleStyle = { + textStyle: { + fontFamily: 'Arial', + fontStyle: 'italic', + fontWeight: 'regular', + color: '#E27F2D', + size: '14px' + } +}; +``` + +### Subtitle Template + +For complete control over the subtitle markup, use the [`subTitleTemplate`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#subtitletemplate) property to supply a custom HTML string. The template can include inline styles or a reference to a CSS class defined in the application. + +```jsx + + +``` + +## See also + +* [Chart dimensions](https://ej2.syncfusion.com/react/documentation/chart/chart-dimensions) +* [Chart appearance](https://ej2.syncfusion.com/react/documentation/chart/chart-appearance) +* [Legend](https://ej2.syncfusion.com/react/documentation/chart/legend) +* [Accessibility](https://ej2.syncfusion.com/react/documentation/chart/accessibility) +* [Getting started with React Chart](https://ej2.syncfusion.com/react/documentation/chart/getting-started) \ No newline at end of file diff --git a/chart-sdk/react/charts/tool-tip.md b/chart-sdk/react/charts/tool-tip.md index c0dcfdf01..3d290b276 100644 --- a/chart-sdk/react/charts/tool-tip.md +++ b/chart-sdk/react/charts/tool-tip.md @@ -12,11 +12,26 @@ domainurl: https://help.syncfusion.com/chart-sdk The chart displays detailed information about a data point through a tooltip when the mouse pointer moves over the point. +> Note: The examples in this section assume that the `@syncfusion/ej2-react-charts` package is installed. Import `ChartComponent`, `SeriesCollectionDirective`, `SeriesDirective`, and `Inject` from the package, and add `Tooltip` to the `services` array of `Inject`. For setup details, see [Getting started with React Chart](https://ej2.syncfusion.com/react/documentation/chart/getting-started). + ## Default tooltip -By default, the tooltip is not visible. You can enable the tooltip by setting the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#enable) property to **true** and by injecting `Tooltip` into the `provide`. +By default, the tooltip is disabled. Enable it by setting the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#enable) property to **true** on the `tooltip` settings and by adding the `Tooltip` module to the `services` array of `Inject`, as shown in the following example: + +```jsx +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Tooltip } from '@syncfusion/ej2-react-charts'; + +const tooltip = { enable: true }; + + + + + + + +``` {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -35,9 +50,16 @@ By default, the tooltip is not visible. You can enable the tooltip by setting th {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/tooltip-cs1" %} -## Fixed tooltip +## Fixed Tooltip + +By default, the tooltip tracks the mouse movement. Use the [`location`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#location) property to render the tooltip at a fixed position. The `location` property accepts an object with `x` and `y` pixel offsets measured from the chart's top-left corner: -By default, the tooltip tracks the mouse movement. You can render the tooltip at a fixed position by using the [`location`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#location) property. +```js +const tooltip = { + enable: true, + location: { x: 120, y: 20 } +}; +``` {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -56,7 +78,7 @@ By default, the tooltip tracks the mouse movement. You can render the tooltip at {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/tooltip-cs11" %} -## Format the tooltip +## Format the Tooltip By default, the tooltip displays the x- and y-values of a data point. Additional information can be shown by specifying a custom format. For example, the format `${series.name} ${point.x}` displays the series name along with the x-value of the data point. @@ -77,9 +99,7 @@ By default, the tooltip displays the x- and y-values of a data point. Additional {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/tooltip-cs2" %} - - -## Individual series format +## Individual Series Format Each series tooltip can be formatted separately by using the series [`tooltipFormat`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#tooltipformat) property. @@ -102,9 +122,7 @@ Each series tooltip can be formatted separately by using the series [`tooltipFor {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/tooltip-cs3" %} - - -## Inline tooltip formatting +## Inline Tooltip Formatting The tooltip content can be formatted directly within the [`format`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipsettings#format) property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events. @@ -121,35 +139,39 @@ const tooltip = { In the above example, `point.x` is displayed in month-year format, `point.y` is displayed with two decimal places, `point.size` displays the size value of the data point, and `series.opacity` displays the opacity value applied to the series. -Inline formatting can be applied to the following tooltip tokens: - -- `point.x` – Specifies the x-value of the data point, such as DateTime or category values. -- `point.y` – Specifies the numeric y-value of the data point. -- `point.size` – Specifies the size value of the data point, commonly used in bubble series. -- `point.high` and `point.low` – Specify the high and low values, commonly used in range and financial series. -- `point.open` and `point.close` – Specify the open and close values, commonly used in financial series. -- `point.volume` – Specifies the volume value, commonly used in financial series. -- `point.minimum` – Specifies the minimum value, commonly used in box and whisker series. -- `point.maximum` – Specifies the maximum value, commonly used in box and whisker series. -- `point.median` – Specifies the median value, commonly used in box and whisker series. -- `point.lowerQuartile` – Specifies the lower quartile value, commonly used in box and whisker series. -- `point.upperQuartile` – Specifies the upper quartile value, commonly used in box and whisker series. -- `point.outliers` – Specifies the outlier values, commonly used in box and whisker series. -- `series.name` – Specifies the name assigned to the series. -- `series.type` – Specifies the rendering type of the series, such as `Line`, `Spline`, or `Column`. -- `series.opacity` – Specifies the opacity value applied to the series. This value controls the visual transparency of the series and can be customized in the series configuration. - -**Important:** The availability of point-specific tokens depends on the series type and the values configured in the data source. For example, `point.size` is applicable to bubble series, while `point.median`, `point.lowerQuartile`, and `point.upperQuartile` are applicable to box and whisker series. The `series.name` and `series.type` tokens return string values, so DateTime or number formatting is not applied to these tokens. - -The following format types are supported: - -- DateTime formats such as `MMM yyyy`, `MM:yy`, and `dd MMM` -- Number formats such as: +### Supported Tokens + +The following tokens can be combined with a format specifier: + +| Token | Description | Series type | +| --- | --- | --- | +| `point.x` | x-value of the data point (DateTime or category). | All | +| `point.y` | Numeric y-value of the data point. | All | +| `point.size` | Size value of the data point. | Bubble | +| `point.high`, `point.low` | High and low values. | Range, financial | +| `point.open`, `point.close` | Open and close values. | Financial | +| `point.volume` | Volume value. | Financial | +| `point.minimum`, `point.maximum` | Minimum and maximum values. | Box and whisker | +| `point.median` | Median value. | Box and whisker | +| `point.lowerQuartile`, `point.upperQuartile` | Lower and upper quartile values. | Box and whisker | +| `point.outliers` | Outlier values. | Box and whisker | +| `series.name` | Name assigned to the series (string). | All | +| `series.type` | Rendering type of the series (string). | All | +| `series.opacity` | Opacity value configured in the series settings. | All | + +> **Important:** The availability of point-specific tokens depends on the series type and the values configured in the data source. The `series.name` and `series.type` tokens return string values, so DateTime or number formatting is not applied to these tokens. + +### Supported Format Types + +The following format types can be appended after the colon (`:`) for any numeric or DateTime token: + +- **DateTime formats** such as `MMM yyyy`, `MM:yy`, and `dd MMM` +- **Number formats** such as: - `n2` – number with two decimal places - `n0` – number without decimals - `c2` – currency format - `p1` – percentage format - - `e1` – exponential notation + - `e1` – exponential notation If the specified format does not match the resolved value type, the original value is displayed. @@ -170,7 +192,7 @@ If the specified format does not match the resolved value type, the original val {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/tooltip-cs14" %} -## Tooltip template +## Tooltip Template Custom HTML content can be rendered in the tooltip by using the [`template`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#template) property. The `${x}` and `${y}` placeholders can be used within the template to display the x- and y-values of the corresponding data point. @@ -191,7 +213,7 @@ Custom HTML content can be rendered in the tooltip by using the [`template`](htt {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/tooltip-cs4" %} -## Enable highlight +## Series Highlight on Tooltip By setting the [`enableHighlight`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#enablehighlight) property to **true**, all points in the hovered series are highlighted while the remaining points are dimmed. This behavior improves focus and readability during data analysis. @@ -212,7 +234,7 @@ By setting the [`enableHighlight`](https://ej2.syncfusion.com/react/documentatio {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/tooltip-cs12" %} -## Tooltip mapping name +## Tooltip Mapping Name By default, the tooltip displays only the x- and y-values of a data point. Additional information from the data source can be shown by using the [`tooltipMappingName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#tooltipmappingname) property of the series. Use the `${point.tooltip}` placeholder in the tooltip format to display the mapped value. @@ -233,13 +255,51 @@ By default, the tooltip displays only the x- and y-values of a data point. Addit {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/tooltip-cs5" %} -## Customize the appearance of tooltip +## Tooltip Header + +Use the [`header`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#header) property to display a title at the top of the tooltip. The value can be a static string or a placeholder such as `${point.x}` that is resolved per data point. + +```js +const tooltip = { + enable: true, + header: '${point.x}', + format: '${series.name} : ${point.y}' +}; +``` + +## Shared Tooltip + +The [`shared`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#shared) property merges the values of all visible series for the hovered x-value into a single tooltip. This is useful for comparing multiple series at a specific point. To render one tooltip per series instead, use the [`split`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#split) property described in [Split Tooltip](#split-tooltip). + +```js +const tooltip = { + enable: true, + shared: true +}; +``` + +## Tooltip Animation + +The [`duration`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#duration) property controls the duration (in milliseconds) of the tooltip's open and close animations. The default is `500`. + +```js +const tooltip = { + enable: true, + duration: 1000 +}; +``` + +Use the [`fadeInDuration`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#fadeinduration) and [`fadeOutDuration`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#fadeoutduration) properties to configure the fade-in and fade-out durations independently. + +## Customize the Appearance of Tooltip The appearance of the tooltip can be customized by using the following properties: - [`fill`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#fill) to set the background color - [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#border) to configure the tooltip border - [`textStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#textstyle) to customize the tooltip text style -The [`highlightColor`](https://ej2.syncfusion.com/react/documentation/api/chart#highlightcolor) property is used to change the color of a data point when it is highlighted during tooltip interaction. +- [`opacity`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#opacity) to set the opacity of the tooltip background (value between `0` and `1`) + +The [`highlightColor`](https://ej2.syncfusion.com/react/documentation/api/chart#highlightcolor) property is used to change the color of a data point when it is highlighted during tooltip interaction. To enable the highlight effect itself, see [Series Highlight on Tooltip](#series-highlight-on-tooltip). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -258,7 +318,7 @@ The [`highlightColor`](https://ej2.syncfusion.com/react/documentation/api/chart# {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/tooltip-cs6" %} -## Closest tooltip +## Closest Tooltip The [`showNearestTooltip`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#shownearesttooltip) property displays the tooltip for the data point nearest to the pointer, even when the pointer is not directly positioned over the point. @@ -279,17 +339,17 @@ The [`showNearestTooltip`](https://ej2.syncfusion.com/react/documentation/api/ch {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/tooltip-cs13" %} -## Split tooltip +## Split Tooltip -The split tooltip displays a separate tooltip for each series at the same data point, making it easier to compare values across multiple series. +The split tooltip displays a separate tooltip for each series at the same data point, making it easier to compare values across multiple series. Use [`split`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#split) to render one tooltip per series; use [`shared`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#shared) to merge all series for the current x-value into a single tooltip. -Enable this feature by setting the [`split`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#split) property to **true**: +Enable the split tooltip by setting the `split` property to **true**: ```js -tooltip: { - enable: true, - split: true -} +const tooltip = { + enable: true, + split: true +}; ``` {% tabs %} @@ -299,21 +359,27 @@ tooltip: { {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/split-tooltip/app/index.tsx %} {% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/split-tooltip/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/split-tooltip/app/datasource.tsx %} +{% endhighlight %} {% endtabs %} {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/split-tooltip" %} -## Follow pointer +## Follow Pointer The follow pointer feature enables the tooltip to follow the mouse cursor or touch pointer as users interact with the chart. This provides a more dynamic and intuitive experience by keeping the tooltip close to the user's point of interaction. Enable this feature by setting the [`followPointer`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#followpointer) property to **true**: ```js -tooltip: { - enable: true, - followPointer: true -} +const tooltip = { + enable: true, + followPointer: true +}; ``` {% tabs %} @@ -323,21 +389,27 @@ tooltip: { {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/follow-pointer/app/index.tsx %} {% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/follow-pointer/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart-sdk/react/charts/code-path/user-interaction/follow-pointer/app/datasource.tsx %} +{% endhighlight %} {% endtabs %} {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/follow-pointer" %} -## Tooltip distance +## Tooltip Distance The tooltip distance property controls the spacing between the tooltip and the mouse pointer or target data point. This prevents the tooltip from overlapping with the cursor or nearby chart elements, improving readability. Set the [`distance`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#distance) property to specify the gap in pixels: ```js -tooltip: { - enable: true, - distance: 25 -} +const tooltip = { + enable: true, + distance: 25 +}; ``` {% tabs %} @@ -361,4 +433,6 @@ tooltip: { * [Format the Tooltip Value](./how-to/tool-tip-format) * [Create a Table in Tooltip](./how-to/tool-tip-table) -* [Show Tooltip Template on Button Click](https://support.syncfusion.com/kb/article/21534/how-to-show-tooltip-template-on-button-click-using-react-chart) \ No newline at end of file +* [Show Tooltip Template on Button Click](https://support.syncfusion.com/kb/article/21534/how-to-show-tooltip-template-on-button-click-using-react-chart) +* [Chart accessibility](https://ej2.syncfusion.com/react/documentation/chart/accessibility) +* [Cross-hair and trackball](https://ej2.syncfusion.com/react/documentation/chart/cross-hair-and-track-ball) \ No newline at end of file diff --git a/chart-sdk/react/charts/trend-lines.md b/chart-sdk/react/charts/trend-lines.md index 0368af495..f90fb5c83 100644 --- a/chart-sdk/react/charts/trend-lines.md +++ b/chart-sdk/react/charts/trend-lines.md @@ -13,11 +13,18 @@ domainurl: https://help.syncfusion.com/chart-sdk 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. -Charts support six types of trendlines: **Linear**, **Exponential**, **Logarithmic**, **Polynomial**, **Power**, and **Moving Average**. +The React Chart component supports six types of trendlines: + +* **Linear** - A straight, best-fit line for data with a constant rate of change. +* **Exponential** - A curved line for data that rises or falls at increasingly higher rates (requires positive y-values). +* **Logarithmic** - A best-fit curved line for data whose rate of change quickly levels out (supports positive and negative values). +* **Polynomial** - A curved line that models fluctuating data; degree is controlled by [`polynomialOrder`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#polynomialorder). +* **Power** - A curved line for datasets where measurements increase at a specific rate (requires positive y-values). +* **Moving Average** - A smoothed trendline that uses the [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#period) property to control the window size. ## Linear -A linear trendline is a straight, best‑fit line used to describe data with a constant rate of increase or decrease. Set the trendline [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `Linear` and inject the `Trendlines` module using `Chart.Inject(Trendlines)`. +A linear trendline is a straight, best-fit line used to describe data with a constant rate of change. Set the trendline [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `Linear` and inject the `Trendlines` module using ``. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -32,9 +39,9 @@ A linear trendline is a straight, best‑fit line used to describe data with a c ## Exponential -An exponential trendline displays a curved pattern useful when data rises or falls at increasing rates. Exponential trendlines cannot be generated if the dataset includes zero or negative values. +An exponential trendline is a curved line that is most useful when data values rise or fall at increasingly higher rates. Exponential trendlines cannot be generated if the dataset contains zero or negative y-values. -Set the trendline [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `Exponential` and inject the `Trendlines` module. +Set the trendline [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `Exponential` and inject the `Trendlines` module using ``. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -49,9 +56,9 @@ Set the trendline [`type`](https://ej2.syncfusion.com/react/documentation/api/ch ## Logarithmic -A logarithmic trendline is a best‑fit curved line suitable when the data increases or decreases quickly and then stabilizes. It supports both positive and negative values. +A logarithmic trendline is a best-fit curved line that is most useful when the rate of change in the data increases or decreases quickly and then levels out. A logarithmic trendline can use positive and/or negative values. -Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `Logarithmic` and inject the `Trendlines` module. +Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `Logarithmic` and inject the `Trendlines` module using ``. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -66,9 +73,9 @@ Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineM ## Polynomial -A polynomial trendline is useful when data fluctuates. It uses a curved line that can model more complex datasets. +A polynomial trendline is a curved line that is used when data fluctuates. -Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `Polynomial` and inject the `Trendlines` module. Use [`polynomialOrder`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#polynomialorder) to define the degree of the polynomial. +Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `Polynomial` and inject the `Trendlines` module using ``. Use [`polynomialOrder`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#polynomialorder) to define the degree of the polynomial. Recommended values are `2` to `6`; higher orders risk overfitting and may render slowly on large datasets. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -83,9 +90,9 @@ Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineM ## Power -A power trendline is ideal for datasets where measurements increase at a constant rate. It displays a curved line that best fits exponential growth or decay patterns. +A power trendline is a curved line that is best used with data sets that compare measurements that increase at a specific rate. Power trendlines cannot be generated if the dataset contains zero or negative y-values. -Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `Power` and inject the `Trendlines` module. +Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `Power` and inject the `Trendlines` module using ``. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -106,9 +113,9 @@ Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineM ## Moving Average -A moving average trendline smooths fluctuations to reveal overall trends more clearly. The [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#period) property specifies the number of data points used to calculate each average. +A moving average trendline smooths fluctuations in data to show a pattern or trend more clearly. The [`period`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#period) property specifies the number of data points used to calculate each average. Choose a `period` that is at least `2` and less than the total number of data points; the first `period - 1` points will not have a moving-average value rendered. -Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `MovingAverage` and inject the `Trendlines` module. +Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#type) to `MovingAverage` and inject the `Trendlines` module using ``. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -121,9 +128,9 @@ Set [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineM {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/trendlines-cs6" %} -**Customization of Trendline** +## Customization of Trendline -Customize trendline appearance using the [`fill`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#fill) property for color and the [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#width) property for line thickness. +Customize the trendline appearance using the [`fill`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#fill) property for color and the [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#width) property for line thickness. Use [`dashArray`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#dasharray) to render the trendline as a dashed line. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -138,9 +145,9 @@ Customize trendline appearance using the [`fill`](https://ej2.syncfusion.com/rea ## Forecasting -Trendline forecasting extends the existing trendline to estimate future and past values. +Trendline forecasting extends the existing trendline to estimate future and past values. Forecasting is supported for all six trendline types: **Linear**, **Exponential**, **Logarithmic**, **Polynomial**, **Power**, and **Moving Average**. Specify a positive integer for either property to forecast that many data points beyond the chart's actual data range. -## Forward Forecasting +### Forward Forecasting Use the [`forwardForecast`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#forwardforecast) property to extend the trendline into the future. @@ -155,7 +162,7 @@ Use the [`forwardForecast`](https://ej2.syncfusion.com/react/documentation/api/c {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/trendlines-cs8" %} -## Backward Forecasting +### Backward Forecasting Use the [`backwardForecast`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#backwardforecast) property to extend the trendline into past data points. @@ -170,9 +177,112 @@ Use the [`backwardForecast`](https://ej2.syncfusion.com/react/documentation/api/ {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/trendlines-cs9" %} +## Multiple Trendlines + +Multiple trendlines can be added to a single series to compare different fits. Pass an array of trendline objects to the `trendlines` property of the series. Each trendline must specify a unique `name` so it can be identified in the legend. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +```jsx +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Trendlines } from '@syncfusion/ej2-react-charts'; +import * as React from 'react'; + +const data = [ + { x: 1, y: 10 }, + { x: 2, y: 18 }, + { x: 3, y: 15 }, + { x: 4, y: 25 }, + { x: 5, y: 30 }, + { x: 6, y: 28 } +]; + +export default class App extends React.Component { + render() { + return ( + + + + + + + + ); + } +} +``` +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +```tsx +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Trendlines } from '@syncfusion/ej2-react-charts'; +import * as React from 'react'; + +const data: Object[] = [ + { x: 1, y: 10 }, + { x: 2, y: 18 }, + { x: 3, y: 15 }, + { x: 4, y: 25 }, + { x: 5, y: 30 }, + { x: 6, y: 28 } +]; + +export default class App extends React.Component<{}, {}> { + render() { + return ( + + + + + + + + ); + } +} +``` +{% endhighlight %} +{% endtabs %} + +## General Properties + +The following properties apply to all trendline types. + +### Name + +Use the [`name`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#name) property to assign a descriptive name to a trendline. The name is displayed in the chart legend and used to identify the trendline in tooltips. When multiple trendlines are added, a unique `name` is required for each. + +### Marker + +Customize trendline data points using the [`marker`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#marker) property. You can configure the shape, size, fill, and border of the markers. + +### Tooltip + +Use [`enableTooltip`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#enabletooltip) (default `true`) to control whether the trendline displays a tooltip on hover. + +### Animation + +Trendline rendering supports animation through the [`animation`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#animation) property. See the [AnimationModel API](https://ej2.syncfusion.com/react/documentation/api/chart/animationmodel) for general configuration options. + +### Legend Shape + +Use [`legendShape`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#legendshape) to customize the shape that represents the trendline in the legend. + +### Intercept + +Use [`intercept`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#intercept) to specify a fixed intercept value for the trendline equation. + ## Show or hide a trendline -Control visibility using the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#visible) property of the trendline. +Control the visibility of a trendline by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#visible) property to `true` or `false`. When set to `false`, the trendline is hidden from the chart but its legend entry is also removed. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs2/app/index.tsx index f283d2f97..701dba868 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs2/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs2/app/index.tsx @@ -2,8 +2,8 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, +ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts'; import { dateTimeData } from './datasource'; diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs3/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs3/app/index.jsx index e1d44d02a..5f01d9598 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs3/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs3/app/index.jsx @@ -3,13 +3,13 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTimeCategory, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTimeCategory, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { dateTimeCategoryData } from './datasource'; function App() { const primaryxAxis = { valueType: 'DateTimeCategory', skeleton: 'Ed' }; const primaryyAxis = { title: 'Sales Amount in millions(USD)' }; return - + diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs5/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs5/app/index.jsx index ef6419891..16eea5c60 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs5/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs5/app/index.jsx @@ -5,7 +5,7 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { dateTimeData } from './datasource'; function App() { - const primaryxAxis = { valueType: 'DateTime', title: 'Sales Across Years', intervalType: 'Years' }; + const primaryxAxis = { valueType: 'DateTime', title: 'Sales Across Years', interval: 2, intervalType: 'Years' }; const primaryyAxis = { title: 'Sales Amount in millions(USD)' }; return diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs5/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs5/app/index.tsx index 0cde17fed..cfc64e090 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs5/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs5/app/index.tsx @@ -9,7 +9,7 @@ import { dateTimeData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Sales Across Years', intervalType: 'Years' }; + const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Sales Across Years', interval: 2, intervalType: 'Years' }; const primaryyAxis: AxisModel = { title: 'Sales Amount in millions(USD)' }; return diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/double-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/axis/double-cs2/app/index.tsx index 0654873f5..28e459d79 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/double-cs2/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/double-cs2/app/index.tsx @@ -2,10 +2,14 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Tooltip, DataLabel, TooltipSettingsModel, AxisModel } from'@syncfusion/ej2-react-charts'; -import { loadCldr, setCurrencyCode } from '@syncfusion/ej2-base'; +import { loadCldr, setCurrencyCode } from '@syncfusion/ej2-base'; +// For non en-US cultures, install @syncfusion/ej2-cldr-data and load the CLDR JSON: +// import * as currencyData from '@syncfusion/ej2-cldr-data/main/en/currencies.json'; +// import * as numbersData from '@syncfusion/ej2-cldr-data/main/en/numbers.json'; +// loadCldr(currencyData, numbersData); import { data } from './datasource'; setCurrencyCode('EUR'); @@ -14,7 +18,7 @@ function App() { const primaryxAxis: AxisModel = { edgeLabelPlacement: 'Shift', title: 'Years' }; const primaryyAxis: AxisModel = { labelFormat: 'c', title: 'Sales Amount in Millions' }; const marker = { dataLabel: { visible: true } }; - const tooltip: TooltipSettingsModel = { enable: true, format: '${point.x} : ${point.y}' }; + const tooltip: TooltipSettingsModel = { enable: true, header: '${point.x}', format: '${point.y}' }; return + const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit' }; + return diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs1/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs1/app/index.tsx index bd3bff4ce..6ed4c7427 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs1/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs1/app/index.tsx @@ -2,18 +2,18 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, +ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit' }; + const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit' }; return diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs2/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs2/app/index.jsx index 388f6bc09..40a87646b 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs2/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs2/app/index.jsx @@ -5,9 +5,9 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000 }; - return + const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000 }; + return diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs2/app/index.tsx index 75aed02a2..44f5ab279 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs2/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs2/app/index.tsx @@ -2,18 +2,18 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, +ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000 }; + const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000 }; return diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs3/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs3/app/index.jsx index 6e3f5959b..657a26521 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs3/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs3/app/index.jsx @@ -5,9 +5,9 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, logBase: 2 }; - return + const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, logBase: 2 }; + return diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs3/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs3/app/index.tsx index f28a43621..29d0d304b 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs3/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs3/app/index.tsx @@ -2,18 +2,18 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, +ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, logBase: 2 }; + const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, logBase: 2 }; return diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs4/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs4/app/index.jsx index ac1e516bc..fb9140420 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs4/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs4/app/index.jsx @@ -5,9 +5,9 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, interval: 2 }; - return + const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, interval: 2 }; + return diff --git a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs4/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs4/app/index.tsx index 9163ec6bf..82f780ff0 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs4/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/axis/log-cs4/app/index.tsx @@ -2,18 +2,18 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, +ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, interval: 2 }; + const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, interval: 2 }; return diff --git a/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/datasource.jsx b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/datasource.jsx new file mode 100644 index 000000000..2a46adb58 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/datasource.jsx @@ -0,0 +1,8 @@ +export let data = [ + { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, + { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, + { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, + { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, + { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, + { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } +]; \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/datasource.tsx b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/datasource.tsx new file mode 100644 index 000000000..48534d374 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/datasource.tsx @@ -0,0 +1,8 @@ +export let data: Object[] = [ + { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, + { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, + { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, + { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, + { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, + { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } +]; \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/index.jsx new file mode 100644 index 000000000..c64fbcd3d --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/index.jsx @@ -0,0 +1,20 @@ +{% raw %} + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts'; +import { data } from './datasource'; +function App() { + const primaryxAxis = { valueType: 'Category' }; + return + + + + + ; +} +; +export default App; +ReactDOM.render(, document.getElementById("charts")); + +{% endraw %} \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/index.tsx new file mode 100644 index 000000000..8f217eb2e --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/index.tsx @@ -0,0 +1,23 @@ +{% raw %} + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { AxisModel,Category,ChartComponent, ColumnSeries, DataLabel, + Inject, Legend,LineSeries, SeriesCollectionDirective, SeriesDirective, + Tooltip} from '@syncfusion/ej2-react-charts'; +import { data } from './datasource'; +function App() { + const primaryxAxis: AxisModel = { valueType: 'Category' }; + + return + + + + + + +}; +export default App; +ReactDOM.render(, document.getElementById("charts")); + +{% endraw %} diff --git a/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/datasource.jsx b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/datasource.jsx new file mode 100644 index 000000000..2a46adb58 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/datasource.jsx @@ -0,0 +1,8 @@ +export let data = [ + { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, + { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, + { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, + { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, + { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, + { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } +]; \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/datasource.tsx b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/datasource.tsx new file mode 100644 index 000000000..48534d374 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/datasource.tsx @@ -0,0 +1,8 @@ +export let data: Object[] = [ + { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, + { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, + { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, + { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, + { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, + { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } +]; \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/index.jsx new file mode 100644 index 000000000..7ae378044 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/index.jsx @@ -0,0 +1,20 @@ +{% raw %} + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts'; +import { data } from './datasource'; +function App() { + const primaryxAxis = { valueType: 'Category' }; + return + + + + + ; +} +; +export default App; +ReactDOM.render(, document.getElementById("charts")); + +{% endraw %} \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/index.tsx new file mode 100644 index 000000000..140c06ac2 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs2/app/index.tsx @@ -0,0 +1,23 @@ +{% raw %} + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { AxisModel,Category,ChartComponent, ColumnSeries, DataLabel, + Inject, Legend,LineSeries, SeriesCollectionDirective, SeriesDirective, + Tooltip} from '@syncfusion/ej2-react-charts'; +import { data } from './datasource'; +function App() { + const primaryxAxis: AxisModel = { valueType: 'Category' }; + + return + + + + + + +}; +export default App; +ReactDOM.render(, document.getElementById("charts")); + +{% endraw %} diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs3/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs3/app/index.jsx index 26bfeceeb..46e0b4487 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs3/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs3/app/index.jsx @@ -5,7 +5,7 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance; + let chartInstance; function clickHandler() { chartInstance.print(); } diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs3/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs3/app/index.tsx index 6c7c92ab2..5af8bcbcb 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs3/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs3/app/index.tsx @@ -8,7 +8,7 @@ ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, from'@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance: ChartComponent; + let chartInstance: ChartComponent; function clickHandler() { chartInstance.print(); } diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs4/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs4/app/index.jsx index a5a40f636..c77dc9af5 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs4/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs4/app/index.jsx @@ -5,7 +5,7 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance; + let chartInstance; function clickHandler() { chartInstance.exportModule.export('PNG', 'sample'); } diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs4/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs4/app/index.tsx index 90679e678..aa1ca6d1b 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs4/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs4/app/index.tsx @@ -7,7 +7,7 @@ ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, Lin from'@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance: ChartComponent; + let chartInstance: ChartComponent; function clickHandler() { chartInstance.exportModule.export('PNG', 'sample'); } diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs5/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs5/app/index.jsx index 007b2a5bf..8a57969c2 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs5/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs5/app/index.jsx @@ -5,8 +5,8 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { data, data1 } from './datasource'; function App() { - const chartInstance; - const chartInstance1; + let chartInstance; + let chartInstance1; function clickHandler() { chartInstance.exportModule.export('PNG', 'sample', null, [chartInstance, chartInstance1]); } diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs5/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs5/app/index.tsx index d986c16c7..7b2be085a 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs5/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs5/app/index.tsx @@ -8,8 +8,8 @@ from'@syncfusion/ej2-react-charts'; import { data, data1 } from './datasource'; function App() { - const chartInstance: ChartComponent; - const chartInstance1:ChartComponent; + let chartInstance: ChartComponent; + let chartInstance1:ChartComponent; function clickHandler() { chartInstance.exportModule.export('PNG', 'sample', null, [chartInstance, chartInstance1]); } const primaryxAxis: AxisModel = { valueType: 'Category' }; diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs6/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs6/app/index.jsx index 931e58b2d..c99a649f4 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs6/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs6/app/index.jsx @@ -16,7 +16,7 @@ function App() { content: 'Chart Footer', fontSize: 15, }; - chartInstance.exportModule.export('PDF', 'Chart', 1, [chartInstance], null, null, true, header, footer); + chartInstance.exportModule.export('PDF', 'Chart', 'portrait', [chartInstance], null, null, true, header, footer); } const primaryxAxis = { title: 'Manager', diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs6/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs6/app/index.tsx index 422381ab6..6fae66a87 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs6/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs6/app/index.tsx @@ -21,7 +21,7 @@ function App() { content: 'Chart Footer', fontSize: 15, }; - chartInstance.exportModule.export('PDF', 'Chart', 1, [chartInstance], null, null, true, header, footer); + chartInstance.exportModule.export('PDF', 'Chart', 'portrait', [chartInstance], null, null, true, header, footer); } const primaryxAxis: AxisModel = { title: 'Manager', diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs7/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs7/app/index.jsx index 1a5219e65..9fefb284c 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs7/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs7/app/index.jsx @@ -69,7 +69,7 @@ function App() { - chartInstance2 = chart} title='Project Cost Breakdown' enableSmartLabels='true' legendSettings={legendSettings}> + chartInstance2 = chart} title='Project Cost Breakdown' enableSmartLabels={true} legendSettings={legendSettings}> diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs7/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs7/app/index.tsx index 19cf2477b..c802b9f22 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs7/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs7/app/index.tsx @@ -74,7 +74,7 @@ function App() { - chartInstance2 = chart} title='Project Cost Breakdown' enableSmartLabels='true' legendSettings={legendSettings}> + chartInstance2 = chart} title='Project Cost Breakdown' enableSmartLabels={true} legendSettings={legendSettings}> diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs9/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs9/app/index.jsx index 24e3ae84d..452ffe664 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs9/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs9/app/index.jsx @@ -5,7 +5,7 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance; + let chartInstance; const beforeExportEvent = (args) => { args.excelProperties.rows[0].cells[0].value = 'Changed Title'; args.excelProperties.rows[1].cells[0].value = 'X Title'; @@ -13,7 +13,7 @@ function App() { args.excelProperties.rows[2].cells[1].value = args.excelProperties.rows[2].cells[1].value + 2; }; function clickHandler() { - chartInstance.exportModule.export('PNG', 'sample'); + chartInstance.exportModule.export('XLSX', 'sample'); } const primaryxAxis = { valueType: 'Category' }; return (
diff --git a/code-snippet/chart-sdk/react/charts/code-path/print-cs9/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/print-cs9/app/index.tsx index a29992ad8..24e930395 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/print-cs9/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/print-cs9/app/index.tsx @@ -7,7 +7,7 @@ ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, Lin from'@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance: ChartComponent; + let chartInstance: ChartComponent; const beforeExportEvent = (args: IExportEventArgs): void => { args.excelProperties.rows[0].cells[0].value = 'Changed Title'; args.excelProperties.rows[1].cells[0].value = 'X Title'; diff --git a/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs1/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs1/app/index.tsx index 24935de79..dd52135a7 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs1/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs1/app/index.tsx @@ -2,9 +2,9 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel, - Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, CandleSeries, Selection} -from'@syncfusion/ej2-react-charts'; +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LegendSettingsModel, + Category, Tooltip, Zoom, Crosshair, CandleSeries } +from '@syncfusion/ej2-react-charts'; import { chartData } from './datasource'; function App() { diff --git a/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs2/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs2/app/index.jsx index 97d0aacae..818ee091e 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs2/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs2/app/index.jsx @@ -13,7 +13,7 @@ function App() { return - + ; diff --git a/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs2/app/index.tsx index 5fa300d77..45988b937 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs2/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/series/candle-cs2/app/index.tsx @@ -2,9 +2,9 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel, - Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, CandleSeries, Selection} -from'@syncfusion/ej2-react-charts'; +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LegendSettingsModel, + Category, Tooltip, Zoom, Crosshair, CandleSeries } +from '@syncfusion/ej2-react-charts'; import { chartData } from './datasource'; function App() { @@ -21,7 +21,7 @@ function App() { + high='high' open='open' close='close' enableSolidCandles={true} bearFillColor='#e56590' bullFillColor='#f8b883'> diff --git a/code-snippet/chart-sdk/react/charts/code-path/series/hilo-cs1/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/series/hilo-cs1/app/index.tsx index 3170677ff..11efbc960 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/series/hilo-cs1/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/series/hilo-cs1/app/index.tsx @@ -2,10 +2,9 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel, - HiloSeries, Category, Tooltip, ILoadedEventArgs, Zoom, - Crosshair, ChartTheme } -from'@syncfusion/ej2-react-charts'; +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LegendSettingsModel, + HiloSeries, Category, Tooltip, Zoom, Crosshair } +from '@syncfusion/ej2-react-charts'; import { chartData } from './datasource'; function App() { diff --git a/code-snippet/chart-sdk/react/charts/code-path/series/hiloOpenClose-cs1/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/series/hiloOpenClose-cs1/app/index.tsx index 1ee9589ea..a47ea841b 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/series/hiloOpenClose-cs1/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/series/hiloOpenClose-cs1/app/index.tsx @@ -2,9 +2,9 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel, - Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, HiloOpenCloseSeries, Selection} -from'@syncfusion/ej2-react-charts'; +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LegendSettingsModel, + Category, Tooltip, Zoom, Crosshair, HiloOpenCloseSeries } +from '@syncfusion/ej2-react-charts'; import { Browser } from '@syncfusion/ej2-base'; import { chartData } from './datasource'; diff --git a/code-snippet/chart-sdk/react/charts/code-path/series/hiloOpenClose-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/series/hiloOpenClose-cs2/app/index.tsx index 7d36f49f8..d58df8d5e 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/series/hiloOpenClose-cs2/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/series/hiloOpenClose-cs2/app/index.tsx @@ -2,9 +2,9 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel, - Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, HiloOpenCloseSeries, Selection} -from'@syncfusion/ej2-react-charts'; +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LegendSettingsModel, + Category, Tooltip, Zoom, Crosshair, HiloOpenCloseSeries } +from '@syncfusion/ej2-react-charts'; import { chartData } from './datasource'; function App() { diff --git a/code-snippet/chart-sdk/react/charts/code-path/series/series-label-customization/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/series/series-label-customization/app/index.jsx index 38baee511..8d683552e 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/series/series-label-customization/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/series/series-label-customization/app/index.jsx @@ -4,28 +4,28 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, - LineSeries, Category, DataLabel, SeriesLabel, Legend + LineSeries, Category, SeriesLabel, Legend } from '@syncfusion/ej2-react-charts'; import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource'; function App() { return - + + labelSettings={{ visible: true, background: '#E8F5E9', border: { width: 2, color: '#2E7D32' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#2E7D32' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#2E7D32' } }}> + labelSettings={{ visible: true, background: '#FFF3E0', border: { width: 2, color: '#FB8C00' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#FB8C00' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#FB8C00' } }}> + labelSettings={{ visible: true, background: '#E3F2FD', border: { width: 2, color: '#1976D2' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#1976D2' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#1976D2' } }}> + labelSettings={{ visible: true, background: '#F3E5F5', border: { width: 2, color: '#8E24AA' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#8E24AA' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#8E24AA' } }}> + labelSettings={{ visible: true, background: '#FBE9E7', border: { width: 2, color: '#D84315' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#D84315' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#D84315' } }}> diff --git a/code-snippet/chart-sdk/react/charts/code-path/series/series-label-customization/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/series/series-label-customization/app/index.tsx index 5049f80a2..06340b702 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/series/series-label-customization/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/series/series-label-customization/app/index.tsx @@ -4,28 +4,28 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, - LineSeries, Category, DataLabel, SeriesLabel, Legend + LineSeries, Category, SeriesLabel, Legend } from '@syncfusion/ej2-react-charts'; import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource'; function App(): JSX.Element { return - + + labelSettings={{ visible: true, background: '#E8F5E9', border: { width: 2, color: '#2E7D32' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#2E7D32' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#2E7D32' } }}> + labelSettings={{ visible: true, background: '#FFF3E0', border: { width: 2, color: '#FB8C00' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#FB8C00' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#FB8C00' } }}> + labelSettings={{ visible: true, background: '#E3F2FD', border: { width: 2, color: '#1976D2' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#1976D2' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#1976D2' } }}> + labelSettings={{ visible: true, background: '#F3E5F5', border: { width: 2, color: '#8E24AA' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#8E24AA' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#8E24AA' } }}> + labelSettings={{ visible: true, background: '#FBE9E7', border: { width: 2, color: '#D84315' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#D84315' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#D84315' } }}> diff --git a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/index.jsx index 51a837bc3..2bed9d9d4 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/index.jsx @@ -1,61 +1,53 @@ {% raw %} import * as React from "react"; import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, LineSeries, DataEditing } from '@syncfusion/ej2-react-charts'; -import { columnData, lineData } from './datasource'; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, DataEditing } from '@syncfusion/ej2-react-charts'; +import { columnData } from './datasource'; + function App() { - return ( - - - - - - + return ( + + + + + + ); } export default App; diff --git a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/index.tsx index 2259ea158..94231319b 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/data-editing-cs2/app/index.tsx @@ -6,9 +6,9 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, - Legend, Category, Tooltip, DataLabel, ColumnSeries, LineSeries, DataEditing + Legend, Category, Tooltip, DataLabel, ColumnSeries, DataEditing } from '@syncfusion/ej2-react-charts'; -import { columnData, lineData } from './datasource'; +import { columnData } from './datasource'; function App() { return ( @@ -32,16 +32,12 @@ function App() { majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} - chartArea={{ - border: { - width: 0, - }, - }} + chartArea={{ border: { width: 0 } }} title="Sales Prediction of Products" tooltip={{ enable: true }} > - diff --git a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs1/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs1/app/index.jsx index 29ad54914..50995c6e4 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs1/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs1/app/index.jsx @@ -3,7 +3,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { Chart, AreaSeries, LineSeries, DateTime, Tooltip, IMouseEventArgs, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; +import { Chart, AreaSeries, LineSeries, DateTime, Tooltip, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; import { synchronizedData } from './datasource'; import { Browser } from '@syncfusion/ej2-base'; diff --git a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs1/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs1/app/index.tsx index c09136b90..59229d276 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs1/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs1/app/index.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { Chart, AreaSeries, LineSeries, DateTime, Tooltip, IMouseEventArgs, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; +import { Chart, AreaSeries, LineSeries, DateTime, Tooltip, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; import { synchronizedData } from './datasource'; import { Browser } from '@syncfusion/ej2-base'; diff --git a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs2/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs2/app/index.jsx index 2f448fd86..2c4353ec9 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs2/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs2/app/index.jsx @@ -3,7 +3,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { Chart, AreaSeries, SplineSeries, DateTime, Crosshair, IMouseEventArgs, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; +import { Chart, AreaSeries, SplineSeries, DateTime, Crosshair, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; import { synchronizedData } from './datasource'; import { Browser } from '@syncfusion/ej2-base'; diff --git a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs2/app/index.tsx index 7c8b31acd..4f96849b1 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs2/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs2/app/index.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { Chart, AreaSeries, SplineSeries, DateTime, Crosshair, IMouseEventArgs, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; +import { Chart, AreaSeries, SplineSeries, DateTime, Crosshair, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; import { synchronizedData } from './datasource'; import { Browser } from '@syncfusion/ej2-base'; diff --git a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs3/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs3/app/index.jsx index 1c308548f..efdbefbd0 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs3/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs3/app/index.jsx @@ -2,7 +2,7 @@ import * as ReactDOM from "react-dom"; -import { Chart, SplineAreaSeries, LineSeries, DateTime, Zoom, IZoomCompleteEventArgs, Selection, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; +import { Chart, SplineAreaSeries, LineSeries, DateTime, Zoom, Selection, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; import { synchronizedData } from './datasource'; import * as React from 'react'; import { Browser } from '@syncfusion/ej2-base'; diff --git a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs3/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs3/app/index.tsx index 5e194f744..dd703dd66 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs3/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs3/app/index.tsx @@ -2,7 +2,7 @@ import * as ReactDOM from "react-dom"; -import { Chart, SplineAreaSeries, LineSeries, DateTime, Zoom, IZoomCompleteEventArgs, Selection, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; +import { Chart, SplineAreaSeries, LineSeries, DateTime, Zoom, Selection, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; import { synchronizedData } from './datasource'; import * as React from "react"; import { Browser } from '@syncfusion/ej2-base'; diff --git a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs4/app/index.jsx b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs4/app/index.jsx index 31255876a..3aa9f0cf2 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs4/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs4/app/index.jsx @@ -2,7 +2,7 @@ import * as ReactDOM from "react-dom"; -import { Chart, SplineSeries, LineSeries, DateTime, Zoom, IZoomCompleteEventArgs, Selection, ISelectionCompleteEventArgs, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; +import { Chart, SplineSeries, LineSeries, DateTime, Zoom, Selection, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; import { synchronizedData } from './datasource'; import * as React from 'react'; import { Browser } from '@syncfusion/ej2-base'; diff --git a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs4/app/index.tsx b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs4/app/index.tsx index 73f6cff90..a167e3a5e 100644 --- a/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs4/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/code-path/user-interaction/synchronized-cs4/app/index.tsx @@ -2,7 +2,7 @@ import * as ReactDOM from "react-dom"; -import { Chart, SplineSeries, LineSeries, DateTime, Zoom, IZoomCompleteEventArgs, Selection, ISelectionCompleteEventArgs, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; +import { Chart, SplineSeries, LineSeries, DateTime, Zoom, Selection, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts'; import { synchronizedData } from './datasource'; import * as React from "react"; import { Browser } from '@syncfusion/ej2-base'; diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs2/app/index.tsx index 21180d07e..c8a78f133 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs2/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs2/app/index.tsx @@ -2,8 +2,8 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, +ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts'; import { dateTimeData } from './datasource'; diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs3/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs3/app/index.jsx index 3fd26a120..24f6bb7a7 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs3/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs3/app/index.jsx @@ -1,12 +1,12 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTimeCategory, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTimeCategory, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { dateTimeCategoryData } from './datasource'; function App() { const primaryxAxis = { valueType: 'DateTimeCategory', skeleton: 'Ed' }; const primaryyAxis = { title: 'Sales Amount in millions(USD)' }; return - + diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs3/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs3/app/index.tsx index 079a43ece..213c01e56 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs3/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs3/app/index.tsx @@ -2,8 +2,8 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, DateTimeCategory, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, +Legend, DateTimeCategory, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts'; import { dateTimeCategoryData } from './datasource'; @@ -16,7 +16,7 @@ function App() { primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'> - + diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs5/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs5/app/index.jsx index 78ad64703..92ea78bf1 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs5/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs5/app/index.jsx @@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { dateTimeData } from './datasource'; function App() { - const primaryxAxis = { valueType: 'DateTime', title: 'Sales Across Years', intervalType: 'Years' }; + const primaryxAxis = { valueType: 'DateTime', title: 'Sales Across Years', interval: 2, intervalType: 'Years' }; const primaryyAxis = { title: 'Sales Amount in millions(USD)' }; return diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs5/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs5/app/index.tsx index 33686f368..34653d1b9 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs5/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/datetime-cs5/app/index.tsx @@ -9,7 +9,7 @@ import { dateTimeData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Sales Across Years', intervalType: 'Years' }; + const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Sales Across Years', interval: 2, intervalType: 'Years' }; const primaryyAxis: AxisModel = { title: 'Sales Amount in millions(USD)' }; return diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs2/app/index.tsx index 6881455f5..82187bdcb 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs2/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/double-cs2/app/index.tsx @@ -2,10 +2,14 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Tooltip, DataLabel, TooltipSettingsModel, AxisModel } from'@syncfusion/ej2-react-charts'; -import { loadCldr, setCurrencyCode } from '@syncfusion/ej2-base'; +import { loadCldr, setCurrencyCode } from '@syncfusion/ej2-base'; +// For non en-US cultures, install @syncfusion/ej2-cldr-data and load the CLDR JSON: +// import * as currencyData from '@syncfusion/ej2-cldr-data/main/en/currencies.json'; +// import * as numbersData from '@syncfusion/ej2-cldr-data/main/en/numbers.json'; +// loadCldr(currencyData, numbersData); import { data } from './datasource'; setCurrencyCode('EUR'); @@ -14,7 +18,7 @@ function App() { const primaryxAxis: AxisModel = { edgeLabelPlacement: 'Shift', title: 'Years' }; const primaryyAxis: AxisModel = { labelFormat: 'c', title: 'Sales Amount in Millions' }; const marker = { dataLabel: { visible: true } }; - const tooltip: TooltipSettingsModel = { enable: true, format: '${point.x} : ${point.y}' }; + const tooltip: TooltipSettingsModel = { enable: true, header: '${point.x}', format: '${point.y}' }; return + const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit' }; + return diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs1/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs1/app/index.tsx index 6641dc18c..b69e0ee82 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs1/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs1/app/index.tsx @@ -2,18 +2,18 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, +ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit' }; + const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit' }; return diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs2/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs2/app/index.jsx index 4e2dc40a4..0a87bbd9a 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs2/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs2/app/index.jsx @@ -3,9 +3,9 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000 }; - return + const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000 }; + return diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs2/app/index.tsx index 294fda5a4..3743d7719 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs2/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs2/app/index.tsx @@ -2,18 +2,18 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, +ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000 }; + const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000 }; return diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs3/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs3/app/index.jsx index e4dbf46ee..a1e5a0f17 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs3/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs3/app/index.jsx @@ -3,9 +3,9 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, logBase: 2 }; - return + const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, logBase: 2 }; + return diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs3/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs3/app/index.tsx index 64df2d4b1..37367b1ef 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs3/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs3/app/index.tsx @@ -2,18 +2,18 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, +ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, logBase: 2 }; + const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, logBase: 2 }; return diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs4/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs4/app/index.jsx index c01fc0001..b468f3738 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs4/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs4/app/index.jsx @@ -3,9 +3,9 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, interval: 2 }; - return + const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, interval: 2 }; + return diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs4/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs4/app/index.tsx index e4a3c14d7..396d498a7 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs4/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/axis/log-cs4/app/index.tsx @@ -2,18 +2,18 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, -ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} +import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, +ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts'; import { logData } from './datasource'; function App() { - const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; - const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, interval: 2 }; + const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' }; + const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, interval: 2 }; return diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/datasource.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/datasource.jsx new file mode 100644 index 000000000..2a46adb58 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/datasource.jsx @@ -0,0 +1,8 @@ +export let data = [ + { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, + { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, + { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, + { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, + { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, + { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } +]; \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/datasource.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/datasource.tsx new file mode 100644 index 000000000..48534d374 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/datasource.tsx @@ -0,0 +1,8 @@ +export let data: Object[] = [ + { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, + { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, + { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, + { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, + { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, + { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } +]; \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/index.jsx new file mode 100644 index 000000000..6015f01dc --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/index.jsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts'; +import { data } from './datasource'; +function App() { + const primaryxAxis = { valueType: 'Category' }; + return + + + + + ; +} +; +export default App; +ReactDOM.render(, document.getElementById("charts")); diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/index.tsx new file mode 100644 index 000000000..3990e24b7 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/app/index.tsx @@ -0,0 +1,23 @@ + + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { AxisModel,Category,ChartComponent, ColumnSeries, DataLabel, + Inject, Legend,LineSeries, SeriesCollectionDirective, SeriesDirective, + Tooltip} from '@syncfusion/ej2-react-charts'; +import { data } from './datasource'; +function App() { + const primaryxAxis: AxisModel = { valueType: 'Category' }; + + return + + + + + + +}; +export default App; +ReactDOM.render(, document.getElementById("charts")); + + diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/index.html b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/index.html new file mode 100644 index 000000000..795d3fbc9 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/index.html @@ -0,0 +1,34 @@ + + + + + Syncfusion React Chart-Add DataSource + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/systemjs.config.js b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/systemjs.config.js new file mode 100644 index 000000000..64dacdcfd --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs1/systemjs.config.js @@ -0,0 +1,53 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/34.1.29/"}, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/datasource.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/datasource.jsx new file mode 100644 index 000000000..2a46adb58 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/datasource.jsx @@ -0,0 +1,8 @@ +export let data = [ + { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, + { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, + { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, + { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, + { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, + { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } +]; \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/datasource.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/datasource.tsx new file mode 100644 index 000000000..48534d374 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/datasource.tsx @@ -0,0 +1,8 @@ +export let data: Object[] = [ + { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, + { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, + { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, + { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, + { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, + { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } +]; \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/index.jsx new file mode 100644 index 000000000..f86bf302a --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/index.jsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts'; +import { data } from './datasource'; +function App() { + const primaryxAxis = { valueType: 'Category' }; + return + + + + + ; +} +; +export default App; +ReactDOM.render(, document.getElementById("charts")); diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/index.tsx new file mode 100644 index 000000000..58a8516d7 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/app/index.tsx @@ -0,0 +1,23 @@ + + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { AxisModel,Category,ChartComponent, ColumnSeries, DataLabel, + Inject, Legend,LineSeries, SeriesCollectionDirective, SeriesDirective, + Tooltip} from '@syncfusion/ej2-react-charts'; +import { data } from './datasource'; +function App() { + const primaryxAxis: AxisModel = { valueType: 'Category' }; + + return + + + + + + +}; +export default App; +ReactDOM.render(, document.getElementById("charts")); + + diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/index.html b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/index.html new file mode 100644 index 000000000..795d3fbc9 --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/index.html @@ -0,0 +1,34 @@ + + + + + Syncfusion React Chart-Add DataSource + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/systemjs.config.js b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/systemjs.config.js new file mode 100644 index 000000000..64dacdcfd --- /dev/null +++ b/code-snippet/chart-sdk/react/charts/preview-sample/dimensions/size-cs2/systemjs.config.js @@ -0,0 +1,53 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/34.1.29/"}, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs3/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs3/app/index.jsx index d2e81b9a8..65bf4f0e8 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs3/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs3/app/index.jsx @@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance; + let chartInstance; function clickHandler() { chartInstance.print(); } diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs3/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs3/app/index.tsx index 3fcd031b0..e1cf00c75 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs3/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs3/app/index.tsx @@ -8,7 +8,7 @@ ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, from'@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance: ChartComponent; + let chartInstance: ChartComponent; function clickHandler() { chartInstance.print(); } diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs4/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs4/app/index.jsx index 67b323b80..efc4d0c54 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs4/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs4/app/index.jsx @@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance; + let chartInstance; function clickHandler() { chartInstance.exportModule.export('PNG', 'sample'); } diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs4/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs4/app/index.tsx index b42f8a595..6c2980692 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs4/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs4/app/index.tsx @@ -7,7 +7,7 @@ ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, Lin from'@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance: ChartComponent; + let chartInstance: ChartComponent; function clickHandler() { chartInstance.exportModule.export('PNG', 'sample'); } diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs5/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs5/app/index.jsx index 4e42df5af..d765d4376 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs5/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs5/app/index.jsx @@ -3,8 +3,8 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { data, data1 } from './datasource'; function App() { - const chartInstance; - const chartInstance1; + let chartInstance; + let chartInstance1; function clickHandler() { chartInstance.exportModule.export('PNG', 'sample', null, [chartInstance, chartInstance1]); } diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs5/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs5/app/index.tsx index 425d10e40..c1ddba092 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs5/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs5/app/index.tsx @@ -8,8 +8,8 @@ from'@syncfusion/ej2-react-charts'; import { data, data1 } from './datasource'; function App() { - const chartInstance: ChartComponent; - const chartInstance1:ChartComponent; + let chartInstance: ChartComponent; + let chartInstance1:ChartComponent; function clickHandler() { chartInstance.exportModule.export('PNG', 'sample', null, [chartInstance, chartInstance1]); } const primaryxAxis: AxisModel = { valueType: 'Category' }; diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs6/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs6/app/index.jsx index 9a8a0a8a3..cab6ac86d 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs6/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs6/app/index.jsx @@ -16,7 +16,7 @@ function App() { content: 'Chart Footer', fontSize: 15, }; - chartInstance.exportModule.export('PDF', 'Chart', 1, [chartInstance], null, null, true, header, footer); + chartInstance.exportModule.export('PDF', 'Chart', 'portrait', [chartInstance], null, null, true, header, footer); } const primaryxAxis = { title: 'Manager', diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs6/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs6/app/index.tsx index cb4371eb1..976e9e3a3 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs6/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs6/app/index.tsx @@ -21,7 +21,7 @@ function App() { content: 'Chart Footer', fontSize: 15, }; - chartInstance.exportModule.export('PDF', 'Chart', 1, [chartInstance], null, null, true, header, footer); + chartInstance.exportModule.export('PDF', 'Chart', 'portrait', [chartInstance], null, null, true, header, footer); } const primaryxAxis: AxisModel = { title: 'Manager', diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs7/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs7/app/index.jsx index a73d459b7..00c8f577f 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs7/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs7/app/index.jsx @@ -69,7 +69,7 @@ function App() { - chartInstance2 = chart} title='Project Cost Breakdown' enableSmartLabels='true' legendSettings={legendSettings}> + chartInstance2 = chart} title='Project Cost Breakdown' enableSmartLabels={true} legendSettings={legendSettings}> diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs7/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs7/app/index.tsx index 27eabf48c..6a45becdf 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs7/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs7/app/index.tsx @@ -74,7 +74,7 @@ function App() { - chartInstance2 = chart} title='Project Cost Breakdown' enableSmartLabels='true' legendSettings={legendSettings}> + chartInstance2 = chart} title='Project Cost Breakdown' enableSmartLabels={true} legendSettings={legendSettings}> diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs9/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs9/app/index.jsx index 968806af9..95559a156 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs9/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs9/app/index.jsx @@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance; + let chartInstance; const beforeExportEvent = (args) => { args.excelProperties.rows[0].cells[0].value = 'Changed Title'; args.excelProperties.rows[1].cells[0].value = 'X Title'; @@ -11,7 +11,7 @@ function App() { args.excelProperties.rows[2].cells[1].value = args.excelProperties.rows[2].cells[1].value + 2; }; function clickHandler() { - chartInstance.exportModule.export('PNG', 'sample'); + chartInstance.exportModule.export('XLSX', 'sample'); } const primaryxAxis = { valueType: 'Category' }; return (
diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs9/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs9/app/index.tsx index ff165334d..b783c21df 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/print-cs9/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/print-cs9/app/index.tsx @@ -7,7 +7,7 @@ ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, Lin from'@syncfusion/ej2-react-charts'; import { data } from './datasource'; function App() { - const chartInstance: ChartComponent; + let chartInstance: ChartComponent; const beforeExportEvent = (args: IExportEventArgs): void => { args.excelProperties.rows[0].cells[0].value = 'Changed Title'; args.excelProperties.rows[1].cells[0].value = 'X Title'; diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/series/series-label-customization/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/series/series-label-customization/app/index.jsx index 38baee511..8d683552e 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/series/series-label-customization/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/series/series-label-customization/app/index.jsx @@ -4,28 +4,28 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, - LineSeries, Category, DataLabel, SeriesLabel, Legend + LineSeries, Category, SeriesLabel, Legend } from '@syncfusion/ej2-react-charts'; import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource'; function App() { return - + + labelSettings={{ visible: true, background: '#E8F5E9', border: { width: 2, color: '#2E7D32' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#2E7D32' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#2E7D32' } }}> + labelSettings={{ visible: true, background: '#FFF3E0', border: { width: 2, color: '#FB8C00' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#FB8C00' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#FB8C00' } }}> + labelSettings={{ visible: true, background: '#E3F2FD', border: { width: 2, color: '#1976D2' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#1976D2' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#1976D2' } }}> + labelSettings={{ visible: true, background: '#F3E5F5', border: { width: 2, color: '#8E24AA' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#8E24AA' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#8E24AA' } }}> + labelSettings={{ visible: true, background: '#FBE9E7', border: { width: 2, color: '#D84315' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#D84315' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#D84315' } }}> diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/series/series-label-customization/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/series/series-label-customization/app/index.tsx index 5049f80a2..06340b702 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/series/series-label-customization/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/series/series-label-customization/app/index.tsx @@ -4,28 +4,28 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, - LineSeries, Category, DataLabel, SeriesLabel, Legend + LineSeries, Category, SeriesLabel, Legend } from '@syncfusion/ej2-react-charts'; import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource'; function App(): JSX.Element { return - + + labelSettings={{ visible: true, background: '#E8F5E9', border: { width: 2, color: '#2E7D32' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#2E7D32' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#2E7D32' } }}> + labelSettings={{ visible: true, background: '#FFF3E0', border: { width: 2, color: '#FB8C00' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#FB8C00' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#FB8C00' } }}> + labelSettings={{ visible: true, background: '#E3F2FD', border: { width: 2, color: '#1976D2' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#1976D2' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#1976D2' } }}> + labelSettings={{ visible: true, background: '#F3E5F5', border: { width: 2, color: '#8E24AA' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#8E24AA' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#8E24AA' } }}> + labelSettings={{ visible: true, background: '#FBE9E7', border: { width: 2, color: '#D84315' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#D84315' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#D84315' } }}> diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs1/index.html b/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs1/index.html index 0dccc21d0..ebef845e8 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs1/index.html +++ b/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs1/index.html @@ -2,7 +2,7 @@ - Syncfusion React Chart-Crosshair + Syncfusion React Chart - Data Editing diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/app/index.jsx b/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/app/index.jsx index f9c1fd6c3..688bdbaca 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/app/index.jsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/app/index.jsx @@ -1,61 +1,53 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, LineSeries, DataEditing } from '@syncfusion/ej2-react-charts'; -import { columnData, lineData } from './datasource'; +import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, DataEditing } from '@syncfusion/ej2-react-charts'; +import { columnData } from './datasource'; + function App() { - return ( - - - - - - + return ( + + + + + + ); } export default App; diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/app/index.tsx b/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/app/index.tsx index 5690d07d6..1f4d2fb45 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/app/index.tsx +++ b/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/app/index.tsx @@ -6,9 +6,9 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, - Legend, Category, Tooltip, DataLabel, ColumnSeries, LineSeries, DataEditing + Legend, Category, Tooltip, DataLabel, ColumnSeries, DataEditing } from '@syncfusion/ej2-react-charts'; -import { columnData, lineData } from './datasource'; +import { columnData } from './datasource'; function App() { return ( @@ -32,16 +32,12 @@ function App() { majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} - chartArea={{ - border: { - width: 0, - }, - }} + chartArea={{ border: { width: 0 } }} title="Sales Prediction of Products" tooltip={{ enable: true }} > - diff --git a/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/index.html b/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/index.html index 0dccc21d0..fc3730814 100644 --- a/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/index.html +++ b/code-snippet/chart-sdk/react/charts/preview-sample/user-interaction/data-editing-cs2/index.html @@ -2,7 +2,7 @@ - Syncfusion React Chart-Crosshair + Syncfusion React Chart - Data Editing - Customization