Updated Typescript samples
This commit is contained in:
Deepika5698
Родитель
fc9020b6df
Коммит
627b24a369
|
|
@ -176,7 +176,6 @@
|
|||
"workflow",
|
||||
"form-validator",
|
||||
"signature",
|
||||
"multiline-textbox",
|
||||
null
|
||||
"multiline-textbox"
|
||||
]
|
||||
}
|
||||
12
index.html
12
index.html
|
|
@ -221,13 +221,21 @@
|
|||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Tailwind CSS Dark</span>
|
||||
</li>
|
||||
<li class='active' id="material" role="listitem">
|
||||
<li class='e-list' id="material" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Material</span>
|
||||
</li>
|
||||
<li class="e-list" id="material-dark">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Material Dark</span>
|
||||
</li>
|
||||
<li class='active' id="material3" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Material 3</span>
|
||||
</li>
|
||||
<li class="e-list" id="material3-dark" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Material 3 Dark</span>
|
||||
</li>
|
||||
<li id="fabric" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
|
|
@ -277,6 +285,8 @@
|
|||
<option value="tailwind-dark">Tailwind CSS Dark</option>
|
||||
<option value="material">Material</option>
|
||||
<option value="material-dark">Material Dark</option>
|
||||
<option value="material3">Material 3</option>
|
||||
<option value="material3-dark">Material 3 Dark</option>
|
||||
<option value="fabric">Fabric</option>
|
||||
<option value="fabric-dark">Fabric Dark</option>
|
||||
<option value="bootstrap4">Bootstrap v4</option>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-samples",
|
||||
"version": "21.1.35",
|
||||
"version": "22.1.34",
|
||||
"description": "Samples for Syncfusion Essential JS 2",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
"api": {"AccordionItem": ["header", "content", "expanded"], "Accordion":["items"] }
|
||||
},
|
||||
{
|
||||
"url": "ajax",
|
||||
"name": "Ajax Content",
|
||||
"url": "fetch",
|
||||
"name": "Fetch Content",
|
||||
"category": "Accordion",
|
||||
"description":"The sample demonstrates how to load the content to the Accordion control from external sources using Ajax library in TypeScript platform.",
|
||||
"description":"The sample demonstrates how to load the content to the Accordion control from external sources using Fetch library in TypeScript platform.",
|
||||
"api": {"Accordion": ["expandMode","expanding"] }
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -24,6 +24,9 @@
|
|||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#gauge_Annotations_0 {
|
||||
line-height: 0.4;
|
||||
}
|
||||
.triangle-up {
|
||||
width: 20;
|
||||
height: 20;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import * as data from './dataSource.json';
|
|||
let atcObj1: AutoComplete = new AutoComplete({
|
||||
// bind the DataManager instance to dataSource property
|
||||
dataSource: new DataManager({
|
||||
url: 'https://ej2services.syncfusion.com/js/development/api/Employees',
|
||||
url: 'https://services.syncfusion.com/js/production/api/Employees',
|
||||
adaptor: new WebApiAdaptor,
|
||||
crossDomain: true
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@
|
|||
color: #495057;
|
||||
}
|
||||
.material-dark .e-list-icon,
|
||||
.material3-dark .e-list-icon,
|
||||
.bootstrap5-dark .e-list-icon,
|
||||
.tailwind-dark .e-list-icon,
|
||||
.fluent-dark .e-list-icon {
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@
|
|||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.material3-dark .header,
|
||||
.material-dark .header {
|
||||
background: rgb(66, 66, 66);
|
||||
color: rgb(255, 255, 255);
|
||||
|
|
|
|||
|
|
@ -80,10 +80,13 @@
|
|||
}
|
||||
|
||||
.tailwind .e-custom-card .e-avatar,
|
||||
.tailwind-dark .e-custom-card .e-avatar,
|
||||
.bootstrap5 .e-custom-card .e-avatar,
|
||||
.bootstrap5-dark .e-custom-card .e-avatar,
|
||||
.fluent .e-custom-card .e-avatar,
|
||||
.fluent-dark .e-custom-card .e-avatar {
|
||||
.fluent-dark .e-custom-card .e-avatar,
|
||||
.material3 .e-custom-card .e-avatar,
|
||||
.material3-dark .e-custom-card .e-avatar {
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
}
|
||||
|
|
@ -138,6 +141,7 @@
|
|||
.bootstrap-dark .e-custom-card.e-card .avatar-content,
|
||||
.tailwind-dark .e-custom-card.e-card .avatar-content,
|
||||
.material-dark .e-custom-card.e-card .avatar-content,
|
||||
.material3-dark .e-custom-card.e-card .avatar-content,
|
||||
.fabric-dark .e-custom-card.e-card .avatar-content,
|
||||
.bootstrap5-dark .e-custom-card.e-card .avatar-content,
|
||||
.fluent-dark .e-custom-card.e-card .avatar-content {
|
||||
|
|
@ -148,6 +152,8 @@
|
|||
.bootstrap-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.tailwind-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.material-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.material3-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.fluent-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.fabric-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.bootstrap5-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.fluent-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
|
||||
|
|
@ -158,15 +164,13 @@
|
|||
.bootstrap-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.tailwind-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.material-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.material3-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.fluent-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.fabric-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.bootstrap5-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.fluent-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
.tailwind-dark .e-avatar,
|
||||
.bootstrap5-dark .e-avatar {
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -47,6 +47,9 @@
|
|||
height: 54px;
|
||||
}
|
||||
|
||||
.material3 #letterAvatarList .e-list-item,
|
||||
.material3-dark #letterAvatarList .e-list-item,
|
||||
.tailwind #letterAvatarList .e-list-item,
|
||||
body.material #letterAvatarList .e-list-item,
|
||||
body.material-dark #letterAvatarList .e-list-item {
|
||||
line-height: 50px;
|
||||
|
|
@ -56,10 +59,9 @@
|
|||
line-height: 35px;
|
||||
}
|
||||
|
||||
.material #letterAvatarList .e-list-header .e-text {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.material3 #letterAvatarList .e-list-header .e-text,
|
||||
.material3-dark #letterAvatarList .e-list-header .e-text,
|
||||
.material #letterAvatarList .e-list-header .e-text,
|
||||
.fabric #letterAvatarList .e-list-header .e-text {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
|
@ -79,8 +81,9 @@
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.material3 #letterAvatarList .e-list-item,
|
||||
.material3-dark #letterAvatarList .e-list-item,
|
||||
.tailwind #letterAvatarList .e-list-item {
|
||||
line-height: 50px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,21 +80,27 @@
|
|||
|
||||
body.tailwind-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.bootstrap5 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.bootstrap5-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
body.bootstrap5-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.material3 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.material3-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.e-bigger.tailwind .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.tailwind-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.bootstrap5 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.bootstrap5-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
.e-bigger.bootstrap5-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.material3 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.material3-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
body.tailwind-dark .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
|
||||
body.tailwind .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
|
||||
body.bootstrap5 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
|
||||
body.bootstrap5-dark .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
|
||||
body.bootstrap5-dark .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
|
||||
body.material3 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
|
||||
body.material3-dark .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -132,6 +132,24 @@
|
|||
border-top-right-radius: 8px;
|
||||
}
|
||||
|
||||
.material3 #update.e-btn {
|
||||
border-bottom-right-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
|
||||
.material3 #task.e-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.material3 #notify.e-btn {
|
||||
border-bottom-left-radius: 0px;
|
||||
border-top-left-radius: 0px;
|
||||
}
|
||||
|
||||
.material3 .e-btn-group.e-custom-button {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.default .e-badge.e-badge-overlap {
|
||||
transform: translateX(-110%);
|
||||
z-index: 100;
|
||||
|
|
|
|||
|
|
@ -204,7 +204,9 @@
|
|||
.material-dark .sample_container.badge-notification .layout,
|
||||
.fabric-dark .sample_container.badge-notification .layout,
|
||||
.bootstrap-dark .sample_container.badge-notification .layout,
|
||||
.bootstrap5-dark .sample_container.badge-notification .layout {
|
||||
.bootstrap5-dark .sample_container.badge-notification .layout,
|
||||
.fluent-dark .sample_container.badge-notification .layout,
|
||||
.material3-dark .sample_container.badge-notification .layout {
|
||||
background: inherit;
|
||||
border: 1px solid white;
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -100,6 +100,15 @@
|
|||
{
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
.material3 .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret,
|
||||
.material3-dark .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret,
|
||||
.e-bigger .material3 .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret,
|
||||
.e-bigger .material3-dark .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret
|
||||
{
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ let targetValue: number;
|
|||
let chart: BulletChart = new BulletChart({
|
||||
width: Browser.isDevice ? '100%' : '70%',
|
||||
height: '160',
|
||||
tooltip: { enable: false },
|
||||
tooltip: { enable: true },
|
||||
dataSource: [{ value: 25, target: [20, 26, 28] }],
|
||||
valueField: 'value',
|
||||
targetField: 'target',
|
||||
|
|
|
|||
|
|
@ -111,6 +111,18 @@
|
|||
#progress-button-control .col-xs-12 {
|
||||
margin: 18px 0;
|
||||
}
|
||||
|
||||
.material3 #roundbtn .e-play-icon,
|
||||
.material3-dark #roundbtn .e-play-icon {
|
||||
margin-top: -4px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.e-bigger .material3 #roundbtn .e-play-icon,
|
||||
.e-bigger .material3-dark #roundbtn .e-play-icon {
|
||||
margin-top: -4px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
/* custom code end */
|
||||
|
||||
#contract.e-progress-active .e-btn-content {
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
body.bootstrap5-dark #date_label,
|
||||
body.tailwind-dark #date_label,
|
||||
body.material-dark #date_label,
|
||||
body.material3-dark #date_label,
|
||||
body.fabric-dark #date_label,
|
||||
body.bootstrap-dark #date_label,
|
||||
body.highcontrast #date_label {
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
body.bootstrap5-dark #date_label,
|
||||
body.tailwind-dark #date_label,
|
||||
body.material-dark #date_label,
|
||||
body.material3-dark #date_label,
|
||||
body.fabric-dark #date_label,
|
||||
body.bootstrap-dark #date_label,
|
||||
body.highcontrast #date_label {
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
body.bootstrap5-dark #date_label,
|
||||
body.tailwind-dark #date_label,
|
||||
body.material-dark #date_label,
|
||||
body.material3-dark #date_label,
|
||||
body.fabric-dark #date_label,
|
||||
body.bootstrap-dark #date_label,
|
||||
body.highcontrast #date_label {
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
body.bootstrap5-dark #date_label,
|
||||
body.tailwind-dark #date_label,
|
||||
body.material-dark #date_label,
|
||||
body.material3-dark #date_label,
|
||||
body.fabric-dark #date_label,
|
||||
body.bootstrap-dark #date_label
|
||||
body.highcontrast #date_label {
|
||||
|
|
@ -83,6 +84,7 @@
|
|||
|
||||
.highcontrast .sf-icon-cup:before,
|
||||
.material-dark .sf-icon-cup:before,
|
||||
.material3-dark .sf-icon-cup:before,
|
||||
.fabric-dark .sf-icon-cup:before,
|
||||
.bootstrap-dark .sf-icon-cup:before,
|
||||
.bootstrap5-dark .sf-icon-cup:before,
|
||||
|
|
@ -93,6 +95,7 @@
|
|||
|
||||
.highcontrast .sf-icon-start:before,
|
||||
.material-dark .sf-icon-start:before,
|
||||
.material3-dark .sf-icon-start:before,
|
||||
.fabric-dark .sf-icon-start:before,
|
||||
.bootstrap-dark .sf-icon-start:before,
|
||||
.bootstrap5-dark .sf-icon-start:before,
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
body.bootstrap5-dark #date_label,
|
||||
body.tailwind-dark #date_label,
|
||||
body.material-dark #date_label,
|
||||
body.material3-dark #date_label,
|
||||
body.fabric-dark #date_label,
|
||||
body.bootstrap-dark #date_label,
|
||||
body.highcontrast #date_label {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="col-lg-12 control-section">
|
||||
<div class="col-lg-7">
|
||||
<div class="col-lg-12">
|
||||
<div class="col-lg-7 control-section sb-property-border">
|
||||
<div id="control_wrapper" class="col-lg-6 col-sm-8 col-md-8 multiselectWrapper">
|
||||
<div id="container" style="overflow:auto"></div>
|
||||
<div id="calendar"></div>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<label>Selected values</label>
|
||||
<label style="padding-top:22px">Selected values</label>
|
||||
<div class="content-value">
|
||||
<div id="multiselect"></div>
|
||||
</div>
|
||||
|
|
@ -57,6 +57,7 @@
|
|||
|
||||
.highcontrast .content-value,
|
||||
.material-dark .content-value,
|
||||
.material3-dark .content-value,
|
||||
.fabric-dark .content-value,
|
||||
.bootstrap-dark .content-value,
|
||||
.bootstrap5-dark .content-value,
|
||||
|
|
@ -69,6 +70,7 @@
|
|||
body.bootstrap5-dark #date_label,
|
||||
body.tailwind-dark #date_label,
|
||||
body.material-dark #date_label,
|
||||
body.material3-dark #date_label,
|
||||
body.fabric-dark #date_label,
|
||||
body.bootstrap-dark #date_label,
|
||||
body.highcontrast #date_label {
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@
|
|||
.highcontrast .e-customStyle span.e-icons.highlight:before,
|
||||
.material-dark .e-customStyle span.e-icons.highlight,
|
||||
.material-dark .e-customStyle span.e-icons.highlight:before,
|
||||
.material3-dark .e-customStyle span.e-icons.highlight,
|
||||
.material3-dark .e-customStyle span.e-icons.highlight:before,
|
||||
.fabric-dark .e-customStyle span.e-icons.highlight,
|
||||
.fabric-dark .e-customStyle span.e-icons.highlight:before,
|
||||
.bootstrap-dark .e-customStyle span.e-icons.highlight,
|
||||
|
|
@ -112,6 +114,7 @@
|
|||
body.bootstrap5-dark #date_label,
|
||||
body.tailwind-dark #date_label,
|
||||
body.material-dark #date_label,
|
||||
body.material3-dark #date_label,
|
||||
body.fabric-dark #date_label,
|
||||
body.bootstrap-dark #date_label,
|
||||
body.highcontrast #date_label {
|
||||
|
|
|
|||
|
|
@ -48,10 +48,11 @@ function customDates(args: RenderDayCellEventArgs): void {
|
|||
}
|
||||
}
|
||||
function valueChange(args: ChangedEventArgs): void {
|
||||
let title: string = '';
|
||||
let title: string | null = '';
|
||||
/*Displays selected date in the label*/
|
||||
if (args.event) {
|
||||
title = (<HTMLElement>args.event.currentTarget).getAttribute('data-val');
|
||||
title = (<HTMLElement>args.event.currentTarget).classList.contains('e-selected') ? (<HTMLElement>args.event.currentTarget).getAttribute('data-val') : (<HTMLElement>args.event.currentTarget).getElementsByClassName('e-selected').length > 0
|
||||
? (<HTMLElement>args.event.currentTarget).getElementsByClassName('e-selected')[0].getAttribute('data-val') : null;
|
||||
title = title === null ? '' : ' ( ' + title + ' )';
|
||||
}
|
||||
(<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString() + title;
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@
|
|||
background-image: url('./src/card/images/weather.png');
|
||||
}
|
||||
|
||||
.material3-dark .card-control-section.basic_card_layout .e-card .e-card-header,
|
||||
.material-dark .card-control-section.basic_card_layout .e-card .e-card-header {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@
|
|||
text-align: left
|
||||
}
|
||||
|
||||
.material3-dark .card-control-section.reveal_card_layout .e-card .e-card-header,
|
||||
.material-dark .card-control-section.reveal_card_layout .e-card .e-card-header {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
height: 3em;
|
||||
}
|
||||
|
||||
.db-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
|
||||
.db-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator div {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -81,12 +81,12 @@
|
|||
background-color: #d2e3f8;
|
||||
}
|
||||
|
||||
.kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
|
||||
.kb-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator div {
|
||||
background-color: #e5e5e5;
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
.kb-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
|
||||
.kb-carousel .e-carousel-indicators.e-default .e-indicator-bar.e-active .e-indicator div {
|
||||
background-color: #4d8fe4 !important;
|
||||
}
|
||||
|
||||
|
|
@ -116,7 +116,8 @@
|
|||
.material-dark .keyboard-carousel-section .carousel-sample,
|
||||
.fabric-dark .keyboard-carousel-section .carousel-sample,
|
||||
.bootstrap-dark .keyboard-carousel-section .carousel-sample,
|
||||
.highcontrast .keyboard-carousel-section .carousel-sample {
|
||||
.highcontrast .keyboard-carousel-section .carousel-sample,
|
||||
.material3-dark .keyboard-carousel-section .carousel-sample {
|
||||
background-color: #26292E;
|
||||
}
|
||||
|
||||
|
|
@ -126,7 +127,8 @@
|
|||
.material-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading,
|
||||
.fabric-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading,
|
||||
.bootstrap-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading,
|
||||
.highcontrast .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading {
|
||||
.highcontrast .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading,
|
||||
.material3-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
|
|
@ -136,7 +138,8 @@
|
|||
.material-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .description,
|
||||
.fabric-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .description,
|
||||
.bootstrap-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .description,
|
||||
.highcontrast .kb-carousel .e-carousel-items .e-carousel-item .product-container .description {
|
||||
.highcontrast .kb-carousel .e-carousel-items .e-carousel-item .product-container .description,
|
||||
.material3-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .description {
|
||||
color: #9f9f9f
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +156,9 @@
|
|||
.bootstrap-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):hover,
|
||||
.bootstrap-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):focus,
|
||||
.highcontrast .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):hover,
|
||||
.highcontrast .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):focus {
|
||||
.highcontrast .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):focus,
|
||||
.material3-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):hover,
|
||||
.material3-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):focus {
|
||||
background-color: #4e4e4e;
|
||||
}
|
||||
|
||||
|
|
@ -163,7 +168,8 @@
|
|||
.material-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon,
|
||||
.fabric-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon,
|
||||
.bootstrap-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon,
|
||||
.highcontrast .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon {
|
||||
.highcontrast .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon,
|
||||
.material3-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon {
|
||||
color: #dfdfdf;
|
||||
}
|
||||
|
||||
|
|
@ -173,7 +179,8 @@
|
|||
.material-dark .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div,
|
||||
.fabric-dark .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div,
|
||||
.bootstrap-dark .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div,
|
||||
.highcontrast .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
|
||||
.highcontrast .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div,
|
||||
.material3-dark .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
|
||||
background-color: #626262;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
"directory": "carousel",
|
||||
"category": "Navigation",
|
||||
"ftName": "carousel",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default",
|
||||
|
|
@ -16,7 +17,7 @@
|
|||
"template"
|
||||
]
|
||||
},
|
||||
"description": "This example demonstrates the simple slide show of images using Syncfusion JavaScript Carousel component."
|
||||
"description": "This example demonstrates a simple slide show of images using Syncfusion JavaScript Carousel component."
|
||||
},
|
||||
{
|
||||
"url": "data-binding",
|
||||
|
|
@ -66,6 +67,22 @@
|
|||
},
|
||||
"description": "This example demonstrates the simple slide show of images using Syncfusion JavaScript Carousel component."
|
||||
},
|
||||
{
|
||||
"url": "indicator-type",
|
||||
"name": "Indicator Type",
|
||||
"category": "Carousel",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"Carousel": [
|
||||
"indicatorsType",
|
||||
"items"
|
||||
],
|
||||
"CarouselItem": [
|
||||
"template"
|
||||
]
|
||||
},
|
||||
"description": "This example showcases the available indicator types and its functionalities in Syncfusion JavaScript Carousel component."
|
||||
},
|
||||
{
|
||||
"url": "keyboard-navigation",
|
||||
"name": "Keyboard Navigation",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Chart.Inject(
|
|||
/**
|
||||
* Sample for Accumulation Distribution Indicator
|
||||
*/
|
||||
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chart: Chart = new Chart({
|
||||
|
|
|
|||
|
|
@ -17,12 +17,12 @@
|
|||
<code>AreaSeries</code> module using <code>Chart.Inject(AreaSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the area series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.
|
||||
More information on the empty points can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/working-with-data/#empty-points">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -50,7 +50,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
//Initializing Chart title
|
||||
title: 'Data Consumption',
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
tooltip: { enable: true, format: '${point.x} : <b>${point.y}' },
|
||||
tooltip: { enable: true, format: '${point.x} : <b>${point.y}</b>' },
|
||||
legendSettings: { enableHighlight: true },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<code>AreaSeries</code> module using <code>Chart.Inject(AreaSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the area series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.
|
||||
More information on the negative points can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/working-with-data/#empty-points">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
xName: 'x', border: { width: 2 },
|
||||
width: 2,
|
||||
yName: 'y',
|
||||
name: 'Company c',marker: { visible:true, isFilled : true , width : 5 , height : 5 , shape : "Rectangle"},
|
||||
name: 'Company C',marker: { visible:true, isFilled : true , width : 5 , height : 5 , shape : "Rectangle"},
|
||||
opacity: 0.75,
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -51,8 +51,8 @@
|
|||
<code>Chart.Inject(MultiColoredAreaSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the area series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.
|
||||
More information on the multi-colored area series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/area/#multicolored-area">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the area series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/area">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the bar series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#bar-chart">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/bar">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {
|
|||
Crosshair, LineSeries, BollingerBands, ChartTheme, RangeAreaSeries
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { chartValue } from './financial-data';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { Browser} from '@syncfusion/ej2-base';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, RangeAreaSeries,
|
||||
BollingerBands
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
<code>BoxAndWhiskerSeries</code> module using <code>Chart.Inject(BoxAndWhiskerSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on this series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/other-types/#customization-of-box-and-whisker-series">documentation section</a>.
|
||||
More information on the box and whisker series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/box-whisker">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@ import { Browser } from '@syncfusion/ej2/base';
|
|||
'#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];
|
||||
let bootstrapColors: string[] = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',
|
||||
'#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];
|
||||
let fluentColors: string[] = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B', '#6E7A89', '#D4515C', '#E6AF5D', '#639751',
|
||||
let fluentColors: string[] = ['#1AC9E6', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B', '#6E7A89', '#D4515C', '#E6AF5D', '#639751',
|
||||
'#9D4D69'];
|
||||
let fluentDarkColors: string[] = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C', '#6E7A89', '#EA6266', '#EBA844', '#26BC7A',
|
||||
let fluentDarkColors: string[] = ['#1AC9E6', '#2A72D5', '#43B786', '#584EC6', '#E85F9C', '#6E7A89', '#EA6266', '#EBA844', '#26BC7A',
|
||||
'#BC4870'];
|
||||
let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the bubble series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#bubble-chart">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/bubble">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,8 @@ import { Chart, BubbleSeries, Tooltip, IPointRenderEventArgs, DataLabel } from '
|
|||
import { ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors, bubbleFabricColors, pointFabricColors, pointMaterialDarkColors, bubbleMaterialDarkColors, bubbleMaterialColors, pointMaterialColors, bubbleBootstrap5DarkColors, pointBootstrap5DarkColors, bubbleBootstrap5Colors, pointBootstrap5Colors, bubbleBootstrapColors, pointBootstrapColors, bubbleHighContrastColors, pointHighContrastColors, bubbleFluentDarkColors, pointFluentDarkColors, bubbleFluentColors, pointFluentColors, bubbleTailwindDarkColors, pointTailwindDarkColors, bubbleTailwindColors, pointTailwindColors } from './theme-color';
|
||||
import { bubbleFabricColors, pointFabricColors, pointMaterialDarkColors, bubbleMaterialDarkColors, bubbleMaterialColors, pointMaterialColors, bubbleBootstrap5DarkColors, pointBootstrap5DarkColors, bubbleBootstrap5Colors, pointBootstrap5Colors, bubbleBootstrapColors, pointBootstrapColors, bubbleHighContrastColors, pointHighContrastColors, bubbleFluentDarkColors, pointFluentDarkColors, bubbleFluentColors, pointFluentColors, bubbleTailwindDarkColors, pointTailwindDarkColors, bubbleTailwindColors, pointTailwindColors, bubbleMaterial3Colors, pointMaterial3Colors, bubbleMaterial3DarkColors, pointMaterial3DarkColors} from './theme-color';
|
||||
Chart.Inject(BubbleSeries, Tooltip, DataLabel);
|
||||
|
||||
let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'material';
|
||||
|
|
@ -49,6 +48,14 @@ let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
args.fill = bubbleTailwindColors[args.point.index % 10];
|
||||
args.border.color = pointTailwindColors[args.point.index % 10];
|
||||
}
|
||||
else if (selectedTheme === 'material3') {
|
||||
args.fill = bubbleMaterial3Colors[args.point.index % 10];
|
||||
args.border.color = pointMaterial3Colors[args.point.index % 10];
|
||||
}
|
||||
else if (selectedTheme === 'material3-dark') {
|
||||
args.fill = bubbleMaterial3DarkColors[args.point.index % 10];
|
||||
args.border.color = pointMaterial3DarkColors[args.point.index % 10];
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<div class="control-section">
|
||||
<div id="title" align="center" style="font-size: 15px; font-style: normal;font-family: 'Segoe UI'; font-weight: 500;">AAPL Historical</div>
|
||||
<br>
|
||||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
|
|
@ -22,8 +20,8 @@
|
|||
<code>CandleSeries</code> module using <code>chart.Inject(CandleSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Candle series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/financial-types/">documentation section</a>.
|
||||
More information on the candle series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/candle">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {
|
|||
Crosshair, StripLine, IAxisLabelRenderEventArgs, ISharedTooltipRenderEventArgs
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
import { chartValue } from './financial-data';
|
||||
Chart.Inject(CandleSeries, StripLine, Category, Tooltip, DateTime, Zoom, ColumnSeries, Logarithmic, Crosshair);
|
||||
let pointColors: string[] = [];
|
||||
|
|
@ -64,6 +64,7 @@ let getLabelText: Function = (value: number): string => {
|
|||
},
|
||||
// custom code end
|
||||
width: Browser.isDevice ? '100%' : '75%', chartArea: { border: { width: 0 } },
|
||||
title: 'AAPL Historical',
|
||||
crosshair: { enable: true, lineType: "None" }
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {
|
|||
Crosshair, StripLine, IAxisLabelRenderEventArgs, ITooltipRenderEventArgs
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { Browser, Fetch } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(CandleSeries, StripLine, Category, Tooltip, DateTime, Zoom, ColumnSeries, Logarithmic, Crosshair);
|
||||
let pointColors: string[] = [];
|
||||
|
||||
|
|
@ -18,10 +18,10 @@ let getLabelText: Function = (value: number): string => {
|
|||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chartData: Object[];
|
||||
let ajax: Ajax = new Ajax('./src/chart/data-source/financial-data.json', 'GET', true);
|
||||
ajax.send().then();
|
||||
// Rendering Dialog on AJAX success
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
let fetchApi: Fetch = new Fetch('./src/chart/data-source/financial-data.json', 'GET');
|
||||
fetchApi.send().then();
|
||||
// Rendering Dialog on Fetch success
|
||||
fetchApi.onSuccess = (data: string): void => {
|
||||
chartData = JSON.parse(data);
|
||||
chartData.map((data: Object) => {
|
||||
// tslint:disable-next-line:no-string-literal
|
||||
|
|
|
|||
|
|
@ -35,10 +35,10 @@
|
|||
}
|
||||
|
||||
#fluent-gradient-chart stop {
|
||||
stop-color: #614570;
|
||||
stop-color: #1AC9E6;
|
||||
}
|
||||
#fluent-dark-gradient-chart stop {
|
||||
stop-color: #8AB113;
|
||||
stop-color: #1AC9E6;
|
||||
}
|
||||
|
||||
#highcontrast-gradient-chart stop {
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
|
||||
#bootstrap5-gradient-chart stop {
|
||||
stop-color: #262E0B;
|
||||
stop-color: #6355C7;
|
||||
}
|
||||
|
||||
#material-dark-gradient-chart stop {
|
||||
|
|
@ -70,7 +70,15 @@
|
|||
}
|
||||
|
||||
#bootstrap5-dark-gradient-chart stop {
|
||||
stop-color: #5ECB9B;
|
||||
stop-color: #8F80F4;
|
||||
}
|
||||
|
||||
#material3-gradient-chart stop {
|
||||
stop-color: #6355C7;
|
||||
}
|
||||
|
||||
#material3-dark-gradient-chart stop {
|
||||
stop-color: #4EAAFF;
|
||||
}
|
||||
|
||||
.chart-gradient stop[offset="0"] {
|
||||
|
|
@ -140,5 +148,13 @@
|
|||
<stop offset="0"></stop>
|
||||
<stop offset="1"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="material3-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0"></stop>
|
||||
<stop offset="1"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="material3-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0"></stop>
|
||||
<stop offset="1"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ Chart.Inject(AreaSeries, DateTime);
|
|||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
let theme: ChartTheme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
let themes : string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast', 'Fluent', 'FluentDark'];
|
||||
let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4', '#614570', '#8AB113'];
|
||||
let themes : string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast', 'fluent', 'fluentdark', 'material3', 'material3dark'];
|
||||
let borderColor : string[] = ['#6355C7', '#8F80F4', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4', '#1AC9E6', '#1AC9E6', '#6355C7', '#4EAAFF'];
|
||||
let fill : string = 'url(#' + selectedTheme + '-gradient-chart)';
|
||||
|
||||
let chart: Chart;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#column-chart">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/column">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#column-chart">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/column">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align='center' style="width:92%"></div>
|
||||
<div id="container" align='center'></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { ChartTheme, Chart, LineSeries, HiloOpenCloseSeries, Crosshair, DateTime, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Crosshair, HiloOpenCloseSeries);
|
||||
import { ChartTheme, Chart, LineSeries, HiloOpenCloseSeries, Zoom, Crosshair, DateTime, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Crosshair, HiloOpenCloseSeries, Zoom);
|
||||
import { axesData } from './financial-data';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
|
|
@ -65,6 +65,11 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
* Initialize the crosshair
|
||||
*/
|
||||
crosshair: { enable: true },
|
||||
zoomSettings: {
|
||||
enablePinchZooming: true,
|
||||
enableSelectionZooming: true,
|
||||
mode: 'X'
|
||||
},
|
||||
legendSettings: { visible: false },
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
//Initializing Chart title
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@
|
|||
<code>Chart.Inject(LineSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the line series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#line-chart">documentation section</a>.
|
||||
More information on the dashed line series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/line/#series-customization">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Category,Crosshair, ChartAnn
|
|||
tooltip: {
|
||||
enable: true,
|
||||
shared: true,
|
||||
format: '${point.x} : <b>${point.y}',
|
||||
format: '${point.x} : <b>${point.y}</b>',
|
||||
header: '<b>Fruits Production</b>'
|
||||
},
|
||||
crosshair: {
|
||||
|
|
@ -108,9 +108,9 @@ Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Category,Crosshair, ChartAnn
|
|||
args.chart.annotations[0].content = '<div style="color:black; font-weight:bold;">Actual</div>';
|
||||
args.chart.annotations[1].content = '<div style="color:black; font-weight:bold;">Forecast</div>';
|
||||
let selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'material';
|
||||
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
|
||||
replace(/-dark/i, "Dark") as ChartTheme;
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if (selectedTheme && selectedTheme.indexOf('fabric-dark') > -1) {
|
||||
annotationColor = 'dark'
|
||||
} else if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
|
||||
|
|
@ -137,6 +137,12 @@ Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Category,Crosshair, ChartAnn
|
|||
annotationColor = 'dark'
|
||||
} else if (selectedTheme === 'tailwind') {
|
||||
annotationColor = 'light'
|
||||
}
|
||||
else if (selectedTheme === 'material3-dark') {
|
||||
annotationColor = 'dark';
|
||||
}
|
||||
else if (selectedTheme === 'material3') {
|
||||
annotationColor = 'light';
|
||||
} else {
|
||||
annotationColor = 'light'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
<div class="control-section">
|
||||
<div id="dataediting" align='center' style="width:92%"></div>
|
||||
<div id="dataediting" align='center'></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
The Blazor Charts data label template feature allows you to change the appearance and behavior of the data label for each data point using the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/dataLabelSettings/#template">template</a> property in <code>ChartDataLabel</code>.
|
||||
The TypeScript Charts data label template feature allows you to change the appearance and behavior of the data label for each data point using the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/dataLabelSettings/#template">template</a> property in <code>ChartDataLabel</code>.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
</div>
|
||||
</script>
|
||||
<script id='Boys-Bootstrap5' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#262E0B;border-radius: 3px;">
|
||||
<div id='templateWrap' style="background-color:#6355C7;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
</div>
|
||||
</script>
|
||||
<script id='Girls-Bootstrap5' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#668E1F;border-radius: 3px;">
|
||||
<div id='templateWrap' style="background-color:#FFB400;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
|
|
@ -219,7 +219,7 @@
|
|||
</div>
|
||||
</script>
|
||||
<script id='Boys-Bootstrap5Dark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#5ECB9B;border-radius: 3px;">
|
||||
<div id='templateWrap' style="background-color:#8F80F4;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
</div>
|
||||
</script>
|
||||
<script id='Girls-Bootstrap5Dark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#A860F1;border-radius: 3px;">
|
||||
<div id='templateWrap' style="background-color:#FFD46D;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
</div>
|
||||
</script>
|
||||
<script id='Boys-Fluent' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#614570;border-radius: 3px;">
|
||||
<div id='templateWrap' style="background-color:#1AC9E6;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
|
|
@ -243,7 +243,7 @@
|
|||
</div>
|
||||
</script>
|
||||
<script id='Girls-Fluent' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#4C6FB1;border-radius: 3px;">
|
||||
<div id='templateWrap' style="background-color:#DA4CB2;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
|
|
@ -251,7 +251,7 @@
|
|||
</div>
|
||||
</script>
|
||||
<script id='Boys-FluentDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#8AB113;border-radius: 3px;">
|
||||
<div id='templateWrap' style="background-color:#1AC9E6;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
|
|
@ -259,7 +259,39 @@
|
|||
</div>
|
||||
</script>
|
||||
<script id='Girls-FluentDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#2A72D5;border-radius: 3px;">
|
||||
<div id='templateWrap' style="background-color:#DA4CB2;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png'/>
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Boys-Material3' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#6355C7;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Girls-Material3' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#00AEE0;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png'/>
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Boys-Material3Dark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#4EAAFF;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Girls-Material3Dark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#FA4EAB;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png'/>
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
|
||||
<span>${point.y} </span>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, ColumnSeries, DateTimeCategory, Tooltip, ILoadedEventArgs, ChartTheme,
|
||||
Chart, ColumnSeries, DateTimeCategory, ILoadedEventArgs, ChartTheme,
|
||||
StripLine, ChartAnnotation, DataLabel
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(ColumnSeries, DateTimeCategory, Tooltip, StripLine, ChartAnnotation, DataLabel);
|
||||
Chart.Inject(ColumnSeries, DateTimeCategory, StripLine, ChartAnnotation, DataLabel);
|
||||
|
||||
/**
|
||||
* Sample for Date time category axis
|
||||
|
|
@ -58,9 +58,6 @@ Chart.Inject(ColumnSeries, DateTimeCategory, Tooltip, StripLine, ChartAnnotation
|
|||
width: Browser.isDevice ? '100%' : '75%',
|
||||
legendSettings: { visible: false },
|
||||
title: 'Sales Comparison of a Product',
|
||||
tooltip: {
|
||||
enable: true
|
||||
},
|
||||
annotations: [
|
||||
{
|
||||
x: new Date(2017, 11, 22), y: 90, coordinateUnits: 'Point',
|
||||
|
|
|
|||
|
|
@ -70,6 +70,9 @@ Chart.Inject(ColumnSeries, Category, Legend, Tooltip, SplineSeries, AreaSeries);
|
|||
if(edgeMode.value === 'Spline'){
|
||||
chart.series[0].marker.visible = true;
|
||||
}
|
||||
else {
|
||||
chart.series[0].marker.visible = false;
|
||||
}
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the error bar can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/other-types/#error-bar-chart">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/error-bar">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {
|
|||
Crosshair, LineSeries, EmaIndicator
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { chartValue } from './financial-data';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries,
|
||||
EmaIndicator
|
||||
|
|
@ -55,6 +55,7 @@ Chart.Inject(
|
|||
},
|
||||
crosshair: { enable: true, lineType: 'Vertical' },
|
||||
zoomSettings: {
|
||||
enablePan: true,
|
||||
enableSelectionZooming: true,
|
||||
mode: 'X',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
<code>ColumnSeries</code> module using <code>Chart.Inject(ColumnSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#column-chart">documentation section</a>.
|
||||
More information on the grouped column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/column/#grouped-column">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<div class="control-section">
|
||||
<div id="title" align="center" style="font-size: 15px; font-style: normal;font-family: 'Segoe UI'; font-weight: 500;">AAPL Historical</div>
|
||||
<br>
|
||||
<div id="container" align='center'></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
|
|
@ -23,8 +21,8 @@
|
|||
<code>HiloOpenCloseSeries</code> module using <code>chart.Inject(HiloOpenCloseSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Hilo Open Close series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/financial-types/">documentation section</a>.
|
||||
More information on the HILO Open Close series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/high-low-open-close">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
crosshair: {
|
||||
enable: true, lineType: 'Vertical',
|
||||
},
|
||||
title: 'AAPL Historical',
|
||||
legendSettings: { visible: false }, width: Browser.isDevice ? '100%' : '75%',
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
<code>HiloSeries</code> module using <code>chart.Inject(HiloSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Hilo series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/financial-types/">documentation section</a>.
|
||||
More information on the HILO series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/high-low">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {
|
|||
Crosshair, ChartTheme
|
||||
} from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(HiloSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair);
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
import { chartValue } from './financial-data';
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the histogram series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/other-types/#histogram-series">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/histogram">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -18,14 +18,14 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
"#b91c52"];
|
||||
let highContrastColors: string[] = ["#79ECE4", "#E98272", "#DFE6B6", "#C6E773", "#BA98FF", "#FA83C3", "#00C27A", "#43ACEF", "#D681EF",
|
||||
"#D8BC6E"];
|
||||
let bootstrap5Colors: string[] = ["#262E0B", "#668E1F", "#AF6E10", "#862C0B", "#1F2D50", "#64680B", "#311508", "#4C4C81", "#0C7DA0",
|
||||
"#862C0B"];
|
||||
let bootstrap5DarkColors: string[] = ["#5ECB9B", "#A860F1", "#EBA844", "#557EF7", "#E9599B", "#BFC529", "#3BC6CF", "#7A68EC", "#74B706",
|
||||
"#EA6266"];
|
||||
let fluentColors: string[] = ["#614570", "#4C6FB1", "#CC6952", "#3F579A", "#4EA09B", "#6E7A89", "#D4515C", "#E6AF5D", "#639751",
|
||||
"#9D4D69"];
|
||||
let fluentDarkColors: string[] = ["#8AB113", "#2A72D5", "#43B786", "#584EC6", "#E85F9C", "#6E7A89", "#EA6266", "#EBA844", "#26BC7A",
|
||||
"#BC4870"];
|
||||
let bootstrap5Colors: string[] = ["#6355C7", "#FFB400", "#2196F5", "#F7523F", "#963C70", "#4BE0BC", "#FD7400", "#C9E422", "#0C7DA0",
|
||||
"#162F88"];
|
||||
let bootstrap5DarkColors: string[] = ["#8F80F4", "#FFD46D", "#6CBDFF", "#FF7F71", "#FF6DB3", "#63F5D2", "#FCAA65", "#ECFF77", "#EF8EFF",
|
||||
"#5F82FD"];
|
||||
let fluentColors: string[] = ["#1AC9E6", "#DA4CB2", "#EDBB40", "#AF4BCF", "#FF7266", "#1BD565", "#EE993D", "#5887FF", "#EC548D",
|
||||
"#7D39C0"];
|
||||
let fluentDarkColors: string[] = ["#1AC9E6", "#DA4CB2", "#EDBB40", "#AF4BCF", "#FF7266", "#1BD565", "#EE993D", "#5887FF", "#EC548D",
|
||||
"#7D39C0"];
|
||||
let tailwindColors: string[] = ["#5A61F6", "#65A30D", "#334155", "#14B8A6", "#8B5CF6", "#0369A1", "#F97316", "#9333EA", "#F59E0B",
|
||||
"#15803D"];
|
||||
let tailwindDarkColors: string[] = ["#8B5CF6", "#22D3EE", "#F87171", "#4ADE80", "#E879F9", "#FCD34D", "#F97316", "#2DD4BF", "#F472B6",
|
||||
|
|
@ -33,6 +33,9 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
var fabricDark: string[] = ["#4472C4", "#ED7D31", "#FFC000", "#70AD47"];
|
||||
var bootstrap4Colors: string[] = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6','#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];
|
||||
var bootstrapdarkColors: string[] = ["#a16ee5", "#f7ce69", "#55a5c2", "#7ddf1e", "#ff6ea6", "#7953ac", "#b99b4f", "#407c92", "#5ea716", "#b91c52"];
|
||||
let material3Colors: string[] = ["#6355C7", "#00AEE0", "#FFB400", "#F7523F", "#963C70", "#FD7400", "#4BE0BC", "#2196F5", "#DE3D8A", "#162F88"];
|
||||
let material3DarkColors: string[] = ["#4EAAFF", "#FA4EAB", "#FFF500", "#17EA58", "#38FFE7",
|
||||
"#FF9E45", "#B3F32F", "#B93CE4", "#FC5664", "#9B55FF"];
|
||||
|
||||
let FontColor: string = "#353535";
|
||||
let seriesIndex: number = 0;
|
||||
|
|
@ -286,6 +289,14 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
FillColors = fluentDarkColors;
|
||||
TextColor = "#FFFFFF";
|
||||
}
|
||||
else if (args.chart.theme === 'Material3') {
|
||||
FillColors = material3Colors;
|
||||
TextColor = "#000000";
|
||||
}
|
||||
else if (args.chart.theme === 'Material3Dark') {
|
||||
FillColors = material3DarkColors;
|
||||
TextColor = "#FFFFFF";
|
||||
}
|
||||
|
||||
else {
|
||||
FillColors = fluentColors;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div>Min </div>
|
||||
</td>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<input id="datepickermin" type="text" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div>Max </div>
|
||||
</td>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<input id="datepickermax" type="text" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div>Point Length </div>
|
||||
</td>
|
||||
|
|
@ -42,21 +42,17 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates lazy laoding feature in chart. Loads data for chart on demand.
|
||||
This sample illustrates lazy loading feature in chart which loads data on demand.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to load data for chart on demand. Chart will fire the <code>scrollEnd</code> event,
|
||||
in that can udpate the chart with required data based on point length and axis range.
|
||||
</p>
|
||||
<p>
|
||||
ScrollBar is enabled in the sample and ScrollBar module injected to the chart.
|
||||
In this example, you can see how to load data for the chart on demand. The chart will fire the <code>scrollEnd</code> event, and in that event, we can update the chart with the required data based on the point length and axis range. The scrollbar in the chart can be customized using the <code>height</code>, <code>trackColor</code>, <code>trackRadius</code>, <code>scrollbarRadius</code>, <code>scrollbarColor</code>, <code>enableZoom</code>, and <code>gripColor</code> properties in <code>scrollbarSettings</code>.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use lazy laoding need to
|
||||
Chart component features are segregated into individual feature-wise modules. To use lazy loading need to
|
||||
inject <code>ScrollBar</code> and <code>Zoom</code> module.
|
||||
<code>Chart.Inject(ScrollBar, Zoom)</code> method.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ Chart.Inject(DateTime, ScrollBar, Zoom, LineSeries, Tooltip);
|
|||
let intl: Internationalization = new Internationalization();
|
||||
let chart: Chart = new Chart({
|
||||
primaryXAxis: {
|
||||
title: 'Day',
|
||||
valueType: 'DateTime',
|
||||
edgeLabelPlacement: 'Shift',
|
||||
skeleton: 'yMMM',
|
||||
|
|
@ -27,7 +26,9 @@ Chart.Inject(DateTime, ScrollBar, Zoom, LineSeries, Tooltip);
|
|||
maximum: new Date(2014, 0, 1)
|
||||
},
|
||||
enable: true,
|
||||
pointsLength: 1000
|
||||
pointsLength: 1000,
|
||||
enableZoom: false,
|
||||
height: 14
|
||||
}
|
||||
},
|
||||
primaryYAxis: {
|
||||
|
|
@ -37,12 +38,12 @@ Chart.Inject(DateTime, ScrollBar, Zoom, LineSeries, Tooltip);
|
|||
series: [{
|
||||
dataSource: GetDateTimeData(new Date(2009, 0, 1), new Date(2009, 8, 1)),
|
||||
xName: 'x', yName: 'y',
|
||||
type: 'Line', animation: { enable: false },
|
||||
type: 'Line', animation: { enable: false }
|
||||
}],
|
||||
height: '450',
|
||||
title: 'Network Load',
|
||||
tooltip: { enable: true, shared: true , header : '<b>${point.x}</b>', format : 'Server load : <b>${point.y}</b>'},
|
||||
legendSettings: { visible: true },
|
||||
legendSettings: { visible: true },
|
||||
scrollEnd: (args: IScrollEventArgs) => {
|
||||
if (lazymode.value === 'Range') {
|
||||
chart.series[0].dataSource = GetDateTimeData(args.currentRange.minimum as Date, args.currentRange.maximum as Date);
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@
|
|||
<code>Chart.Inject(MultiColoredLineSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the line series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#line-chart">documentation section</a>.
|
||||
More information on the multi-colored line series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/line/#multicolored-line">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ Chart.Inject(DateTime, Tooltip, MultiColoredLineSeries);
|
|||
title: 'Particulate Levels in Rainfall',
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: {
|
||||
enable: true, shared: true, enableAnimation: false, header:'<b>Rainfall</b>', format: '${point.x} : <b>${point.y}'
|
||||
enable: true, shared: true, enableAnimation: false, header:'<b>Rainfall</b>', format: '${point.x} : <b>${point.y}</b>'
|
||||
},
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the line series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#line-chart">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/line">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ Chart.Inject(DateTime, Tooltip, ChartAnnotation, MultiColoredLineSeries);
|
|||
title: 'Annual Mean Rainfall in Australia',
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: {
|
||||
enable: true, shared: true, enableAnimation: false,header:'<b>Rainfall</b>', format: '${point.x} : <b>${point.y}'
|
||||
enable: true, shared: true, enableAnimation: false,header:'<b>Rainfall</b>', format: '${point.x} : <b>${point.y}</b>'
|
||||
},
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the line series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/line">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<p>The Charts control supports data binding. The <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/series/#datasource">DataSource</a> property can be assigned either as list of objects or with instance of <code>DataManager</code>.</p>
|
||||
<p>In this demo, the list of objects is assigned as the data source to the Charts control. The chart can be bound to IEnumerable, IQueryable, and ObservableCollection data sources.</p>
|
||||
<br>
|
||||
<p> More information on the Polar series can be found in this
|
||||
<p> More information on the local data binding can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/working-with-data/#local-data">documentation section</a>.</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ Chart.Inject(
|
|||
//Initializing UserInteraction Zoom, Tooltip and Crosshair
|
||||
zoomSettings:
|
||||
{
|
||||
|
||||
enablePan: true,
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {
|
|||
Crosshair, LineSeries, StripLine, MacdIndicator, ColumnSeries, ChartTheme,
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { chartValue } from './financial-data';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries,
|
||||
MacdIndicator, StripLine, ColumnSeries
|
||||
|
|
@ -74,7 +74,7 @@ Chart.Inject(
|
|||
//Initializing User Interaction Zoom, Tooltip and Crosshair
|
||||
zoomSettings:
|
||||
{
|
||||
|
||||
enablePan: true,
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<code>ColumnSeries</code> <code>LineSeries</code> modules using <code>Chart.Inject(ColumnSeries)</code> <code>Chart.Inject(LineSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the series can be found in this
|
||||
More information on the multiple series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-series/#multiple-series">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
|
||||
//Initializing Chart title
|
||||
//Initializing User Interaction Tooltip
|
||||
title: 'Weather Data',
|
||||
tooltip: { enable: true },
|
||||
legendSettings: {
|
||||
visible: false
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
|
||||
<p>
|
||||
More information on the Chart types can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/line/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -4,23 +4,29 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a Pareto chart with line and column series.
|
||||
This sample visualizes the defects in shirts with default pareto series in the chart. Data points are enhanced with marker and tooltip.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure a pareto chart. The pareto chart is used to find the cumulative values of the data in different categories. It is a combination of the column and line series. The initial values are shown in the column chart and the cumulative values are shown in the line chart.
|
||||
</p>
|
||||
<p>
|
||||
In this example, you can see how to render and configure a pareto chart. The pareto chart is used to find the cumulative values of the data in different categories. It is a combination of the column and line series. The initial values are shown in the column chart and the cumulative values are shown in the line chart.
|
||||
<p><code>Tooltip</code> is enabled in this example. To see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
|
||||
The line series in the pareto chart can be customized using the <code>fill</code>, <code>dashArray</code>, <code>width</code>, and <code>marker</code> properties in <code>paretoOptions</code>. Additionally, the secondary axis in the pareto chart can be shown or hidden using the <code>showAxis</code> property in <code>paretoOptions</code>.
|
||||
</p>
|
||||
<p>
|
||||
<code>Tooltip</code> is enabled in this example. To see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
In this example, we have used pareto series with the help of column and line series. To use pareto feature, we need to inject
|
||||
<code>ParetoSeries</code> <code>ColumnSeries</code> <code>LineSeries</code> modules using
|
||||
<code>Chart.Inject(ParetoSeries)</code> <code>Chart.Inject(ColumnSeries)</code> <code>Chart.Inject(LineSeries)</code> method.
|
||||
<code>ParetoSeries</code>, <code>ColumnSeries</code> and <code>LineSeries</code> modules using
|
||||
<code>Chart.Inject(ParetoSeries)</code>, <code>Chart.Inject(ColumnSeries)</code> and <code>Chart.Inject(LineSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/other-types/">documentation section</a>.
|
||||
More information on the pareto series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/pare-to">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { ChartTheme, Chart, ColumnSeries, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { ChartTheme, Chart, ColumnSeries, Legend, Tooltip, ILoadedEventArgs, Highlight } from '@syncfusion/ej2-charts';
|
||||
import { ParetoSeries, Category, LineSeries } from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(ColumnSeries, Category, ParetoSeries, LineSeries, Legend, Tooltip);
|
||||
Chart.Inject(ColumnSeries, Category, ParetoSeries, LineSeries, Legend, Tooltip, Highlight);
|
||||
|
||||
/**
|
||||
* Sample for Pareto chart
|
||||
|
|
@ -42,23 +42,27 @@ Chart.Inject(ColumnSeries, Category, ParetoSeries, LineSeries, Legend, Tooltip);
|
|||
type: 'Pareto',
|
||||
dataSource: [
|
||||
{ x: 'Button Defect', y: 23 }, { x: 'Pocket Defect', y: 16 },
|
||||
{ x: 'Coller Defect', y: 10 }, { x: 'Cuff Defect', y: 7 },
|
||||
{ x: 'Sleeve Defect', y: 6 }
|
||||
{ x: 'Collar Defect', y: 10 }, { x: 'Cuff Defect', y: 7 },
|
||||
{ x: 'Sleeve Defect', y: 6 }, { x: 'Other Defect', y: 2}
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'Defect', width: 2,
|
||||
marker: {
|
||||
visible: true
|
||||
xName: 'x', yName: 'y', name: 'Defect', width: 2, opacity: 0.75, columnWidth: 0.4,
|
||||
paretoOptions: {
|
||||
marker: { visible: true, isFilled: true, width: 7, height: 7 },
|
||||
dashArray: '3,2',
|
||||
width: 2
|
||||
},
|
||||
cornerRadius: { topLeft: Browser.isDevice? 4 : 6, topRight: Browser.isDevice ? 4 : 6 }
|
||||
}
|
||||
],
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
//Initializing Chart title
|
||||
title: 'Pareto chart - Defects in Shirts',
|
||||
legendSettings: { visible: false },
|
||||
title: 'Defects in Shirts',
|
||||
legendSettings: { visible: true, enableHighlight: true },
|
||||
//Initializing User Interaction
|
||||
tooltip: {
|
||||
enable: true,
|
||||
shared: false
|
||||
shared: true,
|
||||
format: '${series.name} : <b>${point.y}</b>'
|
||||
},
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
@ -66,6 +70,14 @@ Chart.Inject(ColumnSeries, Category, ParetoSeries, LineSeries, Legend, Tooltip);
|
|||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if (selectedTheme === 'material3') {
|
||||
args.chart.series[0].paretoOptions.fill = '#F7523F';
|
||||
args.chart.series[0].paretoOptions.marker.fill = '#F7523F';
|
||||
}
|
||||
else {
|
||||
args.chart.series[0].paretoOptions.fill = null;
|
||||
args.chart.series[0].paretoOptions.marker.fill = null;
|
||||
}
|
||||
}
|
||||
// custom code end
|
||||
});
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
.e-view.tailwind .first-box-bottom, .e-view.fluent .first-box-bottom,.e-view.material .first-box-bottom,.e-view.bootstrap .first-box-bottom, .e-view.bootstrap5 .first-box-bottom, .e-view.bootstrap4 .first-box-bottom ,.e-view.fabric .first-box-bottom, .e-view.highcontrast .first-box-bottom,
|
||||
.e-view.tailwind .first-box-bottom, .e-view.fluent .second-box-bottom,.e-view.material .second-box-bottom,.e-view.bootstrap .second-box-bottom, .e-view.bootstrap5 .second-box-bottom,.e-view.bootstrap4 .second-box-bottom, .e-view.fabric .second-box-bottom, .e-view.highcontrast .third-box-bottom,
|
||||
.e-view.tailwind .first-box-bottom, .e-view.fluent .third-box-bottom,.e-view.material .third-box-bottom,.e-view.bootstrap .third-box-bottom,.e-view.bootstrap5 .third-box-bottom,.e-view.bootstrap4 .third-box-bottom,.e-view.fabric .third-box-bottom,.e-view.highcontrast .box-left,
|
||||
.e-view.material .first-box-bottom,.e-view.tailwind .first-box-bottom, .e-view.fluent .box-left,.e-view.bootstrap .box-left, .e-view.bootstrap5 .box-left, .e-view.bootstrap4 .box-left,.e-view.fabric .box-left {
|
||||
.e-view.material .first-box-bottom,.e-view.tailwind .first-box-bottom, .e-view.fluent .box-left,.e-view.bootstrap .box-left, .e-view.bootstrap5 .box-left, .e-view.bootstrap4 .box-left,.e-view.fabric .box-left,.e-view.material3 .box-bottom, .e-view.material3 .first-box-bottom , .e-view.material3 .second-box-bottom,.e-view.material3 .third-box-bottom, .e-view.material3 .box-left {
|
||||
position: relative;
|
||||
background: #fdf7e7;
|
||||
border: 1.5px solid black;
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
.e-view.material-dark .first-box-bottom,.e-view.tailwind-dark .first-box-bottom, .e-view.fluent-dark .first-box-bottom,.e-view.bootstrap-dark .first-box-bottom, .e-view.bootstrap5-dark .first-box-bottom ,.e-view.fabric-dark .first-box-bottom, .e-view.highcontrast .second-box-bottom,
|
||||
.e-view.material-dark .second-box-bottom, .e-view.fluent-dark .second-box-bottom,.e-view.bootstrap-dark .second-box-bottom, .e-view.bootstrap5-dark .second-box-bottom, .e-view.fabric-dark .second-box-bottom, .e-view.highcontrast .third-box-bottom,
|
||||
.e-view.material-dark .third-box-bottom, .e-view.fluent-dark .third-box-bottom,.e-view.bootstrap-dark .third-box-bottom,.e-view.bootstrap5-dark .third-box-bottom,.e-view.fabric-dark .third-box-bottom,.e-view.highcontrast .box-left,
|
||||
.e-view.material-dark .box-left, .e-view.fluent-dark .box-left,.e-view.bootstrap-dark .box-left, .e-view.bootstrap5-dark .box-left, .e-view.fabric-dark .box-left {
|
||||
.e-view.material-dark .box-left, .e-view.fluent-dark .box-left,.e-view.bootstrap-dark .box-left, .e-view.bootstrap5-dark .box-left, .e-view.fabric-dark .box-left,.e-view.material3-dark .box-bottom, .e-view.material3-dark .first-box-bottom , .e-view.material3-dark .second-box-bottom,.e-view.material3-dark .third-box-bottom, .e-view.material3-dark .box-left{
|
||||
position: relative;
|
||||
background: black;
|
||||
border: 1.5px solid black;
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.e-view.highcontrast .box-bottom:after, .e-view.tailwind .box-bottom:after,.e-view.fluent .box-bottom:after,.e-view.material .box-bottom:after,.e-view.bootstrap .box-bottom:after,.e-view.bootstrap5 .box-bottom:after, .e-view.bootstrap4 .box-bottom:after, .e-view.fabric .box-bottom:after {
|
||||
.e-view.highcontrast .box-bottom:after, .e-view.tailwind .box-bottom:after,.e-view.fluent .box-bottom:after,.e-view.material .box-bottom:after,.e-view.bootstrap .box-bottom:after,.e-view.bootstrap5 .box-bottom:after, .e-view.bootstrap4 .box-bottom:after, .e-view.fabric .box-bottom:after, .e-view.material3 .box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
margin-bottom: -1px;
|
||||
border-bottom-color: #fdf7e7;
|
||||
}
|
||||
.e-view.highcontrast .box-bottom:after,.e-view.tailwind-dark .box-bottom:after,.e-view.fluent-dark .box-bottom:after,.e-view.material-dark .box-bottom:after,.e-view.bootstrap-dark .box-bottom:after,.e-view.bootstrap5-dark .box-bottom:after, .e-view.bootstrap4-dark .box-bottom:after, .e-view.fabric-dark .box-bottom:after {
|
||||
.e-view.highcontrast .box-bottom:after,.e-view.tailwind-dark .box-bottom:after,.e-view.fluent-dark .box-bottom:after,.e-view.material-dark .box-bottom:after,.e-view.bootstrap-dark .box-bottom:after,.e-view.bootstrap5-dark .box-bottom:after, .e-view.bootstrap4-dark .box-bottom:after, .e-view.fabric-dark .box-bottom:after, .e-view.material3-dark .box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
margin-left: -7px;
|
||||
margin-bottom: 0.5px;
|
||||
}
|
||||
.e-view.highcontrast .first-box-bottom:after,.e-view.tailwind .first-box-bottom:after,.e-view.fluent .first-box-bottom:after,.e-view.material .first-box-bottom:after,.e-view.bootstrap .first-box-bottom:after,.e-view.bootstrap5 .first-box-bottom:after,.e-view.bootstrap4 .first-box-bottom:after, .e-view.fabric .first-box-bottom:after {
|
||||
.e-view.highcontrast .first-box-bottom:after,.e-view.tailwind .first-box-bottom:after,.e-view.fluent .first-box-bottom:after,.e-view.material .first-box-bottom:after,.e-view.bootstrap .first-box-bottom:after,.e-view.bootstrap5 .first-box-bottom:after,.e-view.bootstrap4 .first-box-bottom:after, .e-view.fabric .first-box-bottom:after, .e-view.material3 .first-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
margin-bottom: -1px;
|
||||
border-bottom-color: #fdf7e7;
|
||||
}
|
||||
.e-view.highcontrast .first-box-bottom:after,.e-view.tailwind-dark .first-box-bottom:after,.e-view.fluent-dark .first-box-bottom:after,.e-view.material-dark .first-box-bottom:after,.e-view.bootstrap-dark .first-box-bottom:after,.e-view.bootstrap5-dark .first-box-bottom:after,.e-view.bootstrap4-dark .first-box-bottom:after, .e-view.fabric-dark .first-box-bottom:after {
|
||||
.e-view.highcontrast .first-box-bottom:after,.e-view.tailwind-dark .first-box-bottom:after,.e-view.fluent-dark .first-box-bottom:after,.e-view.material-dark .first-box-bottom:after,.e-view.bootstrap-dark .first-box-bottom:after,.e-view.bootstrap5-dark .first-box-bottom:after,.e-view.bootstrap4-dark .first-box-bottom:after, .e-view.fabric-dark .first-box-bottom:after, .e-view.material3-dark .first-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
margin-left: -7px;
|
||||
margin-bottom: 0.5px;
|
||||
}
|
||||
.e-view.highcontrast .second-box-bottom:after,.e-view.tailwind .second-box-bottom:after,.e-view.fluent .second-box-bottom:after,.e-view.material .second-box-bottom:after, .e-view.bootstrap .second-box-bottom:after, .e-view.bootstrap5 .second-box-bottom:after,.e-view.bootstrap4 .second-box-bottom:after, .e-view.fabric .second-box-bottom:after {
|
||||
.e-view.highcontrast .second-box-bottom:after,.e-view.tailwind .second-box-bottom:after,.e-view.fluent .second-box-bottom:after,.e-view.material .second-box-bottom:after, .e-view.bootstrap .second-box-bottom:after, .e-view.bootstrap5 .second-box-bottom:after,.e-view.bootstrap4 .second-box-bottom:after, .e-view.fabric .second-box-bottom:after, .e-view.material3 .second-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
margin-bottom: -1px;
|
||||
border-bottom-color: #fdf7e7;
|
||||
}
|
||||
.e-view.highcontrast .second-box-bottom:after,.e-view.tailwind-dark .second-box-bottom:after,.e-view.fluent-dark .second-box-bottom:after,.e-view.material-dark .second-box-bottom:after, .e-view.bootstrap-dark .second-box-bottom:after, .e-view.bootstrap5-dark .second-box-bottom:after,.e-view.bootstrap4-dark .second-box-bottom:after, .e-view.fabric-dark .second-box-bottom:after {
|
||||
.e-view.highcontrast .second-box-bottom:after,.e-view.tailwind-dark .second-box-bottom:after,.e-view.fluent-dark .second-box-bottom:after,.e-view.material-dark .second-box-bottom:after, .e-view.bootstrap-dark .second-box-bottom:after, .e-view.bootstrap5-dark .second-box-bottom:after,.e-view.bootstrap4-dark .second-box-bottom:after, .e-view.fabric-dark .second-box-bottom:after, .e-view.material3-dark .second-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
margin-left: -7px;
|
||||
margin-bottom: 0.5px;
|
||||
}
|
||||
.e-view.highcontrast .third-box-bottom:after,.e-view.tailwind .third-box-bottom:after ,.e-view.fluent .third-box-bottom:after ,.e-view.material .third-box-bottom:after ,.e-view.bootstrap .third-box-bottom:after ,.e-view.bootstrap5 .third-box-bottom:after , .e-view.bootstrap4 .third-box-bottom:after , .e-view.fabric .third-box-bottom:after {
|
||||
.e-view.highcontrast .third-box-bottom:after,.e-view.tailwind .third-box-bottom:after ,.e-view.fluent .third-box-bottom:after ,.e-view.material .third-box-bottom:after ,.e-view.bootstrap .third-box-bottom:after ,.e-view.bootstrap5 .third-box-bottom:after , .e-view.bootstrap4 .third-box-bottom:after , .e-view.fabric .third-box-bottom:after,.e-view.material3 .third-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6px;
|
||||
left: 50%;
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
margin-bottom: -1px;
|
||||
border-bottom-color: #fdf7e7;
|
||||
}
|
||||
.e-view.highcontrast .third-box-bottom:after ,.e-view.tailwind-dark .third-box-bottom:after ,.e-view.fluent-dark .third-box-bottom:after ,.e-view.material-dark .third-box-bottom:after ,.e-view.bootstrap-dark .third-box-bottom:after ,.e-view.bootstrap5-dark .third-box-bottom:after , .e-view.bootstrap4-dark .third-box-bottom:after , .e-view.fabric-dark .third-box-bottom:after {
|
||||
.e-view.highcontrast .third-box-bottom:after ,.e-view.tailwind-dark .third-box-bottom:after ,.e-view.fluent-dark .third-box-bottom:after ,.e-view.material-dark .third-box-bottom:after ,.e-view.bootstrap-dark .third-box-bottom:after ,.e-view.bootstrap5-dark .third-box-bottom:after , .e-view.bootstrap4-dark .third-box-bottom:after , .e-view.fabric-dark .third-box-bottom:after, .e-view.material3-dark .third-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6px;
|
||||
left: 50%;
|
||||
|
|
@ -184,13 +184,13 @@
|
|||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.e-view.highcontrast .box-left:after,.e-view.tailwind .box-left:after,.e-view.fluent .box-left:after,.e-view.material .box-left:after,.e-view.bootstrap .box-left:after,.e-view.bootstrap5 .box-left:after, .e-view.bootstrap4 .box-left:after, .e-view.fabric .box-left:after {
|
||||
.e-view.highcontrast .box-left:after,.e-view.tailwind .box-left:after,.e-view.fluent .box-left:after,.e-view.material .box-left:after,.e-view.bootstrap .box-left:after,.e-view.bootstrap5 .box-left:after, .e-view.bootstrap4 .box-left:after, .e-view.fabric .box-left:after, .e-view.material3 .box-left:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.5px;
|
||||
margin-right: -1px;
|
||||
border-right-color: #fdf7e7;
|
||||
}
|
||||
.e-view.highcontrast .box-left:after,.e-view.tailwind-dark .box-left:after,.e-view.fluent-dark .box-left:after,.e-view.material-dark .box-left:after,.e-view.bootstrap-dark .box-left:after,.e-view.bootstrap5-dark .box-left:after, .e-view.bootstrap4-dark .box-left:after, .e-view.fabric-dark .box-left:after {
|
||||
.e-view.highcontrast .box-left:after,.e-view.tailwind-dark .box-left:after,.e-view.fluent-dark .box-left:after,.e-view.material-dark .box-left:after,.e-view.bootstrap-dark .box-left:after,.e-view.bootstrap5-dark .box-left:after, .e-view.bootstrap4-dark .box-left:after, .e-view.fabric-dark .box-left:after, .e-view.material3-dark .box-left:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.5px;
|
||||
margin-right: -1px;
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
margin-right: 1px;
|
||||
}
|
||||
.e-view.highcontrast .box-top,.e-view.tailwind .box-top,.e-view.fluent .box-top,.e-view.material .box-top,.e-view.bootstrap .box-top,.e-view.bootstrap5 .box-top ,.e-view.bootstrap4 .box-top , .e-view.fabric .box-top,
|
||||
.e-view.highcontrast .box-top-left,.e-view.tailwind .box-top,.e-view.fluent .box-top-left,.e-view.material .box-top-left,.e-view.bootstrap .box-top-left,.e-view.bootstrap5 .box-top-left, .e-view.bootstrap4 .box-top-left, .e-view.fabric .box-top-left {
|
||||
.e-view.highcontrast .box-top-left,.e-view.tailwind .box-top,.e-view.fluent .box-top-left,.e-view.material .box-top-left,.e-view.bootstrap .box-top-left,.e-view.bootstrap5 .box-top-left, .e-view.bootstrap4 .box-top-left, .e-view.fabric .box-top-left,.e-view.material3 .box-top, .e-view.material3 .box-top-left {
|
||||
position: relative;
|
||||
color: white;
|
||||
background: black;
|
||||
|
|
@ -214,7 +214,7 @@
|
|||
color: white;
|
||||
}
|
||||
.e-view.highcontrast .box-top,.e-view.tailwind-dark .box-top,.e-view.fluent-dark .box-top,.e-view.material-dark .box-top,.e-view.bootstrap-dark .box-top,.e-view.bootstrap5-dark .box-top ,.e-view.bootstrap4-dark .box-top , .e-view.fabric-dark .box-top,
|
||||
.e-view.highcontrast .box-top-left,.e-view.tailwind-dark .box-top,.e-view.fluent-dark .box-top-left,.e-view.material-dark .box-top-left,.e-view.bootstrap-dark .box-top-left,.e-view.bootstrap5-dark .box-top-left, .e-view.bootstrap4-dark .box-top-left, .e-view.fabric-dark .box-top-left {
|
||||
.e-view.highcontrast .box-top-left,.e-view.tailwind-dark .box-top,.e-view.fluent-dark .box-top-left,.e-view.material-dark .box-top-left,.e-view.bootstrap-dark .box-top-left,.e-view.bootstrap5-dark .box-top-left, .e-view.bootstrap4-dark .box-top-left, .e-view.fabric-dark .box-top-left, .e-view.material3-dark .box-top, .e-view.material3-dark .box-top-left {
|
||||
position: relative;
|
||||
color: white;
|
||||
background: #fdf7e7;
|
||||
|
|
@ -230,7 +230,7 @@
|
|||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.e-view.highcontrast .box-top:after,.e-view.tailwind .box-top:after,.e-view.fluent .box-top:after,.e-view.material .box-top:after, .e-view.bootstrap .box-top:after, .e-view.bootstrap5 .box-top:after, .e-view.bootstrap4 .box-top:after, .e-view.fabric .box-top:after {
|
||||
.e-view.highcontrast .box-top:after,.e-view.tailwind .box-top:after,.e-view.fluent .box-top:after,.e-view.material .box-top:after, .e-view.bootstrap .box-top:after, .e-view.bootstrap5 .box-top:after, .e-view.bootstrap4 .box-top:after, .e-view.fabric .box-top:after,.e-view.material3 .box-top:after {
|
||||
border-color: transparent;
|
||||
border-width: 7.5px;
|
||||
border-top-color:black;
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
margin-right: -7.5px;
|
||||
margin-top: -1.5px;
|
||||
}
|
||||
.e-view.highcontrast .box-top:after,.e-view.tailwind-dark .box-top:after,.e-view.fluent-dark .box-top:after,.e-view.material-dark .box-top:after, .e-view.bootstrap-dark .box-top:after, .e-view.bootstrap5-dark .box-top:after, .e-view.bootstrap4-dark .box-top:after, .e-view.fabric-dark .box-top:after {
|
||||
.e-view.highcontrast .box-top:after,.e-view.tailwind-dark .box-top:after,.e-view.fluent-dark .box-top:after,.e-view.material-dark .box-top:after, .e-view.bootstrap-dark .box-top:after, .e-view.bootstrap5-dark .box-top:after, .e-view.bootstrap4-dark .box-top:after, .e-view.fabric-dark .box-top:after,.e-view.material3-dark .box-top:after {
|
||||
border-color: transparent;
|
||||
border-width: 7.5px;
|
||||
border-top-color: #fdf7e7;
|
||||
|
|
@ -246,21 +246,21 @@
|
|||
margin-right: -7.5px;
|
||||
margin-top: -1.5px;
|
||||
}
|
||||
.e-view.highcontrast .box-top:before, .e-view.tailwind .box-top:before,.e-view.fluent .box-top:before,.e-view.material .box-top:before,.e-view.bootstrap .box-top:before,.e-view.bootstrap5 .box-top:before,.e-view.bootstrap4 .box-top:before , .e-view.fabric .box-top:before {
|
||||
.e-view.highcontrast .box-top:before, .e-view.tailwind .box-top:before,.e-view.fluent .box-top:before,.e-view.material .box-top:before,.e-view.bootstrap .box-top:before,.e-view.bootstrap5 .box-top:before,.e-view.bootstrap4 .box-top:before , .e-view.fabric .box-top:before, .e-view.material3 .box-top:before {
|
||||
border-color: transparent;
|
||||
border-top-color:black;
|
||||
border-width: 8px;
|
||||
right: 50%;
|
||||
margin-right: -8px;
|
||||
}
|
||||
.e-view.highcontrast .box-top:before,.e-view.tailwind-dark .box-top:before,.e-view.fluent-dark .box-top:before,.e-view.material-dark .box-top:before,.e-view.bootstrap-dark .box-top:before,.e-view.bootstrap5-dark .box-top:before,.e-view.bootstrap4-dark .box-top:before , .e-view.fabric-dark .box-top:before {
|
||||
.e-view.highcontrast .box-top:before,.e-view.tailwind-dark .box-top:before,.e-view.fluent-dark .box-top:before,.e-view.material-dark .box-top:before,.e-view.bootstrap-dark .box-top:before,.e-view.bootstrap5-dark .box-top:before,.e-view.bootstrap4-dark .box-top:before , .e-view.fabric-dark .box-top:before ,.e-view.material3-dark .box-top:before{
|
||||
border-color: transparent;
|
||||
border-top-color:#fdf7e7;
|
||||
border-width: 8px;
|
||||
right: 50%;
|
||||
margin-right: -8px;
|
||||
}
|
||||
.e-view.highcontrast .box-top-left:after,.e-view.tailwind .box-top-left:after,.e-view.fluent .box-top-left:after,.e-view.material .box-top-left:after,.e-view.bootstrap .box-top-left:after,.e-view.bootstrap5 .box-top-left:after,.e-view.bootstrap4 .box-top-left:after, .e-view.fabric .box-top-left:after {
|
||||
.e-view.highcontrast .box-top-left:after,.e-view.tailwind .box-top-left:after,.e-view.fluent .box-top-left:after,.e-view.material .box-top-left:after,.e-view.bootstrap .box-top-left:after,.e-view.bootstrap5 .box-top-left:after,.e-view.bootstrap4 .box-top-left:after, .e-view.fabric .box-top-left:after, .e-view.material3 .box-top-left:after{
|
||||
border-color: transparent;
|
||||
border-width: 7.5px;
|
||||
border-top-color: black;
|
||||
|
|
@ -268,7 +268,7 @@
|
|||
margin-right: -7.5px;
|
||||
margin-bottom: -1.5px;
|
||||
}
|
||||
.e-view.highcontrast .box-top-left:after,.e-view.tailwind-dark .box-top-left:after,.e-view.fluent-dark .box-top-left:after,.e-view.material-dark .box-top-left:after,.e-view.bootstrap-dark .box-top-left:after,.e-view.bootstrap5-dark .box-top-left:after,.e-view.bootstrap4-dark .box-top-left:after, .e-view.fabric-dark .box-top-left:after {
|
||||
.e-view.highcontrast .box-top-left:after,.e-view.tailwind-dark .box-top-left:after,.e-view.fluent-dark .box-top-left:after,.e-view.material-dark .box-top-left:after,.e-view.bootstrap-dark .box-top-left:after,.e-view.bootstrap5-dark .box-top-left:after,.e-view.bootstrap4-dark .box-top-left:after, .e-view.fabric-dark .box-top-left:after,.e-view.material3-dark .box-top-left:after{
|
||||
border-color: transparent;
|
||||
border-width: 7.5px;
|
||||
border-top-color: #fdf7e7;
|
||||
|
|
@ -276,14 +276,14 @@
|
|||
margin-right: -7.5px;
|
||||
margin-bottom: -1.5px;
|
||||
}
|
||||
.e-view.highcontrast .box-top-left:before,.e-view.tailwind .box-top-left:before,.e-view.fluent .box-top-left:before,.e-view.material .box-top-left:before,.e-view.bootstrap .box-top-left:before,.e-view.bootstrap5 .box-top-left:before, .e-view.bootstrap4 .box-top-left:before , .e-view.fabric .box-top-left:before {
|
||||
.e-view.highcontrast .box-top-left:before,.e-view.tailwind .box-top-left:before,.e-view.fluent .box-top-left:before,.e-view.material .box-top-left:before,.e-view.bootstrap .box-top-left:before,.e-view.bootstrap5 .box-top-left:before, .e-view.bootstrap4 .box-top-left:before , .e-view.fabric .box-top-left:before, .e-view.material3 .box-top-left:before {
|
||||
border-color: transparent;
|
||||
border-top-color: black;
|
||||
border-width: 8px;
|
||||
right: 20%;
|
||||
margin-right: -8px;
|
||||
}
|
||||
.e-view.highcontrast .box-top-left:before,.e-view.tailwind-dark .box-top-left:before,.e-view.fluent-dark .box-top-left:before,.e-view.material-dark .box-top-left:before,.e-view.bootstrap-dark .box-top-left:before,.e-view.bootstrap5-dark .box-top-left:before, .e-view.bootstrap4-dark .box-top-left:before , .e-view.fabric-dark .box-top-left:before {
|
||||
.e-view.highcontrast .box-top-left:before,.e-view.tailwind-dark .box-top-left:before,.e-view.fluent-dark .box-top-left:before,.e-view.material-dark .box-top-left:before,.e-view.bootstrap-dark .box-top-left:before,.e-view.bootstrap5-dark .box-top-left:before, .e-view.bootstrap4-dark .box-top-left:before , .e-view.fabric-dark .box-top-left:before,.e-view.material3-dark .box-top-left:before {
|
||||
border-color: transparent;
|
||||
border-top-color: #fdf7e7;
|
||||
border-width: 8px;
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ let selectedTheme: string = location.hash.split('/')[1];
|
|||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
let theme: ChartTheme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
let themes : string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast', 'Fluent', 'FluentDark'];
|
||||
let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4', '#614570', '#8AB113'];
|
||||
let themes : string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast', 'fluent', 'fluentdark', 'material3', 'material3dark'];
|
||||
let borderColor : string[] = ['#6355C7', '#8F80F4', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4', '#1AC9E6', '#1AC9E6', '#6355C7', '#4EAAFF'];
|
||||
let fill : string = 'url(#' + selectedTheme + '-gradient-chart)';
|
||||
/**
|
||||
* Sample for annotation in chart
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@
|
|||
<code>PolarSeries</code>, <code>RadarSeries</code> and <code>AreaSeries</code> module using <code>Chart.Inject(PolarSeries, RadarSeries, AreaSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Polar series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
More information on the polar and radar chart with an area series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/polar/#area">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@
|
|||
<code>PolarSeries</code> and <code>RadarSeries</code> module using <code>Chart.Inject(PolarSeries, RadarSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
More information on the polar and radar chart with column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/polar/#column">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,8 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, RadarSeries, Highlight);
|
|||
primaryXAxis: {
|
||||
valueType: 'Category',
|
||||
labelPlacement: 'OnTicks', interval: 1,
|
||||
coefficient: Browser.isDevice ? 80 : 100
|
||||
coefficient: Browser.isDevice ? 80 : 100,
|
||||
labelIntersectAction: Browser.isDevice ? 'Trim' : 'None',
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
|
|
|
|||
|
|
@ -79,8 +79,8 @@
|
|||
<code>Chart.Inject(PolarSeries, RadarSeries, LineSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the polar series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
More information on the polar and radar series with a line type chart series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/polar/#line">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@
|
|||
<code>PolarSeries</code>, <code>RadarSeries</code> and <code>RangeColumnSeries</code> module using <code>Chart.Inject(PolarSeries, RadarSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the range column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
More information on the polar and radar chart with a range column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/polar/#range-column">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@
|
|||
<code>PolarSeries</code>, <code>RadarSeries</code> and <code>ScatterSeries</code> module using <code>Chart.Inject(PolarSeries, RadarSeries, ScatterSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Polar series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
More information on the polar and radar chart with a scatter series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/polar/#scatter">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@
|
|||
<code>PolarSeries</code>, <code>RadarSeries</code> and <code>SplineSeries</code> module using <code>Chart.Inject(PolarSeries, RadarSeries, SplineSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the polar series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
More information on the polar and radar series with a spline type can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/polar/#spline">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@
|
|||
<code>PolarSeries</code>, <code>RadarSeries</code> and <code>StackingAreaSeries</code> module using <code>Chart.Inject(PolarSeries, RadarSeries, StackingAreaSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Numeric axis can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
More information on the polar and radar series with a stacking area type chart can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/polar/#stacked-area">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
<code>PolarSeries</code> and <code>RadarSeries</code> module using <code>Chart.Inject(PolarSeries, RadarSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Polar series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
More information on the polar and radar series with a stacking column type chart can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/polar/#stacked-column">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -79,5 +79,9 @@
|
|||
content: '\e75d';
|
||||
}
|
||||
|
||||
.e-view.material3 .e-print-icon::before, .e-view.material3-dark .e-print-icon::before {
|
||||
content: '\e75d';
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
<code>RangeAreaSeries</code> module using <code>chart.Inject(RangeAreaSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the area series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.
|
||||
More information on the range area series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/range-area">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -56,8 +56,8 @@ import { chartDataValues } from './financial-data';
|
|||
title: 'Temperature Variation by Month',
|
||||
tooltip: { enableMarker:true, enable: true, shared: false, format: 'Temperature : <b>${point.low} - ${point.high}</b>', header :'<b>${point.x}</b>'},
|
||||
seriesRender: (args: ISeriesRenderEventArgs) => {
|
||||
let areathemes: string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast'];
|
||||
let borderColor: string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4'];
|
||||
let areathemes: string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast','fluent', 'fluentdark',];
|
||||
let borderColor: string[] = ['#6355C7', '#8F80F4', '#5A61F6', '#8B5CF6', '#00bdae', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4','#1AC9E6','#1AC9E6'];
|
||||
args.series.border.color = borderColor[areathemes.indexOf(args.series.chart.theme.toLowerCase())];
|
||||
},
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
<code>RangeColumnSeries</code> module using <code>chart.Inject(RangeColumnSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/chart/chart-types/#column-chart">documentation section</a>.
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/column">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
<code>RangeColumnSeries</code> module using <code>chart.Inject(RangeColumnSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#column-chart">documentation section</a>.
|
||||
More information on the range column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/range-column">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
<code>Chart.Inject(RangeStepAreaSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information about the area type series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.
|
||||
More information about the range step area type series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/range-step-area">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ Chart.Inject(
|
|||
//Initializing User Interaction Zoom, Tooltip and Crosshair
|
||||
zoomSettings:
|
||||
{
|
||||
|
||||
enablePan: true,
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
DataManager</a></code> to the <code> dataSource
|
||||
</code> property.</p>
|
||||
<br>
|
||||
<p> More information on the Polar series can be found in this
|
||||
<p> More information on remote data binding can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/working-with-data/#remote-data">documentation section</a>.</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче