jqwidgets-framework/demos/Angular/src/grid/charting/app.component.html

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

<div style="font-size: 13px; font-family: Verdana; float: left">
	<style>
		#toolbar {
			display: flex;
			height: 100%;
			padding: 0 1rem;
		}

		#toolbar.warning:after {
			content: 'Selected data cannot be used to create a chart.';
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
			color: var(--smart-error);
		}

		#toolbar > div {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			margin-right: 15px;
			width: 35px;
			height: 30px;
			height: 100%;
			font-size: 12px;
			background-size: contain;
			background-repeat: no-repeat;
			user-select: none;
			cursor: pointer;
		}

			#toolbar > div:hover {
				background-color: var(--smart-grid-column-header-background-hover);
			}

			#toolbar > div:active {
				background-color: var(--smart-grid-column-header-background-active);
			}

			#toolbar > div.warning {
				outline: 2px solid var(--smart-error);
			}

		#column {
		background-image: url("../../jqwidgets/styles/images/create-column.png");
		}

		#line {
		background-image: url("../../jqwidgets/styles/images/create-line.png");
		}

		#pie {
		background-image: url("../../jqwidgets/styles/images/create-pie.png");
		}

		#bar {
		background-image: url("../../jqwidgets/styles/images/create-bar.png");
		}

		#area {
		background-image: url("../../jqwidgets/styles/images/create-area.png");
		}

		#scatter {
		background-image: url("../../jqwidgets/styles/images/create-scatter.png");
		}

		[theme="dark"] #column {
		background-image: url("../../jqwidgets/styles/images/create-column-dark.png");
		}

		[theme="dark"] #line {
		background-image: url("../../jqwidgets/styles/images/create-line-dark.png");
		}

		[theme="dark"] #pie {
		background-image: url("../../jqwidgets/styles/images/create-pie-dark.png");
		}

		[theme="dark"] #bar {
		background-image: url("../../jqwidgets/styles/images/create-bar-dark.png");
		}

		[theme="dark"] #area {
		background-image: url("../../jqwidgets/styles/images/create-area-dark.png");
		}

		[theme="dark"] #scatter {
		background-image: url("../../jqwidgets/styles/images/create-scatter-dark.png");
		}
	</style>
    <jqxGrid #jqxgrid [rendertoolbar]="myGridRenderToolbar"
        [width]="getWidth()" [source]="dataAdapter" 
		[autoheight]=true
		[showtoolbar]=true
		[toolbarheight]=50
        [columns]="columns" [selectionmode]="'multiplecellsadvanced'">		
    </jqxGrid>
</div>