HelloWorld - Basic chart.

This is the jsfiddle implementation of helloworld.html.

by sonylnagale

HTML

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />


<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/standard.js";

// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);


CIQ.ChartEngine.prototype.drawBaselineChart = function (panel, params) {
	const { chart } = panel;
	let { field, id, yAxis } = params;
	let { gaplines: chartGaplines, defaultPlotField, lineStyle } = chart;

	let { display } = this.baselineHelper.get(this.getRendererFromSeries(id));
	const baseLevel = this.getYAxisBaseline(yAxis).actualLevel;
	let colors = [];

	if (!field) field = defaultPlotField;
	if (!lineStyle) lineStyle = {};

	var gaps = params.gapDisplayStyle;
	if (!gaps && gaps !== false) gaps = params.gaps;
	if (baseLevel !== null && !isNaN(baseLevel)) {
		var isMountain = params.type == "mountain";
		if (isMountain) {
			// do the mountain under
			colors = this.drawMountainChart(panel, {
				style: params.style,
				field: params.field,
				yAxis,
				gapDisplayStyle: gaps,
				colored: true,
				//step:params.step  // can of worms with the verticals since we don't know if there are gaps
				tension: 0
			});
		}
		var basePixel = this.pixelFromPrice(baseLevel, panel, yAxis);
		if (isNaN(basePixel)) return;
		this.startClip(panel.name);
		var pattern = params.pattern || lineStyle.pattern;
		var fillUp = params.fill_color_up || this.getCanvasColor("stx_baseline_up");
		var fillDown =
			params.fill_color_down || this.getCanvasColor("stx_baseline_down");
		var edgeUp =
			params.border_color_up || this.getCanvasColor("stx_baseline_up");
		var edgeDown =
			params.border_color_down || this.getCanvasColor("stx_baseline_down");
		var widthUp =
			params.width ||
			lineStyle.width ||
			this.canvasStyle("stx_baseline_up").width;
		var widthDown =
			params.width ||
			lineStyle.width ||
			this.canvasStyle("stx_baseline_down").width;
		const baselineWidth =
			params.widthBaseline ||
			lineStyle.width...