From 4a5c831cdcaab3974a551bbd58762c9e637d8897 Mon Sep 17 00:00:00 2001 From: Yvone-Atieno <95272306+Yvone-Atieno@users.noreply.github.com> Date: Fri, 6 Oct 2023 15:27:14 +0300 Subject: [PATCH] SEO-176507 JS Page with Redirect --- js/Chart/Chart-Types.md | 218 ++++++++++++++++---------------- js/Chart/Exporting.md | 16 +-- js/Chart/Trendlines.md | 30 ++--- js/Chart/User-Interactions.md | 114 ++++++++--------- js/Grid/Style-and-Appearance.md | 4 +- 5 files changed, 191 insertions(+), 191 deletions(-) diff --git a/js/Chart/Chart-Types.md b/js/Chart/Chart-Types.md index c74ddea00..4ea60acae 100644 --- a/js/Chart/Chart-Types.md +++ b/js/Chart/Chart-Types.md @@ -12,7 +12,7 @@ api : /api/js/ejchart ## Line Chart -To render a Line Chart, set the series [`type`](../api/ejchart#members:series-type) as **"line"** in the chart series. To change the line segment color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. By default, series visibility is visible. This property is used to control [`visibility`](../api/ejchart#members:series-visibility) of series. +To render a Line Chart, set the series [`type`](../api/js/ejchart#members:series-type) as **"line"** in the chart series. To change the line segment color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. By default, series visibility is visible. This property is used to control [`visibility`](../api/js/ejchart#members:series-visibility) of series. {% highlight javascript %} @@ -38,7 +38,7 @@ To render a Line Chart, set the series [`type`](../api/ejchart#members:series-ty ### Change the line width -To change the width of the line segment, you can use the [`width`](../api/ejchart#members:series-width) property in the series. +To change the width of the line segment, you can use the [`width`](../api/js/ejchart#members:series-width) property in the series. {% highlight javascript %} @@ -61,7 +61,7 @@ To change the width of the line segment, you can use the [`width`](../api/ejchar ### Dashed lines -To render the line series with dotted lines, you can use the [`dashArray`](../api/ejchart#members:series-dasharray) option of the series. +To render the line series with dotted lines, you can use the [`dashArray`](../api/js/ejchart#members:series-dasharray) option of the series. {% highlight javascript %} @@ -83,7 +83,7 @@ To render the line series with dotted lines, you can use the [`dashArray`](../ap ### Changing the line cap -For customizing the start and end caps of the line segment, you can use the [`lineCap`](../api/ejchart#members:series-linecap) property. +For customizing the start and end caps of the line segment, you can use the [`lineCap`](../api/js/ejchart#members:series-linecap) property. {% highlight javascript %} @@ -106,7 +106,7 @@ For customizing the start and end caps of the line segment, you can use the [`li ### Changing the line join -You can use the [`lineJoin`](../api/ejchart#members:series-linejoin) property to specify how two intersecting line segments should be joined. +You can use the [`lineJoin`](../api/js/ejchart#members:series-linejoin) property to specify how two intersecting line segments should be joined. {% highlight javascript %} @@ -129,7 +129,7 @@ You can use the [`lineJoin`](../api/ejchart#members:series-linejoin) property to ### MultiColor Line -You can change the color of the line segments by using the [`fill`](../api/ejchart#members:series-points-fill) property of the each [`points`](../api/ejchart#members:series-points) in the series. +You can change the color of the line segments by using the [`fill`](../api/js/ejchart#members:series-points-fill) property of the each [`points`](../api/js/ejchart#members:series-points) in the series. {% highlight javascript %} @@ -158,7 +158,7 @@ You can change the color of the line segments by using the [`fill`](../api/ejcha ## Step Line Chart -To render a Step Line Chart, set the series [`type`](../api/ejchart#members:series-type) as **"stepline"** in the chart series. To change the StepLine segment color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a Step Line Chart, set the series [`type`](../api/js/ejchart#members:series-type) as **"stepline"** in the chart series. To change the StepLine segment color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -206,7 +206,7 @@ To change the line width, you can use the **width** property. ### Dashed lines -To render the step line series with dotted lines, you can use the [`dashArray`](../api/ejchart#members:series-dasharray) option of the series. +To render the step line series with dotted lines, you can use the [`dashArray`](../api/js/ejchart#members:series-dasharray) option of the series. {% highlight javascript %} @@ -227,7 +227,7 @@ To render the step line series with dotted lines, you can use the [`dashArray`]( ### Changing the line cap -For customizing the start and end caps of the line segment, you can use the [`lineCap`](../api/ejchart#members:series-linecap) property. +For customizing the start and end caps of the line segment, you can use the [`lineCap`](../api/js/ejchart#members:series-linecap) property. {% highlight javascript %} @@ -250,7 +250,7 @@ For customizing the start and end caps of the line segment, you can use the [`li ### Changing the line join -You can use the [`lineJoin`](../api/ejchart#members:series-linejoin) property to specify how two intersecting line segments should be joined. +You can use the [`lineJoin`](../api/js/ejchart#members:series-linejoin) property to specify how two intersecting line segments should be joined. {% highlight javascript %} @@ -274,7 +274,7 @@ You can use the [`lineJoin`](../api/ejchart#members:series-linejoin) property to ## Area Chart -To render an Area chart, you can specify the series [`type`](../api/ejchart#members:series-type) as **"area"** in the chart series. To change the Area color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render an Area chart, you can specify the series [`type`](../api/js/ejchart#members:series-type) as **"area"** in the chart series. To change the Area color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -303,13 +303,13 @@ To render an Area chart, you can specify the series [`type`](../api/ejchart#memb ## Range Area Chart -To render a Range Area Chart, set the [`type`](../api/ejchart#members:series-type) as **"rangeArea"** in the chart series. To change the RangeArea color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a Range Area Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"rangeArea"** in the chart series. To change the RangeArea color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. -Since the RangeArea series requires two y values for a point, you have to add the [`high`](../api/ejchart#members:series-high) and [`low`](../api/ejchart#members:series-low) value. High and Low value specifies the maximum and minimum range of the points. +Since the RangeArea series requires two y values for a point, you have to add the [`high`](../api/js/ejchart#members:series-high) and [`low`](../api/js/ejchart#members:series-low) value. High and Low value specifies the maximum and minimum range of the points. -* When you are using the [`points`](../api/ejchart#members:series-points) option, specify the high and low values by using the [`high`](../api/ejchart#members:series-points-high) and [`low`](../api/ejchart#members:series-points-low) option of the point. +* When you are using the [`points`](../api/js/ejchart#members:series-points) option, specify the high and low values by using the [`high`](../api/js/ejchart#members:series-points-high) and [`low`](../api/js/ejchart#members:series-points-low) option of the point. -* When you are using the [`dataSource`](../api/ejchart#members:series-datasource) option to assign the data, map the fields from the dataSource that contain high and low values by using the [`series.high`](../api/ejchart#members:series-high) and [`series.low`](../api/ejchart#members:series-low) options. +* When you are using the [`dataSource`](../api/js/ejchart#members:series-datasource) option to assign the data, map the fields from the dataSource that contain high and low values by using the [`series.high`](../api/js/ejchart#members:series-high) and [`series.low`](../api/js/ejchart#members:series-low) options. {% highlight javascript %} @@ -341,7 +341,7 @@ Since the RangeArea series requires two y values for a point, you have to add th ## Step Area Chart -To render a Step Area Chart, set the [`type`](../api/ejchart#members:series-type) as **"stepArea"** in the chart series. To change the StepArea color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a Step Area Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"stepArea"** in the chart series. To change the StepArea color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -369,7 +369,7 @@ To render a Step Area Chart, set the [`type`](../api/ejchart#members:series-type ## Spline Area Chart -To render a Spline Area Chart, set the [`type`](../api/ejchart#members:series-type) as **"splineArea"** in the chart series. To change the SplineArea color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a Spline Area Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"splineArea"** in the chart series. To change the SplineArea color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -398,7 +398,7 @@ To render a Spline Area Chart, set the [`type`](../api/ejchart#members:series-ty ## Stacked Area Chart -To render a Stacked Area Chart, set the [`type`](../api/ejchart#members:series-type) as **"stackingArea"** in the chart series. To change the StackingArea color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a Stacked Area Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"stackingArea"** in the chart series. To change the StackingArea color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -428,7 +428,7 @@ To render a Stacked Area Chart, set the [`type`](../api/ejchart#members:series-t ## 100% Stacked Area Chart -To render a 100% Stacked Area Chart, set the [`type`](../api/ejchart#members:series-type) as **"stackingArea100"** in the chart series. To change the StackingArea100 color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a 100% Stacked Area Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"stackingArea100"** in the chart series. To change the StackingArea100 color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -456,7 +456,7 @@ To render a 100% Stacked Area Chart, set the [`type`](../api/ejchart#members:ser ## Stacked Spline Area Chart -To render a Stacked Spline Area Chart, set the [`type`](../api/ejchart#members:series-type) as **"stackingSplineArea"** in the chart series. +To render a Stacked Spline Area Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"stackingSplineArea"** in the chart series. {% highlight javascript %} @@ -482,7 +482,7 @@ To render a Stacked Spline Area Chart, set the [`type`](../api/ejchart#members:s ## 100% Stacked Spline Area Chart -To render a 100% Stacked Spline Area Chart, set the [`type`](../api/ejchart#members:series-type) as **"stackingSplineArea100"** in the chart series. +To render a 100% Stacked Spline Area Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"stackingSplineArea100"** in the chart series. {% highlight javascript %} @@ -506,7 +506,7 @@ To render a 100% Stacked Spline Area Chart, set the [`type`](../api/ejchart#memb ## Column Chart -To render a Column Chart, set the [`type`](../api/ejchart#members:series-type) as **"column"** in the chart series. To change the color of the column series, you can use the [`fill`](../api/ejchart#members:series-fill) property. +To render a Column Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"column"** in the chart series. To change the color of the column series, you can use the [`fill`](../api/js/ejchart#members:series-fill) property. {% highlight javascript %} @@ -535,7 +535,7 @@ To render a Column Chart, set the [`type`](../api/ejchart#members:series-type) a ### Change a point color -You can change the color of a column by using the [`fill`](../api/ejchart#members:series-points-fill) property of the point. +You can change the color of a column by using the [`fill`](../api/js/ejchart#members:series-points-fill) property of the point. {% highlight javascript %} @@ -561,9 +561,9 @@ You can change the color of a column by using the [`fill`](../api/ejchart#member ### Column width customization -Width of the column type series can be customized by using the [`columnWidth`](../api/ejchart#members:series-columnwidth) property. Default value of [`columnWidth`](../api/ejchart#members:series-columnwidth) is 0.7. Value ranges from 0 to 1. Here 1 corresponds to 100% of available width and 0 corresponds to 0% of available width. +Width of the column type series can be customized by using the [`columnWidth`](../api/js/ejchart#members:series-columnwidth) property. Default value of [`columnWidth`](../api/js/ejchart#members:series-columnwidth) is 0.7. Value ranges from 0 to 1. Here 1 corresponds to 100% of available width and 0 corresponds to 0% of available width. -N> Width of a column also depends upon the [`columnSpacing`](../api/ejchart#members:series-columnspacing) property, because [`columnSpacing`](../api/ejchart#members:series-columnSpacing) will reduce the space available for drawing a column. This is also applicable for StackingColumn, StackingColumn100, Bar, StackingBar, StackingBar100, RangeColumn, HiLo, HiLoOpenClose, Candle and Waterfall charts. +N> Width of a column also depends upon the [`columnSpacing`](../api/js/ejchart#members:series-columnspacing) property, because [`columnSpacing`](../api/js/ejchart#members:series-columnSpacing) will reduce the space available for drawing a column. This is also applicable for StackingColumn, StackingColumn100, Bar, StackingBar, StackingBar100, RangeColumn, HiLo, HiLoOpenClose, Candle and Waterfall charts. {% highlight javascript %} @@ -597,8 +597,8 @@ N> Width of a column also depends upon the [`columnSpacing`](../api/ejchart#memb ### Column with rounded corners -Corners of the column chart can be customized by setting value to the [`cornerRadius`](../api/ejchart#members:series-cornerradius) property. -The 4 corners are customized using the [`topLeft`](../api/ejchart#members:series-cornerradius-topleft),[`topright`](../api/ejchart#members:series-cornerradius-topright),[`bottomleft`](../api/ejchart#members:series-cornerradius-bottomleft),[`bottomright`](../api/ejchart#members:series-cornerradius-bottomright) properties. +Corners of the column chart can be customized by setting value to the [`cornerRadius`](../api/js/ejchart#members:series-cornerradius) property. +The 4 corners are customized using the [`topLeft`](../api/js/ejchart#members:series-cornerradius-topleft),[`topright`](../api/js/ejchart#members:series-cornerradius-topright),[`bottomleft`](../api/js/ejchart#members:series-cornerradius-bottomleft),[`bottomright`](../api/js/ejchart#members:series-cornerradius-bottomright) properties. {% highlight javascript %} @@ -622,7 +622,7 @@ The 4 corners are customized using the [`topLeft`](../api/ejchart#members:series ### Spacing between column series -Spacing between column type series can be customized using the [`columnSpacing`](../api/ejchart#members:series-columnspacing) property. Default value of [`columnSpacing`](../api/ejchart#members:series-columnspacing) is 0. Value ranges from 0 to 1. Here 1 corresponds to 100% available space and 0 corresponds to 0% available space. +Spacing between column type series can be customized using the [`columnSpacing`](../api/js/ejchart#members:series-columnspacing) property. Default value of [`columnSpacing`](../api/js/ejchart#members:series-columnspacing) is 0. Value ranges from 0 to 1. Here 1 corresponds to 100% available space and 0 corresponds to 0% available space. N> Column spacing will also affect the width of the column. For example, setting 20% spacing and 100% width will render columns with 80% of total width. This is also applicable for StackingColumn, StackingColumn100, Bar, StackingBar, StackingBar100, RangeColumn, HiLo, HiLoOpenClose, Candle and Waterfall charts. @@ -659,7 +659,7 @@ N> Column spacing will also affect the width of the column. For example, setting ### Cylindrical Chart -To render a cylindrical chart, set the [`columnFacet`](../api/ejchart#members:series-columnfacet) property as "cylinder" in the chart series along with the series type. +To render a cylindrical chart, set the [`columnFacet`](../api/js/ejchart#members:series-columnfacet) property as "cylinder" in the chart series along with the series type. The following chart types can be rendered as cylinder in both 2D and in 3D view. @@ -685,13 +685,13 @@ The following chart types can be rendered as cylinder in both 2D and in 3D view. ## RangeColumn Chart -To render a Range Column Chart, set the [`type`](../api/ejchart#members:series-type) as **"rangeColumn"** in the chart series. To change the RangeColumn color, use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a Range Column Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"rangeColumn"** in the chart series. To change the RangeColumn color, use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. -Since, the RangeColumn series requires two y values for a point, add the [`high`](../api/ejchart#members:series-high) and [`low`](../api/ejchart#members:series-low) value. High and Low value specifies the maximum and minimum range of the points. +Since, the RangeColumn series requires two y values for a point, add the [`high`](../api/js/ejchart#members:series-high) and [`low`](../api/js/ejchart#members:series-low) value. High and Low value specifies the maximum and minimum range of the points. -* When you are using the [`points`](../api/ejchart#members:series-points) option, specify the high and low values by using the [`high`](../api/ejchart#members:series-points-high) and [`low`](../api/ejchart#members:series-points-low) option of the point. +* When you are using the [`points`](../api/js/ejchart#members:series-points) option, specify the high and low values by using the [`high`](../api/js/ejchart#members:series-points-high) and [`low`](../api/js/ejchart#members:series-points-low) option of the point. -* When you are using the [`dataSource`](../api/ejchart#members:series-datasource) option to assign the data, you have to map the fields from the dataSource that contains high and low values by using the [`series.high`](../api/ejchart#members:series-high) and [`series.low`](../api/ejchart#members:series-low) options. +* When you are using the [`dataSource`](../api/js/ejchart#members:series-datasource) option to assign the data, you have to map the fields from the dataSource that contains high and low values by using the [`series.high`](../api/js/ejchart#members:series-high) and [`series.low`](../api/js/ejchart#members:series-low) options. {% highlight javascript %} @@ -725,7 +725,7 @@ Since, the RangeColumn series requires two y values for a point, add the [`high` ### Change a point color -To change the color of a range column, you can use the [`fill`](../api/ejchart#members:series-points-fill) property of point. +To change the color of a range column, you can use the [`fill`](../api/js/ejchart#members:series-points-fill) property of point. {% highlight javascript %} @@ -751,7 +751,7 @@ To change the color of a range column, you can use the [`fill`](../api/ejchart#m ## Stacked Column Chart -To render a Stacked Column Chart, set the [`type`](../api/ejchart#members:series-type) as **"stackingColumn"** in the chart series. To change the StackingColumn color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a Stacked Column Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"stackingColumn"** in the chart series. To change the StackingColumn color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -781,7 +781,7 @@ To render a Stacked Column Chart, set the [`type`](../api/ejchart#members:series ### Cluster / Group stacked columns -You can use the [`stackingGroup`](../api/ejchart#members:series-stackinggroup) property to group the stacked columns. Columns with same group name are stacked on top of each other. +You can use the [`stackingGroup`](../api/js/ejchart#members:series-stackinggroup) property to group the stacked columns. Columns with same group name are stacked on top of each other. {% highlight javascript %} @@ -812,7 +812,7 @@ You can use the [`stackingGroup`](../api/ejchart#members:series-stackinggroup) p ### Change a point color -To change the color of a stacking column, you can use the [`fill`](../api/ejchart#members:series-points-fill) property of the point. +To change the color of a stacking column, you can use the [`fill`](../api/js/ejchart#members:series-points-fill) property of the point. {% highlight javascript %} @@ -837,7 +837,7 @@ To change the color of a stacking column, you can use the [`fill`](../api/ejchar ## 100% Stacked Column Chart -To render a 100% Stacked Column Chart, set the [`type`](../api/ejchart#members:series-type) as **"stackingColumn100"** in the chart series. To change the StackingColumn100 color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a 100% Stacked Column Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"stackingColumn100"** in the chart series. To change the StackingColumn100 color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -865,7 +865,7 @@ To render a 100% Stacked Column Chart, set the [`type`](../api/ejchart#members:s ### Cluster / Group 100% stacked columns -By using the [`stackingGroup`](../api/ejchart#members:series-stackinggroup) property, you can group the 100% stacking columns. Columns with same group name are stacked on top of each other. +By using the [`stackingGroup`](../api/js/ejchart#members:series-stackinggroup) property, you can group the 100% stacking columns. Columns with same group name are stacked on top of each other. {% highlight javascript %} @@ -896,7 +896,7 @@ By using the [`stackingGroup`](../api/ejchart#members:series-stackinggroup) prop ### Change a point color -To change the color of a 100% stacking column, you can use the [`fill`](../api/ejchart#members:series-points-fill) property of the point. +To change the color of a 100% stacking column, you can use the [`fill`](../api/js/ejchart#members:series-points-fill) property of the point. {% highlight javascript %} @@ -922,7 +922,7 @@ To change the color of a 100% stacking column, you can use the [`fill`](../api/e ## Bar Chart -To render a bar Chart, set the [`type`](../api/ejchart#members:series-type) as **"bar"** in the chart series. To change the bar color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a bar Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"bar"** in the chart series. To change the bar color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -950,7 +950,7 @@ To render a bar Chart, set the [`type`](../api/ejchart#members:series-type) as * ### Change the color of a bar -By using the [`fill`](../api/ejchart#members:series-points-fill) property of the point, you can change the specific point of the series. +By using the [`fill`](../api/js/ejchart#members:series-points-fill) property of the point, you can change the specific point of the series. {% highlight javascript %} @@ -976,7 +976,7 @@ By using the [`fill`](../api/ejchart#members:series-points-fill) property of the ## Stacked Bar Chart -To render a Stacked Bar Chart, set the [`type`](../api/ejchart#members:series-type) as **"stackingBar"** in the chart series. To change the StackingBar color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a Stacked Bar Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"stackingBar"** in the chart series. To change the StackingBar color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -1004,7 +1004,7 @@ To render a Stacked Bar Chart, set the [`type`](../api/ejchart#members:series-ty ### Cluster / Group stacked bars -You can use the [`stackingGroup`](../api/ejchart#members:series-stackinggroup) property to group the stacking bars with the same group name. +You can use the [`stackingGroup`](../api/js/ejchart#members:series-stackinggroup) property to group the stacking bars with the same group name. {% highlight javascript %} @@ -1035,7 +1035,7 @@ You can use the [`stackingGroup`](../api/ejchart#members:series-stackinggroup) p ### Change a point color -You can change the color of a stacking bar by using the [`fill`](../api/ejchart#members:series-points-fill) property of the point. +You can change the color of a stacking bar by using the [`fill`](../api/js/ejchart#members:series-points-fill) property of the point. {% highlight javascript %} @@ -1060,7 +1060,7 @@ You can change the color of a stacking bar by using the [`fill`](../api/ejchart# ## 100% Stacked Bar Chart -To render a 100% Stacked Bar Chart, set the [`type`](../api/ejchart#members:series-type) as **"stackingBar100"** in the chart series. To change the StackingBar100 color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a 100% Stacked Bar Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"stackingBar100"** in the chart series. To change the StackingBar100 color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -1085,7 +1085,7 @@ To render a 100% Stacked Bar Chart, set the [`type`](../api/ejchart#members:seri [Click](https://ej2.syncfusion.com/home/#!/azure/chart/100%stackedbar) here to view our 100% Stacked Bar Chart online demo. -By using the [`stackingGroup`](../api/ejchart#members:series-stackinggroup) property, you can group the 100% stacking bars with the same group name. +By using the [`stackingGroup`](../api/js/ejchart#members:series-stackinggroup) property, you can group the 100% stacking bars with the same group name. {% highlight javascript %} @@ -1116,7 +1116,7 @@ By using the [`stackingGroup`](../api/ejchart#members:series-stackinggroup) prop ### Change a point color -To change the color of a 100% stacking bar, you can use the [`fill`](../api/ejchart#members:series-points-fill) property of the point. +To change the color of a 100% stacking bar, you can use the [`fill`](../api/js/ejchart#members:series-points-fill) property of the point. {% highlight javascript %} @@ -1142,7 +1142,7 @@ To change the color of a 100% stacking bar, you can use the [`fill`](../api/ejch ## Spline Chart -To render a Spline Chart, set the [`type`](../api/ejchart#members:series-type) as **"spline"** in the chart series. To change the Spline segment color, you can use the [`fill`](../api/ejchart#members:series-fill) property of the series. +To render a Spline Chart, set the [`type`](../api/js/ejchart#members:series-type) as **"spline"** in the chart series. To change the Spline segment color, you can use the [`fill`](../api/js/ejchart#members:series-fill) property of the series. {% highlight javascript %} @@ -1171,7 +1171,7 @@ To render a Spline Chart, set the [`type`](../api/ejchart#members:series-type) a ### Spline Types -Spline series supports four types of curves, namely natural, monotonic, cardinal and clamped. To change the spline type, you can use the [`splineType`](../api/ejchart#members:series-splinetype) property in the series. +Spline series supports four types of curves, namely natural, monotonic, cardinal and clamped. To change the spline type, you can use the [`splineType`](../api/js/ejchart#members:series-splinetype) property in the series. {% highlight javascript %} @@ -1192,7 +1192,7 @@ Spline series supports four types of curves, namely natural, monotonic, cardinal ### Change the cardinal spline tension -To change cardinal spline tension, you can use the [`cardinalSplineTension`](../api/ejchart#members:series-cardinalsplinetension) property in the series. The default value of cardinalSplineTension is **0.5**. Its value ranges from 0 to 1. +To change cardinal spline tension, you can use the [`cardinalSplineTension`](../api/js/ejchart#members:series-cardinalsplinetension) property in the series. The default value of cardinalSplineTension is **0.5**. Its value ranges from 0 to 1. {% highlight javascript %} @@ -1216,7 +1216,7 @@ To change cardinal spline tension, you can use the [`cardinalSplineTension`](../ ### Change the spline width -To change the spline segment width, you can use the [`width`](../api/ejchart#members:series-width) property of the series. +To change the spline segment width, you can use the [`width`](../api/js/ejchart#members:series-width) property of the series. {% highlight javascript %} @@ -1241,7 +1241,7 @@ To change the spline segment width, you can use the [`width`](../api/ejchart#mem ### Dashed lines -To render the spline series with dotted lines, you can use the [`dashArray`](../api/ejchart#members:series-dasharray) option of the series. +To render the spline series with dotted lines, you can use the [`dashArray`](../api/js/ejchart#members:series-dasharray) option of the series. {% highlight javascript %} @@ -1266,7 +1266,7 @@ To render the spline series with dotted lines, you can use the [`dashArray`](../ ## Pie Chart -You can create a pie chart by setting the series [`type`](../api/ejchart#members:series-type) as **"pie"** in the chart series. +You can create a pie chart by setting the series [`type`](../api/js/ejchart#members:series-type) as **"pie"** in the chart series. {% highlight javascript %} @@ -1295,7 +1295,7 @@ You can create a pie chart by setting the series [`type`](../api/ejchart#members ### Change the pie size -You can use the [`pieCoefficient`](../api/ejchart#members:series-piecoefficient) property to change the diameter of the Pie chart with respect to the plot area. It ranges from 0 to 1 and the default value is **0.8**. +You can use the [`pieCoefficient`](../api/js/ejchart#members:series-piecoefficient) property to change the diameter of the Pie chart with respect to the plot area. It ranges from 0 to 1 and the default value is **0.8**. {% highlight javascript %} @@ -1320,8 +1320,8 @@ You can use the [`pieCoefficient`](../api/ejchart#members:series-piecoefficient) ### Explode a pie segment -You can explode a pie segment on the chart load by using the [`explodeIndex`](../api/ejchart#members:series-explodeindex) of the series. -The [`explodeOffset`](../api/ejchart#members:series-explodeoffset)property is used to specify the distance of the slice from the center. +You can explode a pie segment on the chart load by using the [`explodeIndex`](../api/js/ejchart#members:series-explodeindex) of the series. +The [`explodeOffset`](../api/js/ejchart#members:series-explodeoffset)property is used to specify the distance of the slice from the center. {% highlight javascript %} @@ -1347,7 +1347,7 @@ The [`explodeOffset`](../api/ejchart#members:series-explodeoffset)property is us ### Explode all the segments -To explode all the segments of the Pie chart, you can enable the [`explodeAll`](../api/ejchart#members:series-explodeall) property. +To explode all the segments of the Pie chart, you can enable the [`explodeAll`](../api/js/ejchart#members:series-explodeall) property. {% highlight javascript %} @@ -1372,7 +1372,7 @@ To explode all the segments of the Pie chart, you can enable the [`explodeAll`]( ### Explode a pie segment on mouse over -To explode a pie segment on a mouse over, you can enable the [`explode`](../api/ejchart#members:series-explode) property of the series. +To explode a pie segment on a mouse over, you can enable the [`explode`](../api/js/ejchart#members:series-explode) property of the series. {% highlight javascript %} @@ -1397,7 +1397,7 @@ To explode a pie segment on a mouse over, you can enable the [`explode`](../api/ ### Sector of Pie -EjChart allows you to render all the data points/segments in the semi-pie, quarter-pie or in any sector by using the [`startAngle`](../api/ejchart#members:series-startangle) and [`endAngle`](../api/ejchart#members:series-endangle) options. +EjChart allows you to render all the data points/segments in the semi-pie, quarter-pie or in any sector by using the [`startAngle`](../api/js/ejchart#members:series-startangle) and [`endAngle`](../api/js/ejchart#members:series-endangle) options. {% highlight javascript %} @@ -1426,7 +1426,7 @@ EjChart allows you to render all the data points/segments in the semi-pie, quart ## Doughnut Chart -To create a Doughnut chart, you can specify the series [`type`](../api/ejchart#members:series-type) as **"doughnut"** in the chart series. +To create a Doughnut chart, you can specify the series [`type`](../api/js/ejchart#members:series-type) as **"doughnut"** in the chart series. {% highlight javascript %} @@ -1454,7 +1454,7 @@ To create a Doughnut chart, you can specify the series [`type`](../api/ejchart#m ### Change Doughnut inner radius -You can change the doughnut chart inner radius by using the [`doughnutCoefficient`](../api/ejchart#members:series-doughnutcoefficient) with respect to the plot area. It ranges from 0 to 1 and the default value is **0.4**. +You can change the doughnut chart inner radius by using the [`doughnutCoefficient`](../api/js/ejchart#members:series-doughnutcoefficient) with respect to the plot area. It ranges from 0 to 1 and the default value is **0.4**. {% highlight javascript %} @@ -1479,7 +1479,7 @@ You can change the doughnut chart inner radius by using the [`doughnutCoefficien ### Change the doughnut size -You can use the [`doughnutSize`](../api/ejchart#members:series-doughnutsize) property to change the diameter of the Doughnut chart with respect to the plot area. It ranges from 0 to 1 and the default value is **0.8**. +You can use the [`doughnutSize`](../api/js/ejchart#members:series-doughnutsize) property to change the diameter of the Doughnut chart with respect to the plot area. It ranges from 0 to 1 and the default value is **0.8**. {% highlight javascript %} @@ -1504,7 +1504,7 @@ You can use the [`doughnutSize`](../api/ejchart#members:series-doughnutsize) pro ### Explode a doughnut segment -To explode a specific doughnut segment, set the index to be exploded by using the [`explodeIndex`](../api/ejchart#members:series-explodeindex) option of the series. +To explode a specific doughnut segment, set the index to be exploded by using the [`explodeIndex`](../api/js/ejchart#members:series-explodeindex) option of the series. {% highlight javascript %} @@ -1529,7 +1529,7 @@ To explode a specific doughnut segment, set the index to be exploded by using th ### Explode all the segments -To explode all the segments, you can enable the [`explodeAll`](../api/ejchart#members:series-explodeall) property of the series. +To explode all the segments, you can enable the [`explodeAll`](../api/js/ejchart#members:series-explodeall) property of the series. {% highlight javascript %} @@ -1554,7 +1554,7 @@ To explode all the segments, you can enable the [`explodeAll`](../api/ejchart#me ### Explode a doughnut segment on mouse over -To explode a doughnut segment on a mouse over, you can enable the [`explode`](../api/ejchart#members:series-explode) property of the series. +To explode a doughnut segment on a mouse over, you can enable the [`explode`](../api/js/ejchart#members:series-explode) property of the series. {% highlight javascript %} @@ -1579,7 +1579,7 @@ To explode a doughnut segment on a mouse over, you can enable the [`explode`](.. ### Sector of Doughnut -EjChart allows you to render all the data points/segments in the semi-doughnut, quarter- doughnut or in any sector by using the [`startAngle`](../api/ejchart#members:series-startangle) and [`endAngle`](../api/ejchart#members:series-endangle) options. +EjChart allows you to render all the data points/segments in the semi-doughnut, quarter- doughnut or in any sector by using the [`startAngle`](../api/js/ejchart#members:series-startangle) and [`endAngle`](../api/js/ejchart#members:series-endangle) options. {% highlight javascript %} @@ -1655,7 +1655,7 @@ In the Multiple Pie chart, the start and end angle property is also supported. ## Pyramid Chart -To create a Pyramid chart, you can specify the series [`type`](../api/ejchart#members:series-type) as **"pyramid"** in the chart series. +To create a Pyramid chart, you can specify the series [`type`](../api/js/ejchart#members:series-type) as **"pyramid"** in the chart series. {% highlight javascript %} @@ -1683,7 +1683,7 @@ To create a Pyramid chart, you can specify the series [`type`](../api/ejchart#me ### Pyramid Mode -[`Pyramid mode`](../api/ejchart#members:series-pyramidmode) has two types, *linear* and *surface* respectively. The default **"pyramidMode"** type is "linear". +[`Pyramid mode`](../api/js/ejchart#members:series-pyramidmode) has two types, *linear* and *surface* respectively. The default **"pyramidMode"** type is "linear". {% highlight javascript %} @@ -1708,7 +1708,7 @@ To create a Pyramid chart, you can specify the series [`type`](../api/ejchart#me ### Gap between the segments -You can control the gap between the segments by using the [`gapRatio`](../api/ejchart#members:series-gapratio) option of the series. Its ranges from 0 to 1. +You can control the gap between the segments by using the [`gapRatio`](../api/js/ejchart#members:series-gapratio) option of the series. Its ranges from 0 to 1. {% highlight javascript %} @@ -1733,7 +1733,7 @@ You can control the gap between the segments by using the [`gapRatio`](../api/ej ### Explode a pyramid segment -You can explode a pyramid segment on the chart load by using the [`explodeIndex`](../api/ejchart#members:series-explodeindex) of the series. +You can explode a pyramid segment on the chart load by using the [`explodeIndex`](../api/js/ejchart#members:series-explodeindex) of the series. {% highlight javascript %} @@ -1758,7 +1758,7 @@ You can explode a pyramid segment on the chart load by using the [`explodeIndex` ## Funnel Chart -You can create a funnel chart by setting the series [`type`](../api/ejchart#members:series-type) as **"funnel"** in the chart series. +You can create a funnel chart by setting the series [`type`](../api/js/ejchart#members:series-type) as **"funnel"** in the chart series. {% highlight javascript %} @@ -1786,7 +1786,7 @@ You can create a funnel chart by setting the series [`type`](../api/ejchart#memb ### Change the funnel width and height -Funnel segments height and width is calculated from the chart size, by default. You can change this height and width directly without changing the chart size by using the [`funnelHeight`](../api/ejchart#members:series-funnelheight) and [`funnelWidth`](../api/ejchart#members:series-funnelwidth) property of the series. +Funnel segments height and width is calculated from the chart size, by default. You can change this height and width directly without changing the chart size by using the [`funnelHeight`](../api/js/ejchart#members:series-funnelheight) and [`funnelWidth`](../api/js/ejchart#members:series-funnelwidth) property of the series. {% highlight javascript %} @@ -1812,7 +1812,7 @@ Funnel segments height and width is calculated from the chart size, by default. ### Explode a funnel segment -You can explode a funnel segment on the chart load by using the [`explodeIndex`](../api/ejchart#members:series-explodeindex) of the series. +You can explode a funnel segment on the chart load by using the [`explodeIndex`](../api/js/ejchart#members:series-explodeindex) of the series. {% highlight javascript %} @@ -1837,7 +1837,7 @@ You can explode a funnel segment on the chart load by using the [`explodeIndex`] ## Bubble Chart -To create a Bubble chart, you can set the series [`type`](../api/ejchart#members:series-type) as **"bubble"** in the chart series. Bubble chart requires 3 fields (*x, y and size*) to plot a point. Here, **size** is used to specify the size of each bubble segment. +To create a Bubble chart, you can set the series [`type`](../api/js/ejchart#members:series-type) as **"bubble"** in the chart series. Bubble chart requires 3 fields (*x, y and size*) to plot a point. Here, **size** is used to specify the size of each bubble segment. {% highlight javascript %} @@ -1874,7 +1874,7 @@ To create a Bubble chart, you can set the series [`type`](../api/ejchart#members ### Bubble options -The [`bubbleOptions`](../api/ejchart#members:series-bubbleoptions) of bubble series can be customized using [`radiusMode`](../api/ejchart#members:series-bubbleoptions-radiusmode), [`minRadius`](../api/ejchart#members:series-bubbleoptions-minradius) and [`maxRadius`](../api/ejchart#members:series-bubbleoptions-maxradius). +The [`bubbleOptions`](../api/js/ejchart#members:series-bubbleoptions) of bubble series can be customized using [`radiusMode`](../api/js/ejchart#members:series-bubbleoptions-radiusmode), [`minRadius`](../api/js/ejchart#members:series-bubbleoptions-minradius) and [`maxRadius`](../api/js/ejchart#members:series-bubbleoptions-maxradius). {% highlight javascript %} @@ -1892,7 +1892,7 @@ The [`bubbleOptions`](../api/ejchart#members:series-bubbleoptions) of bubble ser ## Scatter -To create a Scatter chart, you can set the series [`type`](../api/ejchart#members:series-type) as **"scatter"**’ in the chart series. +To create a Scatter chart, you can set the series [`type`](../api/js/ejchart#members:series-type) as **"scatter"**’ in the chart series. {% highlight javascript %} @@ -1919,7 +1919,7 @@ To create a Scatter chart, you can set the series [`type`](../api/ejchart#member ### Customize the scatter chart -You can change the scatter size [`height`](../api/ejchart#members:series-marker-size-height) and [`width`](../api/ejchart#members:series-marker-size-width) by using the [`size`](../api/ejchart#members:series-marker-size) property of the series marker. And you can change the scatter color by using the series [`fill`](../api/ejchart#members:series-fill) property. +You can change the scatter size [`height`](../api/js/ejchart#members:series-marker-size-height) and [`width`](../api/js/ejchart#members:series-marker-size-width) by using the [`size`](../api/js/ejchart#members:series-marker-size) property of the series marker. And you can change the scatter color by using the series [`fill`](../api/js/ejchart#members:series-fill) property. {% highlight javascript %} @@ -1948,7 +1948,7 @@ You can change the scatter size [`height`](../api/ejchart#members:series-marker- ## HiLoOpenClose Chart  -To create a HiLoOpenClose chart, you can set the series [`type`](../api/ejchart#members:series-type) as **"hiloopenclose"** in the chart series. HiLoOpenClose chart requires 5 fields ([`x`](../api/ejchart#members:series-points-x), [`high`](../api/ejchart#members:series-high), [`low`](../api/ejchart#members:series-low), [`open`](../api/ejchart#members:series-open) and [`close`](../api/ejchart#members:series-close)) to plot a segment. +To create a HiLoOpenClose chart, you can set the series [`type`](../api/js/ejchart#members:series-type) as **"hiloopenclose"** in the chart series. HiLoOpenClose chart requires 5 fields ([`x`](../api/js/ejchart#members:series-points-x), [`high`](../api/js/ejchart#members:series-high), [`low`](../api/js/ejchart#members:series-low), [`open`](../api/js/ejchart#members:series-open) and [`close`](../api/js/ejchart#members:series-close)) to plot a segment. {% highlight javascript %} @@ -1989,7 +1989,7 @@ To create a HiLoOpenClose chart, you can set the series [`type`](../api/ejchart# ### DrawMode -You can change the HiLoOpenClose chart [`drawMode`](../api/ejchart#members:series-drawmode) to [`open`](../api/ejchart#members:series-open), [`close`](../api/ejchart#members:series-close) or *both*. The default value of [`drawMode`](../api/ejchart#members:series-drawmode) is **"both"**. +You can change the HiLoOpenClose chart [`drawMode`](../api/js/ejchart#members:series-drawmode) to [`open`](../api/js/ejchart#members:series-open), [`close`](../api/js/ejchart#members:series-close) or *both*. The default value of [`drawMode`](../api/js/ejchart#members:series-drawmode) is **"both"**. {% highlight javascript %} @@ -2013,7 +2013,7 @@ You can change the HiLoOpenClose chart [`drawMode`](../api/ejchart#members:serie ### Bull and Bear Color -HiLoOpenClose chart [`bullFillColor`](../api/ejchart#members:series-bullfillcolor) is used to specify a fill color for the segments that indicates an increase in stock price in the measured time interval and [`bearFillColor`](../api/ejchart#members:series-bearfillcolor) is used to specify a fill color for the segments that indicates a decrease in the stock price in the measured time interval. +HiLoOpenClose chart [`bullFillColor`](../api/js/ejchart#members:series-bullfillcolor) is used to specify a fill color for the segments that indicates an increase in stock price in the measured time interval and [`bearFillColor`](../api/js/ejchart#members:series-bearfillcolor) is used to specify a fill color for the segments that indicates a decrease in the stock price in the measured time interval. {% highlight javascript %} @@ -2038,7 +2038,7 @@ HiLoOpenClose chart [`bullFillColor`](../api/ejchart#members:series-bullfillcolo ## Candle -You can create a Candle chart by specifying the series [`type`](../api/ejchart#members:series-type) as **"candle"** in the chart series. Candle chart requires 5 fields ([`x`](../api/ejchart#members:series-points-x), [`high`](../api/ejchart#members:series-high), [`low`](../api/ejchart#members:series-low), [`open`](../api/ejchart#members:series-open) and [`close`](../api/ejchart#members:series-close)) to plot a segment. +You can create a Candle chart by specifying the series [`type`](../api/js/ejchart#members:series-type) as **"candle"** in the chart series. Candle chart requires 5 fields ([`x`](../api/js/ejchart#members:series-points-x), [`high`](../api/js/ejchart#members:series-high), [`low`](../api/js/ejchart#members:series-low), [`open`](../api/js/ejchart#members:series-open) and [`close`](../api/js/ejchart#members:series-close)) to plot a segment. {% highlight javascript %} @@ -2078,7 +2078,7 @@ You can create a Candle chart by specifying the series [`type`](../api/ejchart#m ### Bull and Bear Color -Candle chart [`bullFillColor`](../api/ejchart#members:series-bullfillcolor) is used to specify a fill color for the segments that indicates an increase in the stock price in the measured time interval and [`bearFillColor`](../api/ejchart#members:series-bearfillcolor) is used to specify a fill color for the segments that indicates a decrease in the stock price in the measured time interval. +Candle chart [`bullFillColor`](../api/js/ejchart#members:series-bullfillcolor) is used to specify a fill color for the segments that indicates an increase in the stock price in the measured time interval and [`bearFillColor`](../api/js/ejchart#members:series-bearfillcolor) is used to specify a fill color for the segments that indicates a decrease in the stock price in the measured time interval. {% highlight javascript %} @@ -2102,7 +2102,7 @@ Candle chart [`bullFillColor`](../api/ejchart#members:series-bullfillcolor) is u ## HiLo -HiLo chart is created by setting the series [`type`](../api/ejchart#members:series-type) as **"hilo"** in the chart series. HiLo chart requires 3 fields ([`x`](../api/ejchart#members:series-points-x), [`high`](../api/ejchart#members:series-high) and [`low`](../api/ejchart#members:series-low)) to plot a segment. +HiLo chart is created by setting the series [`type`](../api/js/ejchart#members:series-type) as **"hilo"** in the chart series. HiLo chart requires 3 fields ([`x`](../api/js/ejchart#members:series-points-x), [`high`](../api/js/ejchart#members:series-high) and [`low`](../api/js/ejchart#members:series-low)) to plot a segment. {% highlight javascript %} @@ -2140,7 +2140,7 @@ HiLo chart is created by setting the series [`type`](../api/ejchart#members:seri ## Polar -Polar chart is created by setting the series [`type`](../api/ejchart#members:series-type) as **polar** in the chart series. +Polar chart is created by setting the series [`type`](../api/js/ejchart#members:series-type) as **polar** in the chart series. {% highlight javascript %} @@ -2166,7 +2166,7 @@ Polar chart is created by setting the series [`type`](../api/ejchart#members:ser ### DrawType -Polar [`drawType`](../api/ejchart#members:series-drawtype) property is used to change the series plotting type to *line*, *column*, *scatter*, *rangeColumn*, *spline*, *stackingArea* or *area*. The default value of [`drawType`](../api/ejchart#members:series-drawtype) is **"line"**. +Polar [`drawType`](../api/js/ejchart#members:series-drawtype) property is used to change the series plotting type to *line*, *column*, *scatter*, *rangeColumn*, *spline*, *stackingArea* or *area*. The default value of [`drawType`](../api/js/ejchart#members:series-drawtype) is **"line"**. {% highlight javascript %} @@ -2190,7 +2190,7 @@ Polar [`drawType`](../api/ejchart#members:series-drawtype) property is used to c ### Closed Paths in Polar chart -By using the [`isClosed`](../api/ejchart#members:series-isclosed) property, specifies whether to join start and end point of a line/area series used in polar/radar chart to form a closed path. Its default value is **true**. +By using the [`isClosed`](../api/js/ejchart#members:series-isclosed) property, specifies whether to join start and end point of a line/area series used in polar/radar chart to form a closed path. Its default value is **true**. {% highlight javascript %} @@ -2212,7 +2212,7 @@ By using the [`isClosed`](../api/ejchart#members:series-isclosed) property, spec ### Stack columns in Polar chart -By using the [`isStacking`](../api/ejchart#members:series-isstacking) property, you can specify whether the column has to be stacked when the [`drawType`](../api/ejchart#members:series-drawtype) is column. Its default value is **false**. +By using the [`isStacking`](../api/js/ejchart#members:series-isstacking) property, you can specify whether the column has to be stacked when the [`drawType`](../api/js/ejchart#members:series-drawtype) is column. Its default value is **false**. {% highlight javascript %} @@ -2241,7 +2241,7 @@ By using the [`isStacking`](../api/ejchart#members:series-isstacking) property, ## Radar Chart -To create a Radar chart, you can specify the series [`type`](../api/ejchart#members:series-type) as **"radar"** in the chart series. +To create a Radar chart, you can specify the series [`type`](../api/js/ejchart#members:series-type) as **"radar"** in the chart series. {% highlight javascript %} @@ -2269,7 +2269,7 @@ To create a Radar chart, you can specify the series [`type`](../api/ejchart#memb ### DrawType -Radar [`drawType`](../api/ejchart#members:series-drawtype) property is used to change the series plotting type to *line*, *column*, *scatter*, *spline*, *rangeColumn*, *stackingArea* or *area*. The default value of [`drawType`](../api/ejchart#members:series-drawtype) is **"line"**. +Radar [`drawType`](../api/js/ejchart#members:series-drawtype) property is used to change the series plotting type to *line*, *column*, *scatter*, *spline*, *rangeColumn*, *stackingArea* or *area*. The default value of [`drawType`](../api/js/ejchart#members:series-drawtype) is **"line"**. {% highlight javascript %} @@ -2294,7 +2294,7 @@ Radar [`drawType`](../api/ejchart#members:series-drawtype) property is used to c ### Stack columns in Radar chart -By using the [`isStacking`](../api/ejchart#members:series-isstacking) property, you can specify whether the column has to be stacked when the [`drawType`](../api/ejchart#members:series-drawtype) is set as *column*. Its default value is set to **false**. +By using the [`isStacking`](../api/js/ejchart#members:series-isstacking) property, you can specify whether the column has to be stacked when the [`drawType`](../api/js/ejchart#members:series-drawtype) is set as *column*. Its default value is set to **false**. {% highlight javascript %} @@ -2319,7 +2319,7 @@ By using the [`isStacking`](../api/ejchart#members:series-isstacking) property, ## Waterfall Chart -For rendering a Waterfall chart, set series [`type`](../api/ejchart#members:series-type) as **"waterfall"** in the chart series. To change the waterfall series segment color use [`fill`](../api/ejchart#members:series-fill) option of series and use [`positiveFill`](../api/ejchart#members:series-positivefill) property to differentiate the positive segments. +For rendering a Waterfall chart, set series [`type`](../api/js/ejchart#members:series-type) as **"waterfall"** in the chart series. To change the waterfall series segment color use [`fill`](../api/js/ejchart#members:series-fill) option of series and use [`positiveFill`](../api/js/ejchart#members:series-positivefill) property to differentiate the positive segments. N> The inline property of the **series.positiveFill** has the first priority and override the **series.fill**. @@ -2406,7 +2406,7 @@ The sum of all previous point in the waterfall series is displayed on enabling t ### ConnectorLine -To customize the connector line [`color`](../api/ejchart#members:series-connectorline-color), [`width`](../api/ejchart#members:series-connectorline-width), [`opacity`](../api/ejchart#members:series-connectorline-opacity) and [`dashArray`](../api/ejchart#members:series-connectorline-dasharray) of the waterfall series, you can use [`connectorLine`](../api/ejchart#members:series-connectorline) option of series. +To customize the connector line [`color`](../api/js/ejchart#members:series-connectorline-color), [`width`](../api/js/ejchart#members:series-connectorline-width), [`opacity`](../api/js/ejchart#members:series-connectorline-opacity) and [`dashArray`](../api/js/ejchart#members:series-connectorline-dasharray) of the waterfall series, you can use [`connectorLine`](../api/js/ejchart#members:series-connectorline) option of series. {% highlight javascript %} @@ -2433,7 +2433,7 @@ To customize the connector line [`color`](../api/ejchart#members:series-connecto ## Error bar Chart -EjChart can generate Error bar for Cartesian type series *(Line, Column, Bar, Scatter, Area, Candle, HiLo, etc.)*. To render the Error bar for the series, set [`visibility`](../api/ejchart#members:series-errorBar-visibility) as *"visible"* to [`errorBar`](../api/ejchart#members:series-errorBar) in the series. +EjChart can generate Error bar for Cartesian type series *(Line, Column, Bar, Scatter, Area, Candle, HiLo, etc.)*. To render the Error bar for the series, set [`visibility`](../api/js/ejchart#members:series-errorBar-visibility) as *"visible"* to [`errorBar`](../api/js/ejchart#members:series-errorBar) in the series. {% highlight javascript %} @@ -2464,7 +2464,7 @@ EjChart can generate Error bar for Cartesian type series *(Line, Column, Bar, Sc ### Changing Error Bar Type -You can change the error bar rendering type using [`type`](../api/ejchart#members:series-errorBar-type) *(like fixedValue, percentage, standardDeviation, standardError and custom)* option of errorBar. To change the error bar line length you can use [`verticalErrorValue`](../api/ejchart#members:series-errorBar-verticalErrorValue) property. +You can change the error bar rendering type using [`type`](../api/js/ejchart#members:series-errorBar-type) *(like fixedValue, percentage, standardDeviation, standardError and custom)* option of errorBar. To change the error bar line length you can use [`verticalErrorValue`](../api/js/ejchart#members:series-errorBar-verticalErrorValue) property. {% highlight javascript %} @@ -2492,7 +2492,7 @@ You can change the error bar rendering type using [`type`](../api/ejchart#member #### Customizing error bar type -To customize the error bar type, set error bar [`type`](../api/ejchart#members:series-errorBar-type) as **"custom"** and then change the horizontal/vertical positive and negative value of error bar. +To customize the error bar type, set error bar [`type`](../api/js/ejchart#members:series-errorBar-type) as **"custom"** and then change the horizontal/vertical positive and negative value of error bar. {% highlight javascript %} @@ -2524,7 +2524,7 @@ To customize the error bar type, set error bar [`type`](../api/ejchart#members:s ### Changing Error Bar Mode -Error bar mode is used to define whether the error bar line has to be drawn *horizontally, vertically* or in *both* side. To change the error bar mode use [`errorBar.mode`](../api/ejchart#members:series-errorBar-mode) option. +Error bar mode is used to define whether the error bar line has to be drawn *horizontally, vertically* or in *both* side. To change the error bar mode use [`errorBar.mode`](../api/js/ejchart#members:series-errorBar-mode) option. {% highlight javascript %} @@ -2552,7 +2552,7 @@ Error bar mode is used to define whether the error bar line has to be drawn *hor ### Changing Error Bar Direction -You can change the error bar direction to plus, minus or both side using [`errorBar.directions`](../api/ejchart#members:series-errorBar-directions) option. +You can change the error bar direction to plus, minus or both side using [`errorBar.directions`](../api/js/ejchart#members:series-errorBar-directions) option. {% highlight javascript %} @@ -2581,9 +2581,9 @@ You can change the error bar direction to plus, minus or both side using [`error ### Customizing Error bar cap -To customize the error bar cap [`visibility`](../api/ejchart#members:series-errorbar-cap-visible), [`length`](../api/ejchart#members:series-errorbar-cap-length), [`width`](../api/ejchart#members:series-errorbar-cap-width) and [`fill`](../api/ejchart#members:series-errorbar-cap-fill) color, you can use [`cap`](../api/ejchart#members:series-errorbar-cap) option in the series [`errorBar`](../api/ejchart#members:series-errorbar). +To customize the error bar cap [`visibility`](../api/js/ejchart#members:series-errorbar-cap-visible), [`length`](../api/js/ejchart#members:series-errorbar-cap-length), [`width`](../api/js/ejchart#members:series-errorbar-cap-width) and [`fill`](../api/js/ejchart#members:series-errorbar-cap-fill) color, you can use [`cap`](../api/js/ejchart#members:series-errorbar-cap) option in the series [`errorBar`](../api/js/ejchart#members:series-errorbar). -The [`visibility`](../api/ejchart#members:series-errorbar-visibility) property is used to enable errorBar. Other properties like [`type`](../api/ejchart#members:series-errorbar-type), [`mode`](../api/ejchart#members:series-errorbar-mode), [`direction`](../api/ejchart#members:series-errorbar-direction), [`verticalErrorValue`](../api/ejchart#members:series-errorbar-verticalerrorvalue), [`horizontalErrorValue`](../api/ejchart#members:series-errorbar-horizontalerrorvalue), [`verticalPositiveErrorValue`](../api/ejchart#members:series-errorbar-verticalpositiveerrorvalue), [`verticalNegativeErrorValue`](../api/ejchart#members:series-errorbar-verticalnegativeerrorvalue), [`horizontalPositiveErrorValue`](../api/ejchart#members:series-errorbar-horizontalpositiveerrorvalue), [`horizontalNegativeErrorValue`](../api/ejchart#members:series-errorbar-horizontalnegativeerrorvalue), [`fill`](../api/ejchart#members:series-errorbar-fill) and [`width`](../api/ejchart#members:series-errorbar-width) can also be used to customize the series errorBar. +The [`visibility`](../api/js/ejchart#members:series-errorbar-visibility) property is used to enable errorBar. Other properties like [`type`](../api/js/ejchart#members:series-errorbar-type), [`mode`](../api/js/ejchart#members:series-errorbar-mode), [`direction`](../api/js/ejchart#members:series-errorbar-direction), [`verticalErrorValue`](../api/js/ejchart#members:series-errorbar-verticalerrorvalue), [`horizontalErrorValue`](../api/js/ejchart#members:series-errorbar-horizontalerrorvalue), [`verticalPositiveErrorValue`](../api/js/ejchart#members:series-errorbar-verticalpositiveerrorvalue), [`verticalNegativeErrorValue`](../api/js/ejchart#members:series-errorbar-verticalnegativeerrorvalue), [`horizontalPositiveErrorValue`](../api/js/ejchart#members:series-errorbar-horizontalpositiveerrorvalue), [`horizontalNegativeErrorValue`](../api/js/ejchart#members:series-errorbar-horizontalnegativeerrorvalue), [`fill`](../api/js/ejchart#members:series-errorbar-fill) and [`width`](../api/js/ejchart#members:series-errorbar-width) can also be used to customize the series errorBar. {% highlight javascript %} @@ -2613,7 +2613,7 @@ The [`visibility`](../api/ejchart#members:series-errorbar-visibility) property i ## Box and Whisker Chart -To render a Box and Whisker Chart, set the series [`type`](../api/ejchart#members:series-type) as **"boxAndWhisker"**. +To render a Box and Whisker Chart, set the series [`type`](../api/js/ejchart#members:series-type) as **"boxAndWhisker"**. Box and Whisker chart requires 2 fields (x and y) to plot a segment. The field y requires n number of data or it should contains minimum of five values to plot a segment. @@ -2643,7 +2643,7 @@ The field y requires n number of data or it should contains minimum of five val ### BoxPlotMode -You can change the rendering mode of the Box and Whisker series using the [`boxPlotMode`](../api/ejchart#members:series-boxplotmode) property. The default [`boxPlotMode`](../api/ejchart#members:series-boxplotmode) is **"exclusive"**.The other boxPlotModes available are `inclusive`and `normal`. +You can change the rendering mode of the Box and Whisker series using the [`boxPlotMode`](../api/js/ejchart#members:series-boxplotmode) property. The default [`boxPlotMode`](../api/js/ejchart#members:series-boxplotmode) is **"exclusive"**.The other boxPlotModes available are `inclusive`and `normal`. {% highlight javascript %} @@ -2662,7 +2662,7 @@ You can change the rendering mode of the Box and Whisker series using the [`bo ### ShowMedian -Box and Whisker [`showMedian`](../api/ejchart#members:series-showmedian) property is used to show the box and whisker average value. The default value of [`showMedian`](../api/ejchart#members:series-showmedian) is **"false"**. +Box and Whisker [`showMedian`](../api/js/ejchart#members:series-showmedian) property is used to show the box and whisker average value. The default value of [`showMedian`](../api/js/ejchart#members:series-showmedian) is **"false"**. {% highlight javascript %} @@ -2682,7 +2682,7 @@ Box and Whisker [`showMedian`](../api/ejchart#members:series-showmedian) propert ### Customize the Outlier -Outlier symbol, width and height can be customized using [`shape`](../api/ejchart#members:series-outliersettings-shape),[`size`](../api/ejchart#members:series-outliersettings-size) properties of [`outlierSettings`](../api/ejchart#members:series-outliersettings). By default Outlier symbol is displayed as circle with a [`height`](../api/ejchart#members:series-outliersettings-size-height) and [`width`](../api/ejchart#members:series-outliersettings-size-width) of 6 pixels. +Outlier symbol, width and height can be customized using [`shape`](../api/js/ejchart#members:series-outliersettings-shape),[`size`](../api/js/ejchart#members:series-outliersettings-size) properties of [`outlierSettings`](../api/js/ejchart#members:series-outliersettings). By default Outlier symbol is displayed as circle with a [`height`](../api/js/ejchart#members:series-outliersettings-size-height) and [`width`](../api/js/ejchart#members:series-outliersettings-size-width) of 6 pixels. {% highlight javascript %} @@ -2710,7 +2710,7 @@ Outlier symbol, width and height can be customized using [`shape`](../api/ejcha ## Pie Of Pie Chart -To render the pie of pie chart, set the series [`type`](../api/ejchart#members:series-type) as **pieOfPie**. Pie of pie chart is used for displaying the data of a pie slice as another pie chart. The values in the second pie is displayed based on the **splitMode** property. +To render the pie of pie chart, set the series [`type`](../api/js/ejchart#members:series-type) as **pieOfPie**. Pie of pie chart is used for displaying the data of a pie slice as another pie chart. The values in the second pie is displayed based on the **splitMode** property. {% highlight javascript %} @@ -2740,7 +2740,7 @@ series: [{ ### Split Mode and Split Value -The points to be displayed in the second pie is decided based on the [`splitMode`](../api/ejchart#members:series-splitmode) and [`splitValue`](../api/ejchart#members:series-splitvalue) property.**SplitMode** property takes the following values. +The points to be displayed in the second pie is decided based on the [`splitMode`](../api/js/ejchart#members:series-splitmode) and [`splitValue`](../api/js/ejchart#members:series-splitvalue) property.**SplitMode** property takes the following values. * Position – Have to split the data points based on its position * Value – Have to split the data points based on its Y value * Percentage – Have to split the points based on the percentage value @@ -2765,7 +2765,7 @@ series: [{ ### Changing Pie Of Pie Size -The size of the second Pie can be customized by using the [`pieOfPieCoefficient`](../api/ejchart#members:series-pieofpiecoefficient) property. The default value of pieOfPieCoefficient is **0.6**.Its value ranges from 0 to 1. +The size of the second Pie can be customized by using the [`pieOfPieCoefficient`](../api/js/ejchart#members:series-pieofpiecoefficient) property. The default value of pieOfPieCoefficient is **0.6**.Its value ranges from 0 to 1. {% highlight javascript %} @@ -2786,7 +2786,7 @@ The following screenshot represents the pie of pie series with pieOfPieCoefficie #### Customizing the Gap -The distance between the two pies in the pie of pie chart can be controlled by using the [`gapWidth`](../api/ejchart#members:series-gapwidth) property. The default value is **50**. +The distance between the two pies in the pie of pie chart can be controlled by using the [`gapWidth`](../api/js/ejchart#members:series-gapwidth) property. The default value is **50**. {% highlight javascript %} @@ -2805,7 +2805,7 @@ series: [{ ### Render vertical Chart -The [`isTransposed`](../api/ejchart#members:series-isTransposed) property is used for rendering the chart vertically. +The [`isTransposed`](../api/js/ejchart#members:series-isTransposed) property is used for rendering the chart vertically. It is applicable only for Cartesian type series {% highlight javascript %} diff --git a/js/Chart/Exporting.md b/js/Chart/Exporting.md index 764c4b87c..482307a7d 100644 --- a/js/Chart/Exporting.md +++ b/js/Chart/Exporting.md @@ -10,13 +10,13 @@ api : /api/js/ejchart # Exporting in JavaScript Chart -The exporting of the chart is done using the [`exportSettings`](../api/ejchart#members:exportsettings) property. The chart export can be done in both client-side and in server-side.This can be modified by setting values to the property [`mode`](../api/ejchart#members:exportsettings-mode) in exporting. Default value for mode is client. +The exporting of the chart is done using the [`exportSettings`](../api/js/ejchart#members:exportsettings) property. The chart export can be done in both client-side and in server-side.This can be modified by setting values to the property [`mode`](../api/js/ejchart#members:exportsettings-mode) in exporting. Default value for mode is client. ## Client-side Exporting -In client-side rendered chart can be exported as PNG image or as SVG file.The type of export is controlled by using the [`type`](../api/ejchart#members:exportsettings-type)property of the exportSettings. +In client-side rendered chart can be exported as PNG image or as SVG file.The type of export is controlled by using the [`type`](../api/js/ejchart#members:exportsettings-type)property of the exportSettings. -* Export as PNG - The chart can be exported to image when it is rendered in HTML5 Canvas.To render a chart in canvas, set the [`enableCanvasRendering`](../api/ejchart#members:enablecanvasrendering) option to *true*. To export the chart, you can use the [`export`](../api/ejchart#methods:export) method of the chart. Refer to the online [`KB for exporting`](https://www.syncfusion.com/kb/5045) to know more about chart exporting. +* Export as PNG - The chart can be exported to image when it is rendered in HTML5 Canvas.To render a chart in canvas, set the [`enableCanvasRendering`](../api/js/ejchart#members:enablecanvasrendering) option to *true*. To export the chart, you can use the [`export`](../api/js/ejchart#methods:export) method of the chart. Refer to the online [`KB for exporting`](https://www.syncfusion.com/kb/5045) to know more about chart exporting. * Export as SVG - Chart can be exported as SVG if it is rendered as a scalable vector graphics element. By default chart will be rendered as SVG. @@ -62,7 +62,7 @@ Server-side operation can be done by using the server-side frameworks such as We * Create an MVC application and add a controller. * Add Syncfusion.EJ, Syncfusion.EJ.MVC and Syncfusion.EJ.Export as references to the application. * Parse the data from client in MVC controller and export the chart to client. -* Host the MVC application in your server and get the link for exporting action method. The [`action`](../api/ejchart#members:exportsettings-action) property is used for specifying the hosted link. Example: http://js.syncfusion.com/ExportingServices/api/JSChartExport/ExcelExport. +* Host the MVC application in your server and get the link for exporting action method. The [`action`](../api/js/ejchart#members:exportsettings-action) property is used for specifying the hosted link. Example: http://js.syncfusion.com/ExportingServices/api/JSChartExport/ExcelExport. * To pass client data to server-side, you need to call the export method and pass export type (either image or excel) and server-side URL as an argument. The third argument of the export method is a Boolean property that specifies whether only the current chart should be exported or all charts in page should be exported. {% highlight html %} @@ -269,11 +269,11 @@ Export multiple chart to excel at server-side ## Naming the exported file -ejChart provides options to customize the name of the file to be exported. This can be done by setting the name of the file to the property [`fileName`](../api/ejchart#members:exportsettings-filename) in exporting. +ejChart provides options to customize the name of the file to be exported. This can be done by setting the name of the file to the property [`fileName`](../api/js/ejchart#members:exportsettings-filename) in exporting. ## Rotating the chart -We can also rotate the chart and can export it. Possible angles of rotation are 0, 90, -90 and 180 degree. This can be achieved by setting values to the [`angle`](../api/ejchart#members:exportsettings-angle) property in exporting. +We can also rotate the chart and can export it. Possible angles of rotation are 0, 90, -90 and 180 degree. This can be achieved by setting values to the [`angle`](../api/js/ejchart#members:exportsettings-angle) property in exporting. {% highlight javascript %} @@ -289,11 +289,11 @@ We can also rotate the chart and can export it. Possible angles of rotation are ## Setting orientation for the document -This is applicable for PDF, excel and word documents. By setting values to the [`orientation`](../api/ejchart#members:exportsettings-orientation) property in exporting, we can change the orientation of those documents. By default it will export with portrait orientation. +This is applicable for PDF, excel and word documents. By setting values to the [`orientation`](../api/js/ejchart#members:exportsettings-orientation) property in exporting, we can change the orientation of those documents. By default it will export with portrait orientation. ### Multiple Chart Export -Multiple charts can be exported by setting the [`multipleExport`](../api/ejchart#members:exportsettings-multipleexport) property as true. +Multiple charts can be exported by setting the [`multipleExport`](../api/js/ejchart#members:exportsettings-multipleexport) property as true. {% highlight javascript %} diff --git a/js/Chart/Trendlines.md b/js/Chart/Trendlines.md index 9f0cc94f8..ca00bbd5c 100644 --- a/js/Chart/Trendlines.md +++ b/js/Chart/Trendlines.md @@ -10,8 +10,8 @@ api : /api/js/ejchart # Trendlines -EjChart can generate Trendlines for Cartesian type series *(Line, Column, Scatter, Area, Candle, HiLo etc.)* except bar type series. You can add more than one trendline object to the [`trendlines`](../api/ejchart#members:series-trendlines) option. -The visibility of the trendline is controlled by using the [`visibility`](../api/ejchart#members:series-trendlines-visibility) property. +EjChart can generate Trendlines for Cartesian type series *(Line, Column, Scatter, Area, Candle, HiLo etc.)* except bar type series. You can add more than one trendline object to the [`trendlines`](../api/js/ejchart#members:series-trendlines) option. +The visibility of the trendline is controlled by using the [`visibility`](../api/js/ejchart#members:series-trendlines-visibility) property. {% highlight javascript %} @@ -37,7 +37,7 @@ The visibility of the trendline is controlled by using the [`visibility`](../api ## Customize the trendline styles -A trendline can be customized by using the properties such as [`fill`](../api/ejchart#members:series-trendlines-fill), [`width`](../api/ejchart#members:series-trendlines-width), [`dashArray`](../api/ejchart#members:series-trendlines-dasharray) and [`opacity`](../api/ejchart#members:series-trendlines-opacity). The default type of trendline is **"linear"**. +A trendline can be customized by using the properties such as [`fill`](../api/js/ejchart#members:series-trendlines-fill), [`width`](../api/js/ejchart#members:series-trendlines-width), [`dashArray`](../api/js/ejchart#members:series-trendlines-dasharray) and [`opacity`](../api/js/ejchart#members:series-trendlines-opacity). The default type of trendline is **"linear"**. {% highlight javascript %} @@ -73,7 +73,7 @@ EjChart supports the following type of Trendlines. ### Linear -To render Linear Trendline, you have to set the [`type`](../api/ejchart#members:series-trendlines-type) as **"linear"**. +To render Linear Trendline, you have to set the [`type`](../api/js/ejchart#members:series-trendlines-type) as **"linear"**. {% highlight javascript %} @@ -96,7 +96,7 @@ To render Linear Trendline, you have to set the [`type`](../api/ejchart#members: ### Exponential -Exponential Trendline can be rendered by setting the [`type`](../api/ejchart#members:series-trendlines-type) as **"exponential"**. +Exponential Trendline can be rendered by setting the [`type`](../api/js/ejchart#members:series-trendlines-type) as **"exponential"**. {% highlight javascript %} @@ -119,7 +119,7 @@ Exponential Trendline can be rendered by setting the [`type`](../api/ejchart#mem ### Logarithmic -Logarithmic Trendline can be rendered by setting the [`type`](../api/ejchart#members:series-trendlines-type) as **"Logarithmic"**. +Logarithmic Trendline can be rendered by setting the [`type`](../api/js/ejchart#members:series-trendlines-type) as **"Logarithmic"**. {% highlight javascript %} @@ -142,7 +142,7 @@ Logarithmic Trendline can be rendered by setting the [`type`](../api/ejchart#mem ### Power -Power Trendline can be rendered by setting the [`type`](../api/ejchart#members:series-trendlines-type) of the trendline as **"power"**. +Power Trendline can be rendered by setting the [`type`](../api/js/ejchart#members:series-trendlines-type) of the trendline as **"power"**. {% highlight javascript %} @@ -165,7 +165,7 @@ Power Trendline can be rendered by setting the [`type`](../api/ejchart#members:s ### Polynomial -Polynomial Trendline can be rendered by setting the trendline [`type`](../api/ejchart#members:series-trendlines-type) as **"polynomial"**. You can change the polynomial order by using the [`polynomialOrder`](../api/ejchart#members:series-trendlines-polynomialorder) of the trendlines. It ranges from 2 to 6. +Polynomial Trendline can be rendered by setting the trendline [`type`](../api/js/ejchart#members:series-trendlines-type) as **"polynomial"**. You can change the polynomial order by using the [`polynomialOrder`](../api/js/ejchart#members:series-trendlines-polynomialorder) of the trendlines. It ranges from 2 to 6. {% highlight javascript %} @@ -189,14 +189,14 @@ Polynomial Trendline can be rendered by setting the trendline [`type`](../api/ej ### MovingAverage -MovingAverage Trendline can be rendered by setting the [`type`](../api/ejchart#members:series-trendlines-type) of the trendline as **"movingAverage"**. +MovingAverage Trendline can be rendered by setting the [`type`](../api/js/ejchart#members:series-trendlines-type) of the trendline as **"movingAverage"**. {% highlight javascript %} $("#container").ejChart({ series:[{ trendlines: [{ - //Change Trendline type and set [`period`](../api/ejchart#members:series-trendlines-period) for moving average + //Change Trendline type and set [`period`](../api/js/ejchart#members:series-trendlines-period) for moving average type: "movingAverage", period: 3 }], //... @@ -218,7 +218,7 @@ MovingAverage Trendline can be rendered by setting the [`type`](../api/ejchart#m ### Forward Forecasting -The value set for [`forwardForecast`](../api/ejchart#members:series-trendlines-forwardforecast) is used to determine the distance moving towards the future trend. +The value set for [`forwardForecast`](../api/js/ejchart#members:series-trendlines-forwardforecast) is used to determine the distance moving towards the future trend. {% highlight javascript %} @@ -243,7 +243,7 @@ The value set for [`forwardForecast`](../api/ejchart#members:series-trendlines-f ### Backward Forecasting -The value set for the [`backwardForecast`](../api/ejchart#members:series-trendlines-backwardforecast) is used to determine the past trends. +The value set for the [`backwardForecast`](../api/js/ejchart#members:series-trendlines-backwardforecast) is used to determine the past trends. {% highlight javascript %} @@ -267,7 +267,7 @@ The value set for the [`backwardForecast`](../api/ejchart#members:series-trendli ## Trendlines Legend -To display the legend item for trendline, use the [`name`](../api/ejchart#members:series-trendlines-name) property. You can interact with the trendline legends similar to the series legends *(show/hide trendlines on legend click)*. +To display the legend item for trendline, use the [`name`](../api/js/ejchart#members:series-trendlines-name) property. You can interact with the trendline legends similar to the series legends *(show/hide trendlines on legend click)*. {% highlight javascript %} @@ -290,7 +290,7 @@ To display the legend item for trendline, use the [`name`](../api/ejchart#member ## Trendlines Intercept and visibleOnLegend -The trendline intercept value can be provided using [`intercept`](../api/ejchart#members:series-trendlines-intercept) property. The [`visibleOnLegend`](../api/ejchart#members:series-trendlines-visibleonlegend) shows/hides the trendline legend. +The trendline intercept value can be provided using [`intercept`](../api/js/ejchart#members:series-trendlines-intercept) property. The [`visibleOnLegend`](../api/js/ejchart#members:series-trendlines-visibleonlegend) shows/hides the trendline legend. {% highlight javascript %} @@ -307,7 +307,7 @@ The trendline intercept value can be provided using [`intercept`](../api/ejchart ## Trendlines Tooltip -The trendline [`tooltip`](../api/ejchart#members:series-trendlines-tooltip) can be customized using options like [`color`](../api/ejchart#members:series-trendlines-tooltip-border-color) and [`width`](../api/ejchart#members:series-trendlines-tooltip-border-width) of [`border`](../api/ejchart#members:series-trendlines-tooltip-border), [`rx`](../api/ejchart#members:series-trendlines-tooltip-rx), [`ry`](../api/ejchart#members:series-trendlines-tooltip-ry), [`duration`](../api/ejchart#members:series-trendlines-tooltip-duration), [`enableAnimation`](../api/ejchart#members:series-trendlines-tooltip-enableanimation), [`fill`](../api/ejchart#members:series-trendlines-tooltip-fill), [`format`](../api/ejchart#members:series-trendlines-tooltip-format) and [`opacity`](../api/ejchart#members:series-trendlines-tooltip-opacity). +The trendline [`tooltip`](../api/js/ejchart#members:series-trendlines-tooltip) can be customized using options like [`color`](../api/js/ejchart#members:series-trendlines-tooltip-border-color) and [`width`](../api/js/ejchart#members:series-trendlines-tooltip-border-width) of [`border`](../api/js/ejchart#members:series-trendlines-tooltip-border), [`rx`](../api/js/ejchart#members:series-trendlines-tooltip-rx), [`ry`](../api/js/ejchart#members:series-trendlines-tooltip-ry), [`duration`](../api/js/ejchart#members:series-trendlines-tooltip-duration), [`enableAnimation`](../api/js/ejchart#members:series-trendlines-tooltip-enableanimation), [`fill`](../api/js/ejchart#members:series-trendlines-tooltip-fill), [`format`](../api/js/ejchart#members:series-trendlines-tooltip-format) and [`opacity`](../api/js/ejchart#members:series-trendlines-tooltip-opacity). {% highlight javascript %} diff --git a/js/Chart/User-Interactions.md b/js/Chart/User-Interactions.md index 2b4c16135..4a9b32c14 100644 --- a/js/Chart/User-Interactions.md +++ b/js/Chart/User-Interactions.md @@ -14,7 +14,7 @@ api : /api/js/ejchart ### Enable tooltip for data point -Tooltip for the data points can be enabled by using the [`visible`](../api/ejchart#members:series-tooltip-visible) option of the [`tooltip`](../api/ejchart#members:series-tooltip) in the series. +Tooltip for the data points can be enabled by using the [`visible`](../api/js/ejchart#members:series-tooltip-visible) option of the [`tooltip`](../api/js/ejchart#members:series-tooltip) in the series. {% highlight javascript %} @@ -41,7 +41,7 @@ Tooltip for the data points can be enabled by using the [`visible`](../api/ejcha ### Format the tooltip -Tooltip displays data specified by the [`format`](../api/ejchart#members:series-tooltip-format) option of the tooltip. The default value of the format option is * **#point.x# : #point.y#** *. Here, * **#point.x#** * is the placeholder for x value of the point and * **#point.y#** * is the placeholder for y value of the point. +Tooltip displays data specified by the [`format`](../api/js/ejchart#members:series-tooltip-format) option of the tooltip. The default value of the format option is * **#point.x# : #point.y#** *. Here, * **#point.x#** * is the placeholder for x value of the point and * **#point.y#** * is the placeholder for y value of the point. You can also use * **#series.#** * as placeholder to display the value of an option in corresponding series and use * **#point.#** * as place holder to display the value of an option in the corresponding point. @@ -67,7 +67,7 @@ You can also use * **#series.#** * as placeholder to display the val ### Tooltip Template -HTML elements can be displayed in the tooltip by using the [`template`](../api/ejchart#members:series-tooltip-template) option of the tooltip. The template option takes the value of the id attribute of the HTML element. You can use the * **#point.x#** * and * **#point.y#** * as place holders in the HTML element to display the x and y values of the corresponding data point. +HTML elements can be displayed in the tooltip by using the [`template`](../api/js/ejchart#members:series-tooltip-template) option of the tooltip. The template option takes the value of the id attribute of the HTML element. You can use the * **#point.x#** * and * **#point.y#** * as place holders in the HTML element to display the x and y values of the corresponding data point. You can also use * **#series.#** * as place holder to display the value of an option in corresponding series of the tooltip and use * **#point.#** * as place holder to display the value of an option in the corresponding point for which the tooltip is displayed. @@ -111,7 +111,7 @@ You can also use * **#series.#** * as place holder to display the va #### Tooltip template animation -You can enable animation by setting the [`enableAnimation`](../api/ejchart#members:series-tooltip-enableanimation) to true. Tooltip animates when the mouse moves from one data point to another point. The [`duration`](../api/ejchart#members:series-tooltip-duration) property in tooltip specifies the time taken to animate the tooltip. the duration is set to **"500ms"**, by default. +You can enable animation by setting the [`enableAnimation`](../api/js/ejchart#members:series-tooltip-enableanimation) to true. Tooltip animates when the mouse moves from one data point to another point. The [`duration`](../api/js/ejchart#members:series-tooltip-duration) property in tooltip specifies the time taken to animate the tooltip. the duration is set to **"500ms"**, by default. N> Tooltip is animated only if the template is specified for tooltip. @@ -138,7 +138,7 @@ N> Tooltip is animated only if the template is specified for tooltip. ### Customize the appearance of tooltip -The [`fill`](../api/ejchart#members:series-tooltip-fill) and [`border`](../api/ejchart#members:series-tooltip-border) [`color`](../api/ejchart#members:series-tooltip-border-color) and [`width`](../api/ejchart#members:series-tooltip-border-width) options are used to customize the background color and border of the tooltip respectively. The [`font`](../api/ejchart#members:series-tooltip-font) and [`opacity`](../api/ejchart#members:series-tooltip-opacity) option in the tooltip is used to customize the font and opacity of the tooltip text. +The [`fill`](../api/js/ejchart#members:series-tooltip-fill) and [`border`](../api/js/ejchart#members:series-tooltip-border) [`color`](../api/js/ejchart#members:series-tooltip-border-color) and [`width`](../api/js/ejchart#members:series-tooltip-border-width) options are used to customize the background color and border of the tooltip respectively. The [`font`](../api/js/ejchart#members:series-tooltip-font) and [`opacity`](../api/js/ejchart#members:series-tooltip-opacity) option in the tooltip is used to customize the font and opacity of the tooltip text. {% highlight javascript %} @@ -163,7 +163,7 @@ The [`fill`](../api/ejchart#members:series-tooltip-fill) and [`border`](../api/e #### Tooltip with rounded corners -The options [`rx`](../api/ejchart#members:series-tooltip-rx) and [`ry`](../api/ejchart#members:series-tooltip-ry) are used to customize the corner radius of the tooltip rectangle. +The options [`rx`](../api/js/ejchart#members:series-tooltip-rx) and [`ry`](../api/js/ejchart#members:series-tooltip-ry) are used to customize the corner radius of the tooltip rectangle. {% highlight javascript %} @@ -192,15 +192,15 @@ The options [`rx`](../api/ejchart#members:series-tooltip-rx) and [`ry`](../api/e ### Enable Zooming -The Zooming of the chart is done using the [`zooming`](../api/ejchart#members:zooming) property.There are two ways you can zoom the chart, +The Zooming of the chart is done using the [`zooming`](../api/js/ejchart#members:zooming) property.There are two ways you can zoom the chart, -* When the [`zooming.enable`](../api/ejchart#members:zooming-enable) option is set to true, you can zoom the chart by using the rubber band selection. +* When the [`zooming.enable`](../api/js/ejchart#members:zooming-enable) option is set to true, you can zoom the chart by using the rubber band selection. -* When the [`zooming.enableMouseWheel`](../api/ejchart#members:zooming-enablemousewheel) option is set to true, you can zoom the chart on mouse wheel scrolling. +* When the [`zooming.enableMouseWheel`](../api/js/ejchart#members:zooming-enablemousewheel) option is set to true, you can zoom the chart on mouse wheel scrolling. -* When [`zooming.enablePinching`](../api/ejchart#members:zooming-enablePinching) option is set to *true*, you can zoom the chart through pinch gesture. +* When [`zooming.enablePinching`](../api/js/ejchart#members:zooming-enablePinching) option is set to *true*, you can zoom the chart through pinch gesture. -* When [`zooming.enableDeferredZoom`](../api/ejchart#members:zooming-enabledeferredzoom) option is set to *true*,the chart is updated only on mouse up action while zooming and panning +* When [`zooming.enableDeferredZoom`](../api/js/ejchart#members:zooming-enabledeferredzoom) option is set to *true*,the chart is updated only on mouse up action while zooming and panning N> Pinch zooming is supported only in browsers that support multi-touch gestures. Currently IE10, IE11, Chrome and Opera browsers support multi-touch in desktop devices. @@ -230,7 +230,7 @@ After zooming the chart, a zooming toolbar will appear with options to *zoom*, * ### Types of zooming -The [`type`](../api/ejchart#members:zooming-type) option in zooming specifies whether the chart is allowed to scale along the horizontal axis or vertical axis or along both axis. The default value of the [`type`](../api/ejchart#members:zooming-type) is **"xy"** (both axis). +The [`type`](../api/js/ejchart#members:zooming-type) option in zooming specifies whether the chart is allowed to scale along the horizontal axis or vertical axis or along both axis. The default value of the [`type`](../api/js/ejchart#members:zooming-type) is **"xy"** (both axis). {% highlight javascript %} @@ -251,7 +251,7 @@ The [`type`](../api/ejchart#members:zooming-type) option in zooming specifies wh ### Customizing zooming toolbar -You can choose the items displayed in the zooming toolbar by specifying the property [`toolBarItems`](../api/ejchart#members:zooming-toolbaritems). +You can choose the items displayed in the zooming toolbar by specifying the property [`toolBarItems`](../api/js/ejchart#members:zooming-toolbaritems). {% highlight javascript %} @@ -275,7 +275,7 @@ You can choose the items displayed in the zooming toolbar by specifying the prop ### Enable ScrollBar -EjChart provides scrollbar support to view the other portions of chart area which is not shown in the view port when zoomed, by setting true to [`enableScrollbar`](../api/ejchart#members:zooming-enablescrollbar) option in [`zooming`](../api/ejchart#members:zooming). +EjChart provides scrollbar support to view the other portions of chart area which is not shown in the view port when zoomed, by setting true to [`enableScrollbar`](../api/js/ejchart#members:zooming-enablescrollbar) option in [`zooming`](../api/js/ejchart#members:zooming). {% highlight javascript %} @@ -298,7 +298,7 @@ Crosshair is used to view the value of an axis at mouse position or touch contac ### Enable crosshair and crosshair label -Crosshair can be enabled by using the [`visible`](../api/ejchart#members:series-tooltip-visible) option in the [`crosshair`](../api/ejchart#members:crosshair). Crosshair label for an axis can be enabled by using the [`visible`](../api/ejchart#members:primaryxaxis-crosshairlabel-visible) option of [`crosshairLabel`](../api/ejchart#members:primaryxaxis-crosshairlabel) in the corresponding axis. +Crosshair can be enabled by using the [`visible`](../api/js/ejchart#members:series-tooltip-visible) option in the [`crosshair`](../api/js/ejchart#members:crosshair). Crosshair label for an axis can be enabled by using the [`visible`](../api/js/ejchart#members:primaryxaxis-crosshairlabel-visible) option of [`crosshairLabel`](../api/js/ejchart#members:primaryxaxis-crosshairlabel) in the corresponding axis. {% highlight javascript %} @@ -334,7 +334,7 @@ Crosshair can be enabled by using the [`visible`](../api/ejchart#members:series- ### Customize the crosshair line and crosshair label -The [`fill`](../api/ejchart#members:crosshair-fill) and [`border`](../api/ejchart#members:crosshair-border) options of the [`crosshairLabel`](../api/ejchart#members:crosshairlabel) is used to customize the background color and border of the crosshair label respectively. Color and width of the crosshair line can be customized by using the [`line`](../api/ejchart#members:crosshair-line) option in the [`crosshair`](../api/ejchart#members:crosshair). +The [`fill`](../api/js/ejchart#members:crosshair-fill) and [`border`](../api/js/ejchart#members:crosshair-border) options of the [`crosshairLabel`](../api/js/ejchart#members:crosshairlabel) is used to customize the background color and border of the crosshair label respectively. Color and width of the crosshair line can be customized by using the [`line`](../api/js/ejchart#members:crosshair-line) option in the [`crosshair`](../api/js/ejchart#members:crosshair). {% highlight javascript %} @@ -368,15 +368,15 @@ The [`fill`](../api/ejchart#members:crosshair-fill) and [`border`](../api/ejchar ### Crosshair marker -Options for customizing the [`marker`] (../api/ejchart#members:crosshair-marker) in crosshair. +Options for customizing the [`marker`] (../api/js/ejchart#members:crosshair-marker) in crosshair. ### Crosshair marker Border -Options for customizing the [`border`] (../api/ejchart#members:crosshair-marker-border) +Options for customizing the [`border`] (../api/js/ejchart#members:crosshair-marker-border) ### Crosshair marker Border width -Border [`width`] (../api/ejchart#members:crosshair-marker-border-width) of the marker. +Border [`width`] (../api/js/ejchart#members:crosshair-marker-border-width) of the marker. {% highlight javascript %} @@ -392,7 +392,7 @@ Border [`width`] (../api/ejchart#members:crosshair-marker-border-width) of the m ### Crosshair marker Opacity -[`Opacity`] (../api/ejchart#members:crosshair-marker-opacity) of the marker. +[`Opacity`] (../api/js/ejchart#members:crosshair-marker-opacity) of the marker. {% highlight javascript %} @@ -408,11 +408,11 @@ Border [`width`] (../api/ejchart#members:crosshair-marker-border-width) of the m ### Crosshair marker size -Options for customizing the [`size`] (../api/ejchart#members:crosshair-marker-size)of the marker. +Options for customizing the [`size`] (../api/js/ejchart#members:crosshair-marker-size)of the marker. ### Crosshair marker size height -[`Height`] (../api/ejchart#members:crosshair-marker-size-height)of the marker. +[`Height`] (../api/js/ejchart#members:crosshair-marker-size-height)of the marker. {% highlight javascript %} @@ -427,7 +427,7 @@ Options for customizing the [`size`] (../api/ejchart#members:crosshair-marker-si ### Crosshair marker size width -[`Width`] (../api/ejchart#members:crosshair-marker-size-width)of the marker. +[`Width`] (../api/js/ejchart#members:crosshair-marker-size-width)of the marker. {% highlight javascript %} @@ -442,7 +442,7 @@ Options for customizing the [`size`] (../api/ejchart#members:crosshair-marker-si ### Crosshair line -Options for customizing the crosshair [`line`] (../api/ejchart#members:crosshair-line) +Options for customizing the crosshair [`line`] (../api/js/ejchart#members:crosshair-line) ### Crosshair line Color @@ -482,7 +482,7 @@ Trackball is used to track a data point close to the mouse position or touch con ### Enable Trackball -Trackball can be enabled by setting the [`visible`](../api/ejchart#members:crosshair-visible) option of the crosshair to *true* and then set the [`type`](../api/ejchart#members:crosshair-type) as **"trackball"**. The default value of type is **"crosshair"**. +Trackball can be enabled by setting the [`visible`](../api/js/ejchart#members:crosshair-visible) option of the crosshair to *true* and then set the [`type`](../api/js/ejchart#members:crosshair-type) as **"trackball"**. The default value of type is **"crosshair"**. {% highlight javascript %} @@ -508,7 +508,7 @@ Trackball can be enabled by setting the [`visible`](../api/ejchart#members:cross #### Customize trackball marker and trackball line -Visibility,shape, size ,border of the trackball marker can be customized by using the[`visible`](../api/ejchart#members:crosshair-marker-visible) [`shape`](../api/ejchart#members:crosshair-marker-shape) , [`size`](../api/ejchart#members:crosshair-marker-size) and [`border`](../api/ejchart#members:crosshair-marker-border)options of the [`crosshair marker`](../api/ejchart#members:crosshair-marker). Color and width of the trackball line can be customized by using the [`line`](../api/ejchart#members:crosshair-line) option in the crosshair. +Visibility,shape, size ,border of the trackball marker can be customized by using the[`visible`](../api/js/ejchart#members:crosshair-marker-visible) [`shape`](../api/js/ejchart#members:crosshair-marker-shape) , [`size`](../api/js/ejchart#members:crosshair-marker-size) and [`border`](../api/js/ejchart#members:crosshair-marker-border)options of the [`crosshair marker`](../api/js/ejchart#members:crosshair-marker). Color and width of the trackball line can be customized by using the [`line`](../api/js/ejchart#members:crosshair-line) option in the crosshair. {% highlight javascript %} @@ -543,7 +543,7 @@ Visibility,shape, size ,border of the trackball marker can be customized by usin ### Format Trackball tooltip -X and Y values displayed in the trackball tooltip are formatted based on its axis [`labelFormat`](../api/ejchart#members:primaryxaxis-labelformat). +X and Y values displayed in the trackball tooltip are formatted based on its axis [`labelFormat`](../api/js/ejchart#members:primaryxaxis-labelformat). {% highlight javascript %} @@ -575,23 +575,23 @@ X and Y values displayed in the trackball tooltip are formatted based on its axi ### Customizing the Trackball Tooltip -The [`trackballTooltipSettings`](../api/ejchart#members:crosshair-trackballtooltipsettings) property is used for displaying the trackball tooltip. +The [`trackballTooltipSettings`](../api/js/ejchart#members:crosshair-trackballtooltipsettings) property is used for displaying the trackball tooltip. #### Mode -You can able to show the trackball tooltip in two modes, using [`mode`](../api/ejchart#members:crosshair-trackballtooltipsettings-mode) property. +You can able to show the trackball tooltip in two modes, using [`mode`](../api/js/ejchart#members:crosshair-trackballtooltipsettings-mode) property. 1. Grouping. 2. Float. #### Border -The border of the trackball tooltip can be customized by using the [`border`](../api/ejchart#members:crosshair-trackballtooltipsettings-border) property. -The width and color of the border can be customized using the [`width`](../api/ejchart#members:crosshair-trackballtooltipsettings-border-width) and [`color`](../api/ejchart#members:crosshair-trackballtooltipsettings-border-color) properties +The border of the trackball tooltip can be customized by using the [`border`](../api/js/ejchart#members:crosshair-trackballtooltipsettings-border) property. +The width and color of the border can be customized using the [`width`](../api/js/ejchart#members:crosshair-trackballtooltipsettings-border-width) and [`color`](../api/js/ejchart#members:crosshair-trackballtooltipsettings-border-color) properties #### Fill,Rx,Ry,Opacity -The color ,opacity and corners of the trackball tooltip are customized by using the [`fill`](../api/ejchart#members:crosshair-trackballtooltipsettings-fill) ,[`opacity`](../api/ejchart#members:crosshair-trackballtooltipsettings-opacity),[`rx`](../api/ejchart#members:crosshair-trackballtooltipsettings-rx) and [`ry`](../api/ejchart#members:crosshair-trackballtooltipsettings-ry) properties. +The color ,opacity and corners of the trackball tooltip are customized by using the [`fill`](../api/js/ejchart#members:crosshair-trackballtooltipsettings-fill) ,[`opacity`](../api/js/ejchart#members:crosshair-trackballtooltipsettings-opacity),[`rx`](../api/js/ejchart#members:crosshair-trackballtooltipsettings-rx) and [`ry`](../api/js/ejchart#members:crosshair-trackballtooltipsettings-ry) properties. {% highlight javascript %} @@ -652,7 +652,7 @@ Trackball tooltip template is used to display the tooltip in the customized temp ## Highlight -EjChart provides highlighting support for the series and data points on mouse hover. To enable the highlighting option, set the [`enable`](../api/ejchart#members:series-highlightsettings-enable) property to *true* in the [`highlightsettings`](../api/ejchart#members:series-highlightsettings) of the series. +EjChart provides highlighting support for the series and data points on mouse hover. To enable the highlighting option, set the [`enable`](../api/js/ejchart#members:series-highlightsettings-enable) property to *true* in the [`highlightsettings`](../api/js/ejchart#members:series-highlightsettings) of the series. N> When hovering mouse on the data points, the corresponding series legend also will be highlighted. @@ -683,7 +683,7 @@ N> When hovering mouse on the data points, the corresponding series legend also ### Highlight Mode -You can set three different highlight mode for the highlighting data point and series by using the [`mode`](../api/ejchart#members:series-highlightsettings-mode) property of the [`highlightsettings`](../api/ejchart#members:series-highlightsettings). +You can set three different highlight mode for the highlighting data point and series by using the [`mode`](../api/js/ejchart#members:series-highlightsettings-mode) property of the [`highlightsettings`](../api/js/ejchart#members:series-highlightsettings). * Series * Points @@ -691,7 +691,7 @@ You can set three different highlight mode for the highlighting data point and s **Series mode** -To highlight all the data points of the specified series, you can set the **"series"** value to the [`mode`](../api/ejchart#members:series-highlightsettings-mode) option in the highlightSettings. +To highlight all the data points of the specified series, you can set the **"series"** value to the [`mode`](../api/js/ejchart#members:series-highlightsettings-mode) option in the highlightSettings. {% highlight javascript %} @@ -723,7 +723,7 @@ To highlight all the data points of the specified series, you can set the **"ser **Point mode** -To highlight a single point, you can set the **"point"** value to the [`mode`](../api/ejchart#members:series-highlightsettings-mode) option. +To highlight a single point, you can set the **"point"** value to the [`mode`](../api/js/ejchart#members:series-highlightsettings-mode) option. {% highlight javascript %} @@ -754,7 +754,7 @@ To highlight a single point, you can set the **"point"** value to the [`mode`](. **Cluster mode** -To highlight the points that corresponds to the same index in all the series, set the **"cluster"** value to the [`mode`](../api/ejchart#members:series-highlightsettings-mode) option. +To highlight the points that corresponds to the same index in all the series, set the **"cluster"** value to the [`mode`](../api/js/ejchart#members:series-highlightsettings-mode) option. {% highlight javascript %} @@ -784,7 +784,7 @@ To highlight the points that corresponds to the same index in all the series, se ### Customize the highlight styles -To customize the highlighted series, use the [`color`](../api/ejchart#members:series-highlightsettings-color), [`border`](../api/ejchart#members:series-highlightsettings-border) [`color`](../api/ejchart#members:series-highlightsettings-border-color), [`width`](../api/ejchart#members:series-highlightsettings-border-width) and [`opacity`](../api/ejchart#members:series-highlightsettings-opacity) options in the highlightSettings. +To customize the highlighted series, use the [`color`](../api/js/ejchart#members:series-highlightsettings-color), [`border`](../api/js/ejchart#members:series-highlightsettings-border) [`color`](../api/js/ejchart#members:series-highlightsettings-border-color), [`width`](../api/js/ejchart#members:series-highlightsettings-border-width) and [`opacity`](../api/js/ejchart#members:series-highlightsettings-opacity) options in the highlightSettings. {% highlight javascript %} @@ -815,7 +815,7 @@ To customize the highlighted series, use the [`color`](../api/ejchart#members:se ### Patterns to highlight -EjChart provides pattern support for highlighting the data by setting the value to the [`pattern`](../api/ejchart#members:series-highlightsettings-pattern) property of the highlightSettings. The different types of highlight patterns are as follows. +EjChart provides pattern support for highlighting the data by setting the value to the [`pattern`](../api/js/ejchart#members:series-highlightsettings-pattern) property of the highlightSettings. The different types of highlight patterns are as follows. 1. chessboard 2. crosshatch @@ -865,7 +865,7 @@ EjChart provides pattern support for highlighting the data by setting the value #### Custom pattern -To create a custom pattern for the highlighting data points, set the pattern type as **"custom"** and add the custom pattern **id** in the [`customPattern`](../api/ejchart#members:series-highlightsettings-custompattern) option of the highlightSettings. +To create a custom pattern for the highlighting data points, set the pattern type as **"custom"** and add the custom pattern **id** in the [`customPattern`](../api/js/ejchart#members:series-highlightsettings-custompattern) option of the highlightSettings. {% highlight html %} @@ -901,7 +901,7 @@ To create a custom pattern for the highlighting data points, set the pattern typ ## Selection -EjChart provides selection support for the series and data points on mouse click. To enable the selection option, set the [`enable`](../api/ejchart#members:series-selectionsettings-enable) property to *true* in the [`selectionSettings`](../api/ejchart#members:series-selectionsettings) of the series. +EjChart provides selection support for the series and data points on mouse click. To enable the selection option, set the [`enable`](../api/js/ejchart#members:series-selectionsettings-enable) property to *true* in the [`selectionSettings`](../api/js/ejchart#members:series-selectionsettings) of the series. N> When mouse is clicked on the data points, the corresponding series legend also will be selected. @@ -931,7 +931,7 @@ N> When mouse is clicked on the data points, the corresponding series legend als ### Selection Mode -You can set four different selection mode for highlighting the data point and series by using the [`mode`](../api/ejchart#members:series-selectionsettings-mode) property of the selectionSettings. +You can set four different selection mode for highlighting the data point and series by using the [`mode`](../api/js/ejchart#members:series-selectionsettings-mode) property of the selectionSettings. * Series * Points @@ -940,7 +940,7 @@ You can set four different selection mode for highlighting the data point and se **Series mode** -To select all the data points of the specified series, you can set the **"series"** value to the [`mode`](../api/ejchart#members:series-selectionsettings-mode) option in the selectionSettings. +To select all the data points of the specified series, you can set the **"series"** value to the [`mode`](../api/js/ejchart#members:series-selectionsettings-mode) option in the selectionSettings. {% highlight javascript %} @@ -970,7 +970,7 @@ To select all the data points of the specified series, you can set the **"series **Point mode** -To highlight a single point, you can set the **"point"** value to the [`mode`](../api/ejchart#members:series-selectionsettings-mode) option. +To highlight a single point, you can set the **"point"** value to the [`mode`](../api/js/ejchart#members:series-selectionsettings-mode) option. {% highlight javascript %} @@ -1001,7 +1001,7 @@ To highlight a single point, you can set the **"point"** value to the [`mode`](. **Cluster mode** -To select the points that corresponds to the same index in all the series, set the **"cluster"** value to the [`mode`](../api/ejchart#members:series-selectionsettings-mode) option. +To select the points that corresponds to the same index in all the series, set the **"cluster"** value to the [`mode`](../api/js/ejchart#members:series-selectionsettings-mode) option. {% highlight javascript %} @@ -1033,7 +1033,7 @@ To select the points that corresponds to the same index in all the series, set t **Range mode** -To fetch the selected area data points value, you can set the selectionSettings [`mode`](../api/ejchart#members:series-selectionsettings-mode) as **range** in the chart series. The selection rectangle can be drawn as horizontally, vertically or in both direction by using [`rangeType`](../api/ejchart#members:series-selectionsettings-rangetype) property and the selected data’s are returned as an array collection in the [`rangeSelected`](../api/ejchart#events:rangeselected) event. +To fetch the selected area data points value, you can set the selectionSettings [`mode`](../api/js/ejchart#members:series-selectionsettings-mode) as **range** in the chart series. The selection rectangle can be drawn as horizontally, vertically or in both direction by using [`rangeType`](../api/js/ejchart#members:series-selectionsettings-rangetype) property and the selected data’s are returned as an array collection in the [`rangeSelected`](../api/js/ejchart#events:rangeselected) event. {% highlight javascript %} @@ -1077,14 +1077,14 @@ To fetch the selected area data points value, you can set the selectionSettings ### Selection Type -You can set two different selection type for selecting the data point and series on mouse click by using the [`type`](../api/ejchart#members:series-selectionsettings-type) property of the selectionSettings. +You can set two different selection type for selecting the data point and series on mouse click by using the [`type`](../api/js/ejchart#members:series-selectionsettings-type) property of the selectionSettings. * Single * Multiple **Single Type** -To select a data point or a series on mouse click based on the [`selectionSettings.mode`](../api/ejchart#members:series-selectionsettings-mode), set [`selectionSettings.type`](../api/ejchart#members:series-selectionsettings-type) as **"single"** in the series. +To select a data point or a series on mouse click based on the [`selectionSettings.mode`](../api/js/ejchart#members:series-selectionsettings-mode), set [`selectionSettings.type`](../api/js/ejchart#members:series-selectionsettings-type) as **"single"** in the series. {% highlight javascript %} @@ -1113,7 +1113,7 @@ To select a data point or a series on mouse click based on the [`selectionSettin **Multiple Type** -For selecting multiple data points or series on mouse click, set [`selectionSettings.type`](../api/ejchart#members:series-selectionsettings-type) as **"multiple"** in the series. +For selecting multiple data points or series on mouse click, set [`selectionSettings.type`](../api/js/ejchart#members:series-selectionsettings-type) as **"multiple"** in the series. {% highlight javascript %} @@ -1143,8 +1143,8 @@ For selecting multiple data points or series on mouse click, set [`selectionSett ### Customizing selection styles -To customize the selection styles, use the [`color`](../api/ejchart#members:series-selectionsettings-color), [`border`](../api/ejchart#members:series-selectionsettings-border) and [`opacity`](../api/ejchart#members:series-selectionsettings-opacity) options in the selectionSettings. -The border color and width can be customized using [`color`](../api/ejchart#members:series-selectionsettings-border-color) and [`width`](../api/ejchart#members:series-selectionsettings-border-width) property. +To customize the selection styles, use the [`color`](../api/js/ejchart#members:series-selectionsettings-color), [`border`](../api/js/ejchart#members:series-selectionsettings-border) and [`opacity`](../api/js/ejchart#members:series-selectionsettings-opacity) options in the selectionSettings. +The border color and width can be customized using [`color`](../api/js/ejchart#members:series-selectionsettings-border-color) and [`width`](../api/js/ejchart#members:series-selectionsettings-border-width) property. {% highlight javascript %} @@ -1176,7 +1176,7 @@ The border color and width can be customized using [`color`](../api/ejchart#memb ### Patterns for selection -EjChart provides pattern support for the data selection by setting the value to the [`pattern`](../api/ejchart#members:series-selectionsettings-pattern) property of the selectionSettings. The different types of selection patterns are as follows. +EjChart provides pattern support for the data selection by setting the value to the [`pattern`](../api/js/ejchart#members:series-selectionsettings-pattern) property of the selectionSettings. The different types of selection patterns are as follows. 1. chessboard 2. crosshatch @@ -1227,7 +1227,7 @@ EjChart provides pattern support for the data selection by setting the value to #### Custom pattern -To create a custom pattern for selecting the data points, set the [`pattern`](../api/ejchart#members:series-selectionsettings-pattern) type as **"custom"** and add the custom pattern **id** in the [`customPattern`](../api/ejchart#members:series-selectionsettings-custompattern) option of the selectionSettings. +To create a custom pattern for selecting the data points, set the [`pattern`](../api/js/ejchart#members:series-selectionsettings-pattern) type as **"custom"** and add the custom pattern **id** in the [`customPattern`](../api/js/ejchart#members:series-selectionsettings-custompattern) option of the selectionSettings. {% highlight html %} @@ -1266,7 +1266,7 @@ To create a custom pattern for selecting the data points, set the [`pattern`](.. ### Handling Series Selection -To get the series information when selecting the specific series, subscribe to the [`seriesRegionClick`](../api/ejchart.html#events:seriesregionclick) event and set the **selectionSettings.mode** as **"series"**. +To get the series information when selecting the specific series, subscribe to the [`seriesRegionClick`](../api/js/ejchart.html#events:seriesregionclick) event and set the **selectionSettings.mode** as **"series"**. {% highlight javascript %} @@ -1297,7 +1297,7 @@ To get the series information when selecting the specific series, subscribe to t ### Selection on Load -We can able to select the point/series programmatically on chart load, by setting series and point index in the [`selectedDataPointIndexes`](../api/ejchart#members:selecteddatapointindexes) property. +We can able to select the point/series programmatically on chart load, by setting series and point index in the [`selectedDataPointIndexes`](../api/js/ejchart#members:selecteddatapointindexes) property. {% highlight javascript %} @@ -1324,7 +1324,7 @@ We can able to select the point/series programmatically on chart load, by settin ## Data Editing -EjChart provides support to change the location of the rendered points. This can be done by dragging the point and dropping it on another location in chart. To enable the data editing, set the [`enable`] (../api/ejchart#members:series-dragsettings-enable) property to true in the [`drag settings`](../api/ejchart#members:series-dragsettings) of the series. +EjChart provides support to change the location of the rendered points. This can be done by dragging the point and dropping it on another location in chart. To enable the data editing, set the [`enable`] (../api/js/ejchart#members:series-dragsettings-enable) property to true in the [`drag settings`](../api/js/ejchart#members:series-dragsettings) of the series. {% highlight javascript %} @@ -1346,7 +1346,7 @@ $("#container").ejChart( ### Customize Dragging direction -To drag the point along x and y axes, you can specify [`type`] (../api/ejchart#members:series-dragsettings-type) as xy in drag settings. And to drag along x axis alone, specify the type as x and to drag along y axis, specify type as y. +To drag the point along x and y axes, you can specify [`type`] (../api/js/ejchart#members:series-dragsettings-type) as xy in drag settings. And to drag along x axis alone, specify the type as x and to drag along y axis, specify type as y. {% highlight javascript %} diff --git a/js/Grid/Style-and-Appearance.md b/js/Grid/Style-and-Appearance.md index 24aa6e2a2..79c575002 100644 --- a/js/Grid/Style-and-Appearance.md +++ b/js/Grid/Style-and-Appearance.md @@ -11,7 +11,7 @@ api: /api/js/ejgrid ## List of classes and its purposes -To modify the Grid appearance, you need to override the default CSS of grid. Please find the list of CSS classes and its corresponding section in grid. Also, you have an option to create your own custom theme for all the JavaScript controls using our [Theme Studio](http://js.syncfusion.com/themestudio/# "Theme Studio"). +To modify the Grid appearance, you need to override the default CSS of grid. Please find the list of CSS classes and its corresponding section in grid. Also, you have an option to create your own custom theme for all the JavaScript controls using our [Theme Studio](https://js.syncfusion.com/themestudio/#flat-azure "Theme Studio"). @@ -228,5 +228,5 @@ To modify the Grid appearance, you need to override the default CSS of grid. Ple To customize toolbar, you need to use the toolbar default CSS class to override icon in toolbar. -{% seealso %} The [customize toolbar ](http://www.syncfusion.com/kb/5076/how-to-change-custom-icons-for-default-edit-toolbar-items "customize toolbar") {% endseealso %} +{% seealso %} The [customize toolbar ](https://support.syncfusion.com/kb/article/4868/how-to-change-custom-icons-for-default-edit-toolbar-items "customize toolbar") {% endseealso %}