Skip to content

Commit 1347c3a

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #679 from Syncfusion-Content/hotfix/hotfix-v31.2.12
DOCINFRA-2341_merged_using_automation
2 parents d960d39 + 2a7fb1d commit 1347c3a

File tree

8 files changed

+473
-394
lines changed

8 files changed

+473
-394
lines changed

‎ej2-javascript-toc.html‎

Lines changed: 118 additions & 98 deletions
Large diffs are not rendered by default.

‎ej2-javascript/chart/chart-appearance.md‎

Lines changed: 0 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -340,159 +340,6 @@ Fluid animation used to animate series with updated dataSource continues animati
340340
{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs14" %}
341341
{% endif %}
342342

343-
## Chart title
344-
345-
Chart can be given a title using [`title`](../api/chart/#title-string) property, to show the information about the data plotted.
346-
347-
{% if page.publishingplatform == "typescript" %}
348-
349-
{% tabs %}
350-
{% highlight ts tabtitle="index.ts" %}
351-
{% include code-snippet/chart/chart-appearance-cs15/index.ts %}
352-
{% endhighlight %}
353-
{% highlight html tabtitle="index.html" %}
354-
{% include code-snippet/chart/chart-appearance-cs15/index.html %}
355-
{% endhighlight %}
356-
{% endtabs %}
357-
358-
{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs15" %}
359-
360-
{% elsif page.publishingplatform == "javascript" %}
361-
362-
{% tabs %}
363-
{% highlight js tabtitle="index.js" %}
364-
{% include code-snippet/chart/chart-appearance-cs15/index.js %}
365-
{% endhighlight %}
366-
{% highlight html tabtitle="index.html" %}
367-
{% include code-snippet/chart/chart-appearance-cs15/index.html %}
368-
{% endhighlight %}
369-
{% endtabs %}
370-
371-
{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs15" %}
372-
{% endif %}
373-
374-
### Title position
375-
376-
By using the [`position`](../api/chart/titleSettings/#position) property in [`titleStyle`](../api/chart/#titlestyle), you can position the [`title`](../api/chart/#title-string) at left, right, top or bottom of the chart. The title is positioned at the top of the chart, by default.
377-
378-
{% if page.publishingplatform == "typescript" %}
379-
380-
{% tabs %}
381-
{% highlight ts tabtitle="index.ts" %}
382-
{% include code-snippet/chart/chart-appearance-cs21/index.ts %}
383-
{% endhighlight %}
384-
{% highlight html tabtitle="index.html" %}
385-
{% include code-snippet/chart/chart-appearance-cs21/index.html %}
386-
{% endhighlight %}
387-
{% endtabs %}
388-
389-
{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs21" %}
390-
391-
{% elsif page.publishingplatform == "javascript" %}
392-
393-
{% tabs %}
394-
{% highlight js tabtitle="index.js" %}
395-
{% include code-snippet/chart/chart-appearance-cs21/index.js %}
396-
{% endhighlight %}
397-
{% highlight html tabtitle="index.html" %}
398-
{% include code-snippet/chart/chart-appearance-cs21/index.html %}
399-
{% endhighlight %}
400-
{% endtabs %}
401-
402-
{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs21" %}
403-
{% endif %}
404-
405-
The custom option helps you to position the title anywhere in the chart using [`x`](../api/chart/titleSettings/#x) and [`y`](../api/chart/titleSettings/#y) coordinates.
406-
407-
{% if page.publishingplatform == "typescript" %}
408-
409-
{% tabs %}
410-
{% highlight ts tabtitle="index.ts" %}
411-
{% include code-snippet/chart/chart-appearance-cs22/index.ts %}
412-
{% endhighlight %}
413-
{% highlight html tabtitle="index.html" %}
414-
{% include code-snippet/chart/chart-appearance-cs22/index.html %}
415-
{% endhighlight %}
416-
{% endtabs %}
417-
418-
{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs22" %}
419-
420-
{% elsif page.publishingplatform == "javascript" %}
421-
422-
{% tabs %}
423-
{% highlight js tabtitle="index.js" %}
424-
{% include code-snippet/chart/chart-appearance-cs22/index.js %}
425-
{% endhighlight %}
426-
{% highlight html tabtitle="index.html" %}
427-
{% include code-snippet/chart/chart-appearance-cs22/index.html %}
428-
{% endhighlight %}
429-
{% endtabs %}
430-
431-
{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs22" %}
432-
{% endif %}
433-
434-
### Title alignment
435-
436-
You can align the title to the near, far, or center of the chart using the [`textAlignment`](../api/chart/titleSettings/#textalignment) property.
437-
438-
{% if page.publishingplatform == "typescript" %}
439-
440-
{% tabs %}
441-
{% highlight ts tabtitle="index.ts" %}
442-
{% include code-snippet/chart/chart-appearance-cs23/index.ts %}
443-
{% endhighlight %}
444-
{% highlight html tabtitle="index.html" %}
445-
{% include code-snippet/chart/chart-appearance-cs23/index.html %}
446-
{% endhighlight %}
447-
{% endtabs %}
448-
449-
{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs23" %}
450-
451-
{% elsif page.publishingplatform == "javascript" %}
452-
453-
{% tabs %}
454-
{% highlight js tabtitle="index.js" %}
455-
{% include code-snippet/chart/chart-appearance-cs23/index.js %}
456-
{% endhighlight %}
457-
{% highlight html tabtitle="index.html" %}
458-
{% include code-snippet/chart/chart-appearance-cs23/index.html %}
459-
{% endhighlight %}
460-
{% endtabs %}
461-
462-
{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs23" %}
463-
{% endif %}
464-
465-
### Title wrap
466-
467-
The `textStyle` property of chart title provides options to customize the `size`, `color`, `fontFamily`, `fontWeight`, `fontStyle`, `opacity`, `textAlignment` and `textOverflow`.
468-
469-
{% if page.publishingplatform == "typescript" %}
470-
471-
{% tabs %}
472-
{% highlight ts tabtitle="index.ts" %}
473-
{% include code-snippet/chart/getting-started-cs1/index.ts %}
474-
{% endhighlight %}
475-
{% highlight html tabtitle="index.html" %}
476-
{% include code-snippet/chart/getting-started-cs1/index.html %}
477-
{% endhighlight %}
478-
{% endtabs %}
479-
480-
{% previewsample "page.domainurl/code-snippet/chart/getting-started-cs1" %}
481-
482-
{% elsif page.publishingplatform == "javascript" %}
483-
484-
{% tabs %}
485-
{% highlight js tabtitle="index.js" %}
486-
{% include code-snippet/chart/getting-started-cs1/index.js %}
487-
{% endhighlight %}
488-
{% highlight html tabtitle="index.html" %}
489-
{% include code-snippet/chart/getting-started-cs1/index.html %}
490-
{% endhighlight %}
491-
{% endtabs %}
492-
493-
{% previewsample "page.domainurl/code-snippet/chart/getting-started-cs1" %}
494-
{% endif %}
495-
496343
## See also
497344

498345
* [Customize the series points using patterns](../chart/how-to/points-customization/#customize-the-series-points-by-using-patterns)

‎ej2-javascript/chart/data-labels.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -351,6 +351,74 @@ You can calculate the percentage value based on the sum for each series using th
351351
{% previewsample "page.domainurl/code-snippet/chart/legend-cs1" %}
352352
{% endif %}
353353

354+
## Last value label
355+
356+
The `lastValueLabel` in a chart allows you to easily display the value of the last data point in a series. This feature provides an intuitive way to highlight the most recent or last data value in a series on your chart.
357+
358+
### Enable last value label
359+
360+
To show the last value label, make sure the `enable` property inside the `lastValueLabel` settings is set to `true` within the series configuration.
361+
362+
{% if page.publishingplatform == "typescript" %}
363+
364+
{% tabs %}
365+
{% highlight ts tabtitle="index.ts" %}
366+
{% include code-snippet/chart/last-value-label/index.ts %}
367+
{% endhighlight %}
368+
{% highlight html tabtitle="index.html" %}
369+
{% include code-snippet/chart/last-value-label/index.html %}
370+
{% endhighlight %}
371+
{% endtabs %}
372+
373+
{% previewsample "page.domainurl/code-snippet/chart/last-value-label" %}
374+
375+
{% elsif page.publishingplatform == "javascript" %}
376+
377+
{% tabs %}
378+
{% highlight js tabtitle="index.js" %}
379+
{% include code-snippet/chart/last-value-label/index.js %}
380+
{% endhighlight %}
381+
{% highlight html tabtitle="index.html" %}
382+
{% include code-snippet/chart/last-value-label/index.html %}
383+
{% endhighlight %}
384+
{% endtabs %}
385+
386+
{% previewsample "page.domainurl/code-snippet/chart/last-value-label" %}
387+
{% endif %}
388+
389+
>Note: To use the last value label feature, we need to inject `LastValueLabel` module using Chart.Inject(LastValueLabel).
390+
391+
### Customization
392+
393+
The appearance of the last value label can be customized using style properties such as `font`, `background`, `border`, `dashArray`, `lineWidth`, `lineColor`, `rx`, and `ry` in the lastValueLabel property of the chart series. These settings allow you to tailor the label’s look to align with your desired visual presentation.
394+
395+
{% if page.publishingplatform == "typescript" %}
396+
397+
{% tabs %}
398+
{% highlight ts tabtitle="index.ts" %}
399+
{% include code-snippet/chart/last-value-label-customization/index.ts %}
400+
{% endhighlight %}
401+
{% highlight html tabtitle="index.html" %}
402+
{% include code-snippet/chart/last-value-label-customization/index.html %}
403+
{% endhighlight %}
404+
{% endtabs %}
405+
406+
{% previewsample "page.domainurl/code-snippet/chart/last-value-label-customization" %}
407+
408+
{% elsif page.publishingplatform == "javascript" %}
409+
410+
{% tabs %}
411+
{% highlight js tabtitle="index.js" %}
412+
{% include code-snippet/chart/last-value-label-customization/index.js %}
413+
{% endhighlight %}
414+
{% highlight html tabtitle="index.html" %}
415+
{% include code-snippet/chart/last-value-label-customization/index.html %}
416+
{% endhighlight %}
417+
{% endtabs %}
418+
419+
{% previewsample "page.domainurl/code-snippet/chart/last-value-label-customization" %}
420+
{% endif %}
421+
354422
## See Also
355423

356424
* [Show total stacking values in data label](../chart/how-to/stacking-total)

‎ej2-javascript/chart/lastvaluelabel.md‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

0 commit comments

Comments
 (0)