Advanced Chart Customization

01 {

`02`	`data:` `{`

`03`	`dataSets:` `[`

04 {

`05`	`id:` `"dataSet1",`

`06`	`sourceUrl:` `"./../../csv-data/ixic_daily_short.csv",`

`07`	`csvSettings:` `{`

`08`	`ignoreFirstRow:` `true,`

`09`	`rowsSeparator:` `"\n"`

10 },

`11`	`locale:` `{`

`12`	`dateTime:` `{`

`13`	`format:` `"%yyyy%MM%dd"`

14 }

15 }

16 }

17 ],

`18`	`dataProviders:` `{`

`19`	`generalDataProviders:` `[`

20 {

`21`	`dataSet:` `"dataSet1",`

`22`	`id:` `"s1",`

`23`	`fields:` `[`

24 {

`25`	`type:` `"Value",`

`26`	`column:` `4,`

`27`	`approximationType:` `"Close"`

28 },

29 {

`30`	`type:` `"Volume",`

`31`	`column:` `5,`

`32`	`approximationType:` `"Average"`

33 }

34 ]

35 }

36 ],

`37`	`scrollerDataProviders:` `[`

38 {

`39`	`dataSet:` `"dataSet1",`

`40`	`column:` `4`

41 }

42 ]

43 }

44 },

`45`	`settings:` `{`

`46`	`tooltipSettings:` `{`

`47`	`enabled:` `true`

48 },

`49`	`background:` `{`

`50`	`fill:` `{`

`51`	`type:` `"Solid",`

`52`	`color:` `"#161415"`

53 }

54 },

`55`	`outsideMargin:` `{`

`56`	`all:` `0`

57 },

`58`	`insideMargin:` `{`

`59`	`right:` `50,`

`60`	`top:` `20,`

`61`	`left:` `20,`

`62`	`bottom:` `20`

63 },

`64`	`charts:` `[`

65 {

`66`	`id:` `"idMainChart",`

`67`	`height:` `100,`

`68`	`legend:` `{`

`69`	`enabled:` `true,`

`70`	`padding:` `0,`

`71`	`dateTime:` `{`

`72`	`enabled:` `false`

73 },

`74`	`title:` `{`

`75`	`font:` `{`

`76`	`color:` `"#F0F0F0"`

77 }

78 },

`79`	`background:` `{`

`80`	`enabled:` `true,`

`81`	`fill:` `{`

`82`	`type:` `"Gradient",`

`83`	`color:` `"Black",`

`84`	`opacity:` `1,`

`85`	`gradient:` `{`

`86`	`keys:` `[`

87 {

`88`	`color:` `"#303030"`

89 },

90 {

`91`	`color:` `"#000000"`

92 }

93 ]

94 }

95 },

`96`	`border:` `{`

`97`	`enabled:` `true,`

`98`	`color:` `"#474646",`

`99`	`opacity:` `1`

100 }

101 }

102 },

103 background: {

104 enabled: true,

105 border: {

106 enabled: true,

107 color: "#474646",

108 opacity: 1

109 },

110 fill: {

111 type: "Solid",

112 color: "White",

113 opacity: 0.1

114 }

115 },

116 valueAxes: {

117 primary: {

118 position: "Right",

119 labels: {

120 position: "Outside",

121 padding: 5,

122 showFirst: true,

123 showLast: true,

124 valign: "Center",

125 font: {

126 color: "#838182"

127 },

128 format: "{%Value}{numDecimals:0}"

129 },

130 tickmarks: {

131 enabled: true,

132 showFirst: true,

133 showLast: true,

134 color: "White",

135 opacity: 0.2,

136 pixelHinting: true

137 },

138 scale: {

139 mode: "Values"

140 },

141 grid: {

142 enabled: true,

143 line: {

144 color: "White",

145 opacity: 0.13

146 }

147 }

148 }

149 },

