<!DOCTYPE html><html><head><title>CategoryChartLineChartWithAnimations</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="options horizontal"><spanclass="options-label">Transition Type </span><selectid="animationSelect"><option>Auto</option><option>AccordionFromBottom</option><option>AccordionFromCategoryAxisMaximum</option><option>AccordionFromCategoryAxisMinimum</option><option>AccordionFromLeft</option><option>AccordionFromRight</option><option>AccordionFromTop</option><option>AccordionFromValueAxisMaximum</option><option>AccordionFromValueAxisMinimum</option><option>Expand</option><option>FromZero</option><option>SweepFromBottom</option><option>SweepFromCategoryAxisMaximum</option><option>SweepFromCategoryAxisMinimum</option><option>SweepFromCenter</option><option>SweepFromLeft</option><option>SweepFromRight</option><option>SweepFromTop</option><option>SweepFromValueAxisMaximum</option><option>SweepFromValueAxisMinimum</option></select><labelid="transitionLabel"class="options-value"style="width: 75px">1000ms</label><inputid="transitionSlider"class="options-slider"type="range"min="50"max="2000"step="50"value="1000" /><buttonid="reloadChartBtn">Reload Chart</button></div><igc-category-chartid="chart"width="100%"height="calc(100% - 30px)"chart-type="Line"is-transition-in-enabled="true"is-horizontal-zoom-enabled="false"is-vertical-zoom-enabled="false"y-axis-title="TWh"y-axis-title-left-margin="10"y-axis-title-right-margin="5"y-axis-label-left-margin="0"computed-plot-area-margin-mode="Series"></igc-category-chart></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.