jqwidgets-scripts-custom/demos/Angular/chart/scatterchart/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxChart #myChart
    [width]="getWidth()" [height]="500"
    [title]="'Sales by City in Q1 & Q2'"
    [description]="''"
    [showLegend]="true" [enableAnimations]="true" [padding]="padding"
    [titlePadding]="titlePadding" [source]="sampleData" [xAxis]="xAxis"
    [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [colorScheme]="'scheme01'">
</jqxChart>

<table style="width: 550px">
    <tbody>
        <tr>
            <td>
                <p>Select Serie 1 Symbol:</p>

                <jqxDropDownList [theme]="'material'" (onChange)="dropDownSerie1SymbolOnChange($event)"
                    [width]="200" [height]="25" [selectedIndex]="2"
                    [dropDownHeight]="100" [source]="symbolsList">
                </jqxDropDownList>

            </td>
            <td>
                <p>Select Serie 2 Symbol:</p>

                <jqxDropDownList [theme]="'material'" (onChange)="dropDownSerie2SymbolOnChange($event)"
                    [width]="200" [height]="25" [selectedIndex]="1"
                    [dropDownHeight]="100" [source]="symbolsList">
                </jqxDropDownList>

            </td>
        </tr>
    </tbody>
</table>