150 xAxis: {

151 majorGrid: {

152 line: {

153 color: "White",

154 opacity: 0.13

155 }

156 },

157 minorGrid: {

158 line: {

159 color: "White",

160 opacity: 0.13

161 }

162 },

163 labels: {

164 majorLabels: {

165 font: {

166 color: "#908E8F"

167 }

168 },

169 minorLabels: {

170 font: {

171 color: "#908E8F"

172 }

173 },

174 background: {

175 enabled: true,

176 fill: {

177 type: "Gradient",

178 color: "Black",

179 opacity: 1,

180 gradient: {

181 angle: 90,

182 keys: [

183 {

184 color: "#303030"

185 },

186 {

187 color: "#000000"

188 }

189 ]

190 }

191 },

192 border: {

193 enabled: true,

194 color: "#474646",

195 opacity: 1

196 }

197 }

198 }

199 },

200 seriesList: [

201 {

202 id: "idSeries",

203 type: "SplineArea",

204 dataProvider: "s1",

205 color: "#FD8924",

206 name: "^IXIC",

207 tooltipSettings: {

208 enabled: true,

209 separatedTooltip: {

210 format: "<textformat leading=\"4\">{%SeriesIcon} {%SeriesName} {%Value.Current}\r\nDate: {%Date.Current}{\"%MMM %dd, %yyyy\"}</textformat>",

211 background: {

212 fill: {

213 type: "Gradient",

214 color: "Black",

215 opacity: 1,

216 gradient: {

217 angle: 90,

218 keys: [

219 {

220 color: "#494949"

221 },

222 {

223 color: "#000000"

224 }

225 ]

226 }

227 },

228 border: {

229 color: "#000000",

230 thickness: 2,

231 opacity: 0.6

232 },

233 shadow: {

234 color: "#F0F0F0",

235 opacity: 1,

236 distance: 0,

237 blurX: 2,

238 blurY: 2,

239 strength: 4

240 }

241 }

242 }

243 },

244 legendItem: {

245 labels: {

246 icon: {

247 size: 10,

248 type: "Square",

249 fill: {

250 color: "%Color",

251 type: "Gradient",

252 gradient: {

253 angle: 90,

254 keys: [

255 {

256 color: "#FD8924"

257 },

258 {

259 color: "#A75A18"

260 }

261 ]

262 }

263 },

264 border: {

265 enabled: true,

266 thickness: 2,

267 color: "DarkColor(%Color)",

268 opacity: 0.4

269 }

270 },

271 font: {

272 family: "Verdana",

273 size: 9

274 },

275 focusSettings: {

276 mouseOver: {

277 format: "{%SeriesIcon} {%SeriesName} {%Value.Current} "

278 },

279 mouseOut: {

280 format: "{%SeriesIcon} {%SeriesName} {%Value.LastVisible} "

281 }

282 }

283 }

284 },

285 areaSeries: {

286 line: {

287 color: "%Color",

288 opacity: 0.6

289 },

290 fill: {

291 color: "%Color",

292 opacity: 0.5

293 }

294 }

295 }

296 ],

297 technicalIndicators: [

298 {

299 type: "SMA",

300 dataProvider: "s1",

301 smaIndicator: {

302 period: 20,

303 series: {

304 color: "#21B6E7",

305 tooltipSettings: {

306 enabled: false

307 },

308 lineSeries: {

309 thickness: 2,

310 opacity: 0.5

311 },

312 legendItem: {

313 labels: {

314 icon: {

315 size: 10,

316 type: "Square",

317 fill: {

318 color: "%Color",

319 type: "Gradient",

320 gradient: {

321 angle: 90,

322 keys: [

323 {

324 color: "#21B6E7"

325 },

326 {

327 color: "#1B97C0"

328 }

329 ]

330 }

331 },

332 border: {

333 enabled: true,

334 thickness: 2,

335 color: "DarkColor(%Color)",

336 opacity: 0.4

337 }

338 }

339 }

340 },

341 name: "SMA(20)"

342 }

343 }

344 }

345 ]

