Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Trading
Time Span Events
Term structures
ScriptIQ
Troubleshooting
Glossary
Reference
JSFiddles

Customizing Web Components

Create a horizontal legend instead of default vertical format.

This sample code shows how to to transform the default vertical legend into a horizontal mode with colored "pill" type bubbles as well as removing the comparison menu from the chart.

  • This is the current HTML in sample-template-advanced.html :
<cq-comparison-swatch></cq-comparison-swatch>
<cq-comparison-label>AAPL</cq-comparison-label>
<cq-comparison-price cq-animate></cq-comparison-price>
<cq-comparison-loader></cq-comparison-loader>
<div class="stx-btn-ico ciq-close"></div>
  • Modify so that the label, price and loader components are inside cq-comparison-swatch instead:
<cq-comparison-swatch>
	<cq-comparison-label>AAPL</cq-comparison-label>
	<cq-comparison-price cq-animate></cq-comparison-price>
	<cq-comparison-loader></cq-comparison-loader>
	<div class="stx-btn-ico ciq-close"></div>
</cq-comparison-swatch>

Include a CSS file with the following ( be sure to include following the existing CSS files, not before ) :

.stx-btn-panel span {
	background-image: url(stx-sprite.png);
	background-color: rgba(153, 153, 153, 0.2);
	width: 20px;
	height: 20px;
	border: solid 1px transparent;
	border-radius: 3px;
	box-sizing: border-box;
}

.stx-btn-panel > span.stx-ico-down {
	background-position: -79px -40px;
}

.ciq-night .stx-btn-panel > span.stx-ico-down {
	background-position: -79px -80px;
}

.stx-btn-panel > span.stx-ico-up {
	background-position: -119px -40px;
}

.ciq-night .stx-btn-panel > span.stx-ico-up {
	background-position: -119px -80px;
}

.stx-btn-panel > span.stx-ico-close {
	background-position: -159px -40px;
}

.ciq-night .stx-btn-panel > span.stx-ico-close {
	background-position: -159px -80px;
}

.stx-btn-panel > span.stx-ico-focus {
	background-position: -39px -40px;
}

.ciq-night .stx-btn-panel > span.stx-ico-focus {
	background-position: -39px -80px;
}

.stx-btn-panel > span.stx-ico-edit {
	background-position: -199px -40px;
}

.ciq-night .stx-btn-panel > span.stx-ico-edit {
	background-position: -199px -80px;
}

cq-comparison {
	top: 6px;
	left: 200px;
	margin: 0px;
}

cq-comparison-key {
	top: 0px;
}

/* Add Comparison Btn */
cq-comparison-new {
	position: absolute;
	display: inline-block;
	cursor: pointer;
	color: #666666;
	transition: color 0.2s 0s, opacity 0.2s 0s;
	z-index: 1;
	top: 50px;
	left: -195px;
	width: 200px;
}

cq-comparison-key {
	display: inline-block;
}

cq-comparison-item {
	display: inline-block;
	font-size: 12px; /* adjust font-size and line-height to taste */
	line-height: 18px;
	padding: 0px;
}

cq-comparison-item .ciq-close {
	background-position: -248px -55px;
}

cq-comparison-price {
	padding-left: 8px;
	color: #fff; /* with colored background, white is the best choice */
}

cq-comparison-swatch {
	display: block;
	position: inherit;
	width: auto;
	height: auto;
	padding-left: 2px;
	padding-right: 23px;
	border-radius: 8px;
}
cq-comparison-swatch > * {
	margin-left: 5px;
}