` element declared in `index.html`.
-You can add a title using the [`title`](../api/chart3d/chart3DModel#title) property to the 3D Chart to provide quick information to the user about the data plotted in the 3D Chart.
+Copy the snippets below into the matching files in your `quickstart` folder.
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart3d/getting-started-cs4/index.js %}
+{% include code-snippet/chart3d/getting-started-cs7/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart3d/getting-started-cs4/index.html %}
+{% include code-snippet/chart3d/getting-started-cs7/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs4" %}
-## Enable legend
+### Step 4: Open in Browser
-You can enable the legend for the 3D Chart by setting the [`visible`](../api/chart3d/chart3dlegendsettingsmodel#visible) property to `true` in the [`legendSettings`](../api/chart3d/chart3DModel#legendsettings) object.
+Open `quickstart/index.html` through a local web server. With the VS Code **Live Server** extension installed, right-click `index.html` in the Explorer and choose **Open with Live Server**, then visit the URL it prints (for example, `http://127.0.0.1:5500/`). You should see the Syncfusion 3D Chart control displaying the sample sales data.
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart3d/getting-started-cs5/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart3d/getting-started-cs5/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs5" %}
+## Output
-## Add data label
+The 3D Chart shows 12 months of sales data rendered as 3D columns. The title "Sales Analysis" appears above the chart.
-You can add data labels to improve the readability of the 3D Chart. This can be achieved by setting the [`visible`](../api/chart3d/chart3ddatalabelsettingsmodel#visible) property to `true` in the [`dataLabel`](../api/chart3d/chart3dseriesmodel#datalabel) object. Now, the data labels are arranged smartly based on series.
+{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs7" %}
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart3d/getting-started-cs6/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart3d/getting-started-cs6/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs6" %}
-
-## Enable tooltip
+
-The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable the tooltip by setting the [`enable`](../api/chart3d/chart3dtooltipsettingsmodel#enable) property to `true` in the [`tooltip`](../api/chart3d/chart3DModel#tooltip) object.
+## Troubleshooting
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart3d/getting-started-cs7/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart3d/getting-started-cs7/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs7" %}
\ No newline at end of file
+- **The page is blank.** Open the page through a local web server (for example, the VS Code **Live Server** extension) instead of double-clicking the file. Syncfusion charts require an `http://` or `https://` origin.
+- **`ej is not defined`.** Confirm that `ej2-charts.min.js` is loaded before your script. Place the `
-
-
+
Syncfusion Accumulation Chart
+
+
-
+