346 },

347 {

348 height: 50,

349 legend: {

350 enabled: true,

351 padding: 0,

352 dateTime: {

353 enabled: false

354 },

355 title: {

356 font: {

357 color: "#F0F0F0"

358 }

359 },

360 background: {

361 enabled: true,

362 fill: {

363 type: "Gradient",

364 color: "Black",

365 opacity: 1,

366 gradient: {

367 keys: [

368 {

369 color: "#303030"

370 },

371 {

372 color: "#000000"

373 }

374 ]

375 }

376 },

377 border: {

378 enabled: true,

379 color: "#474646",

380 opacity: 1

381 }

382 }

383 },

384 background: {

385 enabled: true,

386 border: {

387 enabled: true,

388 color: "#474646",

389 opacity: 1

390 },

391 fill: {

392 type: "Solid",

393 color: "White",

394 opacity: 0.1

395 }

396 },

397 valueAxes: {

398 primary: {

399 position: "Right",

400 labels: {

401 position: "Outside",

402 padding: 5,

403 showFirst: true,

404 showLast: true,

405 valign: "Center",

406 font: {

407 color: "#838182"

408 },

409 format: "{%Value}{scale:(1)(1000)(1000)(1000)|()( K)( M)( B),numDecimals:2,trailingZeros:false}"

410 },

411 tickmarks: {

412 enabled: true,

413 showFirst: true,

414 showLast: true,

415 color: "White",

416 opacity: 0.2,

417 pixelHinting: true

418 },

419 scale: {

420 mode: "Values"

421 },

422 grid: {

423 enabled: true,

424 line: {

425 color: "White",

426 opacity: 0.13

427 }

428 }

429 }

430 },

431 xAxis: {

432 majorGrid: {

433 line: {

434 color: "White",

435 opacity: 0.13

436 }

437 },

438 minorGrid: {

439 line: {

440 color: "White",

441 opacity: 0.13

442 }

443 },

444 labels: {

445 enabled: false,

446 majorLabels: {

447 font: {

448 color: "#908E8F"

449 }

450 },

451 minorLabels: {

452 font: {

453 color: "#908E8F"

454 }

455 },

456 background: {

457 enabled: true,

458 fill: {

459 type: "Gradient",

460 color: "Black",

461 opacity: 1,

462 gradient: {

463 angle: 90,

464 keys: [

465 {

466 color: "#303030"

467 },

468 {

469 color: "#000000"

470 }

471 ]

472 }

473 },

474 border: {

475 enabled: true,

476 color: "#474646",

477 opacity: 1

478 }

479 }

480 }

481 },

482 technicalIndicators: [

483 {

484 type: "Volume",

485 dataProvider: "s1",

486 volumeIndicator: {

487 series: {

488 type: "Bar",

489 color: "#BABABA",

490 tooltipSettings: {

491 enabled: false

492 },

493 barSeries: {

494 width: 0.7,

495 fill: {

496 color: "%Color"

497 },

498 border: {

499 enabled: true,

500 opacity: 0.7,

501 thickness: 1

502 }

503 },

504 name: "Volume:",

505 legendItem: {

506 labels: {

507 icon: {

508 size: 10,

509 type: "Square",

510 fill: {

511 color: "%Color",

512 type: "Gradient",

513 gradient: {

514 angle: 90,

515 keys: [

516 {

517 color: "#BABABA"

518 },

519 {

520 color: "#9C9C9C"

521 }

522 ]

523 }

524 },

525 border: {

526 enabled: true,

527 thickness: 2,

528 color: "DarkColor(%Color)",

529 opacity: 0.4

530 }

531 },

532 focusSettings: {

533 mouseOver: {

534 format: "{%SeriesIcon} Volume: {%Value.Current}{scale:(1000)(1000)(1000)|( K)( M)( B),numDecimals:2,trailingZeros:false} "

535 },

536 mouseOut: {

537 format: "{%SeriesIcon} Volume: {%Value.LastVisible}{scale:(1000)(1000)(1000)|( K)( M)( B),numDecimals:2,trailingZeros:false} "

538 }

539 }

540 }

541 }

542 }

543 }

544 }

545 ]

546 }

