Skip to content

SEO-2393 - ReactJS image alt text changes #143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: hotfix/hotfix-v20.2.0.36
Choose a base branch
from
Open

SEO-2393 - ReactJS image alt text changes #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions ReactJS/Chart/3D-Chart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: 3D Chart types available in Essential JavaScript Chart
description: Learn about the different types of 3D charts supported by Syncfusion Essential JavaScript Chart and how to customize the 3D view.
platform: js
title: 3D in ReactJS Chart Control | Syncfusion
description: Learn here all about 3D support in Syncfusion Essential ReactJS Chart control, its elements, and more.
platform: ReactJS
control: Chart
documentation: ug
api : /api/js/ejchart
---

# 3D Chart
# 3D Chart in ReactJS 3D Chart

Essential 3D Chart for JavaScript allows you to view 8 chart types in 3D view such as [`Bar`](chart-types#bar-chart), [`StackingBar`](chart-types#stacked-bar-chart), [`StackingBar100`](chart-types#stacked-bar-chart-1), [`Column`](chart-types#column-chart), [`Stacked Column`](chart-types#stacked-column-chart), [`100% Stacked Column`](chart-types#stacked-column-chart-1), [`Pie`](chart-types#pie-chart), [`Doughnut`](chart-types#doughnut-chart).

Expand Down Expand Up @@ -44,7 +44,7 @@ For rendering a 3D Column Chart, specify the series [`type`](../api/ejchart#memb
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img1.png)
![ReactJS Chart 3D Column](/js/Chart/3D-Chart_images/3D-Chart_img1.png)


[Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/column) here to view the 3D Column Chart online demo sample.
Expand Down Expand Up @@ -80,7 +80,7 @@ You can create a 3D Bar Chart by setting the series [`type`](../api/ejchart#memb
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img2.png)
![ReactJS Chart 3D Bar](/js/Chart/3D-Chart_images/3D-Chart_img2.png)


[Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/bar) here to view the 3D Bar Chart online demo sample.
Expand Down Expand Up @@ -121,7 +121,7 @@ Stacking Column 3DChart is rendered by specifying the series [`type`](../api/ejc
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img3.png)
![ReactJS Chart 3D Stacked Column](/js/Chart/3D-Chart_images/3D-Chart_img3.png)

[Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/stackedcolumn) here to view the Stacked Column 3DChart online demo sample.

Expand Down Expand Up @@ -161,7 +161,7 @@ Stacking Column 3DChart is rendered by specifying the series [`type`](../api/ejc
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img4.png)
![ReactJS Chart 3D 100% Stacked Column](/js/Chart/3D-Chart_images/3D-Chart_img4.png)


[Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/100%stackedcolumn) here to view the 100% Stacked Column 3DChart online demo sample.
Expand Down Expand Up @@ -202,7 +202,7 @@ To create Stacking Bar 3DChart, set the series [`type`](../api/ejchart#members:s
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img5.png)
![ReactJS Chart 3D Stacked Bar](/js/Chart/3D-Chart_images/3D-Chart_img5.png)

[Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/stackedbar) here to view the Stacked Bar 3DChart online demo sample.

Expand Down Expand Up @@ -242,7 +242,7 @@ You can create 100% Stacking Bar 3DChart by setting the series [`type`](../api/e
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img6.png)
![ReactJS Chart 3D 100% Stacked Bar](/js/Chart/3D-Chart_images/3D-Chart_img6.png)

[Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/100%stackedbar) here to view the 100% Stacking Bar 3DChart online demo sample.

Expand Down Expand Up @@ -278,7 +278,7 @@ To render the Pie Chart in 3D view, enable the **enbel3D** option in the chart a
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img7.png)
![ReactJS Chart 3D Pie](/js/Chart/3D-Chart_images/3D-Chart_img7.png)

[Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/pie) here to view the Pie 3DChart online demo sample.

Expand Down Expand Up @@ -314,7 +314,7 @@ To render the Doughnut Chart in 3D view, enable the **enbel3D** option in the ch
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img8.png)
![ReactJS Chart 3D Doughnut](/js/Chart/3D-Chart_images/3D-Chart_img8.png)


[Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/doughnut) here to view the Doughnut 3DChart online demo sample.
Expand Down Expand Up @@ -345,7 +345,7 @@ To render the EjChart in 3D view, set the [`enable3D`](../api/ejchart#members:en
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img9.png)
![ReactJS Chart 3D View](/js/Chart/3D-Chart_images/3D-Chart_img9.png)

[Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/column) here to view the 3DChart online demo sample.

Expand All @@ -371,7 +371,7 @@ To render the EjChart in 3D view, set the [`enable3D`](../api/ejchart#members:en
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img10.png)
![ReactJS Chart Placing Bar](/js/Chart/3D-Chart_images/3D-Chart_img10.png)


### Setting Axis Wall Size
Expand All @@ -395,7 +395,7 @@ In 3DChart, Cartesian axes lines are represented as walls and it defines the wid
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img11.png)
![ReactJS Chart Setting Axis Wall Size](/js/Chart/3D-Chart_images/3D-Chart_img11.png)


### 3D Depth
Expand All @@ -418,7 +418,7 @@ By using the [`depth`](../api/ejchart#members:depth) property, you can view the
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img12.png)
![ReactJS Chart 3D Depth](/js/Chart/3D-Chart_images/3D-Chart_img12.png)


### Rotating and Tilting 3D Chart
Expand Down Expand Up @@ -449,7 +449,7 @@ To spin the 3D Chart on mouse dragging, enable [`enableRotation`](../api/ejchart
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img13.png)
![ReactJS Chart Rotating and Tilting 3D](/js/Chart/3D-Chart_images/3D-Chart_img13.png)


### PerspectiveAngle
Expand All @@ -473,4 +473,4 @@ The [`perspectiveAngle`](../api/ejchart#members:perspectiveangle) specifies the
{% endhighlight %}


![](/js/Chart/3D-Chart_images/3D-Chart_img14.png)
![ReactJS Chart Perspective Angle](/js/Chart/3D-Chart_images/3D-Chart_img14.png)
12 changes: 6 additions & 6 deletions ReactJS/Chart/Chart-Dimensions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Chart size
description: Learn how to set Chart size and make it responsive.
platform: js
title: Dimensions in ReactJS Chart Control | Syncfusion
description: Learn here all about dimensions support in Syncfusion Essential ReactJS Chart control, its elements, and more.
platform: ReactJS
control: Chart
documentation: ug
api : /api/js/ejchart
---

# Chart Dimensions
# Chart Dimensions in ReactJS Chart

You can set the size of the chart directly on the chart or to the container of the chart. When you do not specify the size, it takes 450px as the height and window size as its width, by default.

Expand Down Expand Up @@ -47,7 +47,7 @@ You can also set the chart dimension by using the [`size`](../api/ejchart#member

{% endhighlight %}

![](/js/Chart/Chart-Dimensions_images/Chart-Dimensions_img1.png)
![ReactJS Chart dimentions](/js/Chart/Chart-Dimensions_images/Chart-Dimensions_img1.png)


## Setting size relative to the container size
Expand All @@ -69,7 +69,7 @@ You can specify the chart size in percentage by using the [`size`](../api/ejchar

{% endhighlight %}

![](/js/Chart/Chart-Dimensions_images/Chart-Dimensions_img2.png)
![ReactJS Chart setting size relative to the container size](/js/Chart/Chart-Dimensions_images/Chart-Dimensions_img2.png)


## Responsive chart
Expand Down
42 changes: 21 additions & 21 deletions ReactJS/Chart/Legend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Chart legend
description: How to cutomize the legend in Essential JavaScript Chart.
platform: js
title: Legend in ReactJS Chart Control | Syncfusion
description: Learn here all about Legend support in Syncfusion Essential ReactJS Chart control, its elements, and more.
platform: ReactJS
control: Chart
documentation: ug
api : /api/js/ejchart
---

# Legend
# Legend in ReactJS Chart

The legend contains the list of chart series and Trendlines that appear in a chart.

Expand Down Expand Up @@ -37,7 +37,7 @@ By default, the legend is enabled in the chart. You can enable or disable it by

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img1.png)
![ReactJS Chart Legend Visibility](/js/Chart/Legend_images/Legend_img1.png)


[Click](http://js.syncfusion.com/demos/web/#!/azure/chart/chartcustomization/legendposition) here to view the online demo sample for legend position.
Expand Down Expand Up @@ -71,7 +71,7 @@ To add the title to the legend, you have to specify the [`legend.title.text`](..

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img2.png)
![ReactJS Chart Legend Title](/js/Chart/Legend_images/Legend_img2.png)


## Position and Align the Legend
Expand Down Expand Up @@ -101,7 +101,7 @@ By using the [`position`](../api/ejchart#members:legend-position) option, you ca

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img3.png)
![ReactJS Chart Position and Align the Legend](/js/Chart/Legend_images/Legend_img3.png)

**Legend Alignment**

Expand Down Expand Up @@ -131,7 +131,7 @@ You can align the legend to the *center*, *far* or *near* based on its position

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img4.png)
![ReactJS Chart Legend Alignment](/js/Chart/Legend_images/Legend_img4.png)


## Arrange legend items in the rows and columns
Expand Down Expand Up @@ -170,7 +170,7 @@ You can arrange the legend items horizontally and vertically by using the [`rowC

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img5.png)
![ReactJS Chart Arrange Legend Items in the Row and Column](/js/Chart/Legend_images/Legend_img5.png)


## Customization
Expand Down Expand Up @@ -202,7 +202,7 @@ To change the legend icon shape, you have to specify the shape in the [`shape`](

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img6.png)
![ReactJS Chart Legend Shape](/js/Chart/Legend_images/Legend_img6.png)


### Legend items size and border
Expand Down Expand Up @@ -232,7 +232,7 @@ You can change the size of the legend items by using the [`itemStyle.width`](../

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img7.png)
![ReactJS Chart Legend Items Size and Border](/js/Chart/Legend_images/Legend_img7.png)

### Legend size

Expand Down Expand Up @@ -261,7 +261,7 @@ By default, legend takes 20% of the **height** horizontally when it was placed o

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img8.png)
![ReactJS Chart Legend Size](/js/Chart/Legend_images/Legend_img8.png)


### Legend Item Padding
Expand Down Expand Up @@ -291,7 +291,7 @@ You can control the spacing between the legend items by using the [`itemPadding`

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img9.png)
![ReactJS Chart Legend Item Padding](/js/Chart/Legend_images/Legend_img9.png)

### Legend border

Expand Down Expand Up @@ -320,7 +320,7 @@ You can customize the legend border by using the [`border`](../api/ejchart#membe

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img10.png)
![ReactJS Chart Legend Border](/js/Chart/Legend_images/Legend_img10.png)

### Scrollbar for legend

Expand Down Expand Up @@ -350,7 +350,7 @@ You can enable or disable the legend scrollbar by using the [`enableScrollbar`](

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img11.png)
![ReactJS Chart Scrollbar for Legend](/js/Chart/Legend_images/Legend_img11.png)

### Customize the legend text

Expand Down Expand Up @@ -386,7 +386,7 @@ To customize the legend item text and title you can use the [`legend.font`](../a

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img12.png)
![ReactJS Chart Customize the Legend Text](/js/Chart/Legend_images/Legend_img12.png)

### LegendItems Text Overflow

Expand Down Expand Up @@ -417,20 +417,20 @@ You can trim the legend item text when its width exceeds the [`legend.textWidth`

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img13.png)
![ReactJS Chart Legend Items Text Overflow](/js/Chart/Legend_images/Legend_img13.png)


**Wrap**

By specifying [`textOverflow`](../api/ejchart#members:legend-textOverflow) as **"wrap"**, you can wrap the legend text by word.

![](/js/Chart/Legend_images/Legend_img14.png)
![ReactJS Chart Wrap](/js/Chart/Legend_images/Legend_img14.png)

**WrapAndTrim**

You can wrap and trim the legend text by specifying [`textOverflow`](../api/ejchart#members:legend-textOverflow) as **"wrapAndTrim"**. The original text will be displayed on mouse hover.

![](/js/Chart/Legend_images/Legend_img15.png)
![ReactJS Chart Wrap and Trim](/js/Chart/Legend_images/Legend_img15.png)


## Handle the legend item clicked
Expand Down Expand Up @@ -491,7 +491,7 @@ You can select a specific series or point while clicking on the corresponding le

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img16.png)
![ReactJS Chart Series Selection on Legend Item Click](/js/Chart/Legend_images/Legend_img16.png)



Expand Down Expand Up @@ -523,4 +523,4 @@ var legend={visible:true};

{% endhighlight %}

![](/js/Chart/Legend_images/Legend_img17.png)
![ReactJS Chart Collapsing Legend Item](/js/Chart/Legend_images/Legend_img17.png)
Loading