From fe0d043b527fb80d7a71769906898ddc5ecbc904 Mon Sep 17 00:00:00 2001 From: Yvone-Atieno <95272306+Yvone-Atieno@users.noreply.github.com> Date: Tue, 24 May 2022 12:47:38 +0300 Subject: [PATCH 1/3] ReactJS Chart 3D-Chart --- ReactJS/Chart/3D-Chart.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/ReactJS/Chart/3D-Chart.md b/ReactJS/Chart/3D-Chart.md index 0368643d..65873c05 100644 --- a/ReactJS/Chart/3D-Chart.md +++ b/ReactJS/Chart/3D-Chart.md @@ -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. +description: Learn about the different types of 3D charts supported by Syncfusion Essential JavaScript Chart control,its elements,and more. platform: js control: Chart documentation: ug api : /api/js/ejchart --- -# 3D Chart +# 3D Chart in JS 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). @@ -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) +![JS Chart 3D Column Chart](/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. @@ -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) +![JS Chart 3D Bar Chart](/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. @@ -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) +![JS Chart 3D Stacked Column Chart](/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. @@ -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) +![JS Chart 3D 100% Stacked Column Chart](/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. @@ -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) +![JS Chart 3D Stacked Bar Chart](/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. @@ -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) +![JS Chart3D 100% Stacked Bar Chart](/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. @@ -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) +![JS Chart 3D Pie Chart](/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. @@ -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) +![JS Chart 3D Doughnut Chart](/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. @@ -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) +![JS 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. @@ -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) +![JS Chart Placing Bar](/js/Chart/3D-Chart_images/3D-Chart_img10.png) ### Setting Axis Wall Size @@ -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) +![JS Chart Setting Axis Wall Size](/js/Chart/3D-Chart_images/3D-Chart_img11.png) ### 3D Depth @@ -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) +![JS Chart 3D Depth](/js/Chart/3D-Chart_images/3D-Chart_img12.png) ### Rotating and Tilting 3D Chart @@ -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) +![JS Chart Rotating and Tilting 3D Chart](/js/Chart/3D-Chart_images/3D-Chart_img13.png) ### PerspectiveAngle @@ -473,4 +473,4 @@ The [`perspectiveAngle`](../api/ejchart#members:perspectiveangle) specifies the {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img14.png) +![JS Chart PerspectiveAngle](/js/Chart/3D-Chart_images/3D-Chart_img14.png) From a68373d2b62c0a09abb7fee68bd52ad5c59e3fb6 Mon Sep 17 00:00:00 2001 From: Yvone-Atieno <95272306+Yvone-Atieno@users.noreply.github.com> Date: Tue, 24 May 2022 13:00:57 +0300 Subject: [PATCH 2/3] images error changes fixed --- ReactJS/Chart/3D-Chart.md | 6 +++--- ...{3D-Chart_img2.png => JS Chart 3D Bar Chart.png} | Bin ...-Chart_img1.png => JS Chart 3D Column Chart.png} | Bin 3 files changed, 3 insertions(+), 3 deletions(-) rename ReactJS/Chart/3D-Chart_images/{3D-Chart_img2.png => JS Chart 3D Bar Chart.png} (100%) rename ReactJS/Chart/3D-Chart_images/{3D-Chart_img1.png => JS Chart 3D Column Chart.png} (100%) diff --git a/ReactJS/Chart/3D-Chart.md b/ReactJS/Chart/3D-Chart.md index 65873c05..edea88c0 100644 --- a/ReactJS/Chart/3D-Chart.md +++ b/ReactJS/Chart/3D-Chart.md @@ -121,7 +121,7 @@ Stacking Column 3DChart is rendered by specifying the series [`type`](../api/ejc {% endhighlight %} -![JS Chart 3D Stacked Column Chart](/js/Chart/3D-Chart_images/3D-Chart_img3.png) +![JS Chart 3D-Stacked Column Chart](/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. @@ -161,7 +161,7 @@ Stacking Column 3DChart is rendered by specifying the series [`type`](../api/ejc {% endhighlight %} -![JS Chart 3D 100% Stacked Column Chart](/js/Chart/3D-Chart_images/3D-Chart_img4.png) +![JS Chart 3D 100 Stacked Column Chart](/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. @@ -242,7 +242,7 @@ You can create 100% Stacking Bar 3DChart by setting the series [`type`](../api/e {% endhighlight %} -![JS Chart3D 100% Stacked Bar Chart](/js/Chart/3D-Chart_images/3D-Chart_img6.png) +![JS Chart3D 100 Stacked Bar Chart](/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. diff --git a/ReactJS/Chart/3D-Chart_images/3D-Chart_img2.png b/ReactJS/Chart/3D-Chart_images/JS Chart 3D Bar Chart.png similarity index 100% rename from ReactJS/Chart/3D-Chart_images/3D-Chart_img2.png rename to ReactJS/Chart/3D-Chart_images/JS Chart 3D Bar Chart.png diff --git a/ReactJS/Chart/3D-Chart_images/3D-Chart_img1.png b/ReactJS/Chart/3D-Chart_images/JS Chart 3D Column Chart.png similarity index 100% rename from ReactJS/Chart/3D-Chart_images/3D-Chart_img1.png rename to ReactJS/Chart/3D-Chart_images/JS Chart 3D Column Chart.png From f5dbc8ecf4366185ef8e609d1545612efb01e40f Mon Sep 17 00:00:00 2001 From: Yvone-Atieno <95272306+Yvone-Atieno@users.noreply.github.com> Date: Wed, 25 May 2022 15:59:19 +0300 Subject: [PATCH 3/3] renamed images --- ReactJS/Chart/3D-Chart.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/ReactJS/Chart/3D-Chart.md b/ReactJS/Chart/3D-Chart.md index edea88c0..1d59e08e 100644 --- a/ReactJS/Chart/3D-Chart.md +++ b/ReactJS/Chart/3D-Chart.md @@ -44,7 +44,7 @@ For rendering a 3D Column Chart, specify the series [`type`](../api/ejchart#memb {% endhighlight %} -![JS Chart 3D Column Chart](/js/Chart/3D-Chart_images/3D-Chart_img1.png) +![JS Chart 3D Column 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. @@ -80,7 +80,7 @@ You can create a 3D Bar Chart by setting the series [`type`](../api/ejchart#memb {% endhighlight %} -![JS Chart 3D Bar Chart](/js/Chart/3D-Chart_images/3D-Chart_img2.png) +![JS Chart 3D Bar 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. @@ -121,7 +121,7 @@ Stacking Column 3DChart is rendered by specifying the series [`type`](../api/ejc {% endhighlight %} -![JS Chart 3D-Stacked Column Chart](/js/Chart/3D-Chart_images/3D-Chart_img3.png) +![JS Chart 3D-Stacked Column 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. @@ -161,7 +161,7 @@ Stacking Column 3DChart is rendered by specifying the series [`type`](../api/ejc {% endhighlight %} -![JS Chart 3D 100 Stacked Column Chart](/js/Chart/3D-Chart_images/3D-Chart_img4.png) +![JS Chart 3D 100 Stacked Column 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. @@ -202,7 +202,7 @@ To create Stacking Bar 3DChart, set the series [`type`](../api/ejchart#members:s {% endhighlight %} -![JS Chart 3D Stacked Bar Chart](/js/Chart/3D-Chart_images/3D-Chart_img5.png) +![JS Chart 3D Stacked Bar 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. @@ -242,7 +242,7 @@ You can create 100% Stacking Bar 3DChart by setting the series [`type`](../api/e {% endhighlight %} -![JS Chart3D 100 Stacked Bar Chart](/js/Chart/3D-Chart_images/3D-Chart_img6.png) +![JS Chart3D 100 Stacked Bar 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. @@ -278,7 +278,7 @@ To render the Pie Chart in 3D view, enable the **enbel3D** option in the chart a {% endhighlight %} -![JS Chart 3D Pie Chart](/js/Chart/3D-Chart_images/3D-Chart_img7.png) +![JS Chart 3D Pie 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. @@ -314,7 +314,7 @@ To render the Doughnut Chart in 3D view, enable the **enbel3D** option in the ch {% endhighlight %} -![JS Chart 3D Doughnut Chart](/js/Chart/3D-Chart_images/3D-Chart_img8.png) +![JS Chart 3D Doughnut 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. @@ -345,7 +345,7 @@ To render the EjChart in 3D view, set the [`enable3D`](../api/ejchart#members:en {% endhighlight %} -![JS Chart 3D View](/js/Chart/3D-Chart_images/3D-Chart_img9.png) +![JS Chart 3D View](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. @@ -371,7 +371,7 @@ To render the EjChart in 3D view, set the [`enable3D`](../api/ejchart#members:en {% endhighlight %} -![JS Chart Placing Bar](/js/Chart/3D-Chart_images/3D-Chart_img10.png) +![JS Chart Placing Bar](3D-Chart_images/3D-Chart_img10.png) ### Setting Axis Wall Size @@ -395,7 +395,7 @@ In 3DChart, Cartesian axes lines are represented as walls and it defines the wid {% endhighlight %} -![JS Chart Setting Axis Wall Size](/js/Chart/3D-Chart_images/3D-Chart_img11.png) +![JS Chart Setting Axis Wall Size](3D-Chart_images/3D-Chart_img11.png) ### 3D Depth @@ -418,7 +418,7 @@ By using the [`depth`](../api/ejchart#members:depth) property, you can view the {% endhighlight %} -![JS Chart 3D Depth](/js/Chart/3D-Chart_images/3D-Chart_img12.png) +![JS Chart 3D Depth](3D-Chart_images/3D-Chart_img12.png) ### Rotating and Tilting 3D Chart @@ -449,7 +449,7 @@ To spin the 3D Chart on mouse dragging, enable [`enableRotation`](../api/ejchart {% endhighlight %} -![JS Chart Rotating and Tilting 3D Chart](/js/Chart/3D-Chart_images/3D-Chart_img13.png) +![JS Chart Rotating and Tilting 3D Chart](3D-Chart_images/3D-Chart_img13.png) ### PerspectiveAngle @@ -473,4 +473,4 @@ The [`perspectiveAngle`](../api/ejchart#members:perspectiveangle) specifies the {% endhighlight %} -![JS Chart PerspectiveAngle](/js/Chart/3D-Chart_images/3D-Chart_img14.png) +![JS Chart PerspectiveAngle](3D-Chart_images/3D-Chart_img14.png)