547 ],

548 timeScale: {

549 selectedRange: {

550 type: "YTD"

551 }

552 },

553 scroller: {

554 timeScale: {

555 labels: {

556 font: {

557 color: "#908E8F",

558 size: 9

559 },

560 background: {

561 enabled: true,

562 fill: {

563 color: "#202020",

564 opacity: 0.5

565 }

566 }

567 }

568 },

569 gridLine: {

570 color: "#333333"

571 },

572 selectedRangeOutline: {

573 color: "#555555"

574 },

575 border: {

576 color: "#333333"

577 },

578 insideSelectedRange: {

579 backgroundFill: {

580 enabled: true,

581 type: "Gradient",

582 opacity: 1,

583 gradient: {

584 angle: 90,

585 keys: [

586 {

587 color: "#303030"

588 },

589 {

590 color: "#000000"

591 }

592 ]

593 }

594 },

595 seriesLine: {

596 enabled: true,

597 color: "#333333",

598 thickness: 1,

599 opacity: 1

600 },

601 seriesFill: {

602 enabled: true,

603 type: "Solid",

604 color: "#777777",

605 opacity: 0.7

606 }

607 },

608 outsideSelectedRange: {

609 backgroundFill: {

610 type: "Gradient",

611 opacity: 1,

612 gradient: {

613 angle: 90,

614 keys: [

615 {

616 color: "#303030"

617 },

618 {

619 color: "#000000"

620 }

621 ]

622 }

623 },

624 seriesLine: {

625 enabled: true,

626 color: "#333333",

627 thickness: 1,

628 opacity: 0.5

629 },

630 seriesFill: {

631 enabled: true,

632 type: "Solid",

633 color: "#777777",

634 opacity: 0.5

635 }

636 },

637 rangeMarkers: {

638 shape: "Diamond",

639 showAlways: true,

640 fill: {

641 type: "Gradient",

642 opacity: 1,

643 gradient: {

644 angle: 45,

645 keys: [

646 {

647 color: "#A0A0A0"

648 },

649 {

650 color: "Black"

651 }

652 ]

653 }

654 },

655 border: {

656 color: "#999999"

657 }

658 }

659 },

660 rangeSelector: {

661 enabled: true,

662 presets: {

663 title: {

664 font: {

665 color: "#908E8F"

666 }

667 },

668 buttonSettings: {

669 font: {

670 color: "#999999"

671 },

672 fill: {

673 enabled: true,

674 type: "Gradient",

675 opacity: 1,

676 gradient: {

677 keys: [

678 {

679 color: "#464646"

680 },

681 {

682 color: "#000000"

683 }

684 ]

685 }

686 },

687 border: {

688 color: "White",

689 opacity: 0.1

690 }

691 }

692 },

693 rangePicker: {

694 fromLabel: {

695 font: {

696 color: "#908E8F"

697 }

698 },

699 toLabel: {

700 font: {

701 color: "#908E8F"

702 }

703 },

704 background: {

705 fill: {

706 type: "Gradient",

707 opacity: 1,

708 gradient: {

709 angle: 90,

710 keys: [

711 {

712 color: "#ADADAD",

713 position: 0

714 },

715 {

716 color: "#B2B2B2",

717 position: 0.3

718 },

719 {

720 color: "#C7C7C7",

721 position: 1

722 }

723 ]

724 }

725 },

726 border: {

727 color: "#201F1D",

728 opacity: 0.3,

729 thickness: 2

730 }

731 }

732 }

733 }

734 }

735 }