jqwidgets-framework/demos/Angular/src/chart/greyscaleseries/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxChart #myChart
    [width]="getWidth()" [height]="500"
    [title]="'Fitness & exercise weekly scorecard'"
    [description]="'Time spent in vigorous exercise by activity'"
    [showLegend]="true" [enableAnimations]="false" [padding]="padding"
    [titlePadding]="titlePadding" [source]="sampleData" [xAxis]="xAxis"
    [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [colorScheme]="'scheme05'">
</jqxChart>

<div style="margin-top: 10px">
    <div style="float: left">
        <jqxCheckBox [width]="120" (onChange)="RunningOnChange($event)">
          Running
        </jqxCheckBox>
        <jqxCheckBox [width]="120" (onChange)="SwimmingOnChange($event)">
          Swimming
        </jqxCheckBox>
    </div>
    <div style="float: left">
        <jqxCheckBox [width]="120" checked="true" (onChange)="CyclingOnChange($event)">
          Cycling
        </jqxCheckBox>
        <jqxCheckBox [width]="120" (onChange)="GoalOnChange($event)">
          Personal Goal
        </jqxCheckBox>
    </div>
</div>