HelloWorld - with tool tip

This is the jsfiddle implementation of helloworld.html with a tool tip

by ChartIQ Library

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;">
  <!-- tooltip markup is required only if addon tooltip is used and customization is required -->
  <table class="hu-tooltip">
    <caption>Tooltip</caption>
    <tbody>
      <tr hu-tooltip-field="" class="hu-tooltip-sr-only">
        <th>Field</th>
        <th>Value</th>
      </tr>
      <tr hu-tooltip-field="DT">
        <td class="hu-tooltip-name">Date/Time</td>
        <td class="hu-tooltip-value"></td>
      </tr>
      <tr hu-tooltip-field="Close">
        <td class="hu-tooltip-name">'Last' instead of 'Close'</td>
        <td class="hu-tooltip-value"></td>
      </tr>
      <tr hu-tooltip-field="High">
        <td class="hu-tooltip-name">'Custom High' instead of 'High'</td>
        <td class="hu-tooltip-value"></td>
      </tr>
      <tr hu-tooltip-field="IBM">
        <td class="hu-tooltip-name">Name override for 'IBM'</td>
        <td class="hu-tooltip-value"></td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

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

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

// Declare a CIQ.ChartEngine object.
// This is the main object for drawing charts.
// Here is where you set all required defaults.
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  layout: {
    "chartType": "candle",
    "candleWidth": 8,
    "periodicity": 1,
    "interval": 'day',
  },
  preferences: {
    "currentPriceLine": true,
    "whitespace": 20
  }
});

// Connect the chart to the quote feed
stxx.attachQuoteFeed(quoteFeedSimulator, {
  refreshInterval: 5
});


// To enable the tool tip, make sure you have the following included:
// - js/addOns.js
// Then just call:
new CIQ.Tooltip({
  stx: stxx,
  ohl: true, // don't display the default Open, High. Low
  volume: true,
  series: true,
  studies: true
});

stxx.layout.headsUp={floating:true};
stxx.layout.crosshair=false; //show Tooltip witout the crosshair 


//Now load a chart with it's data
stxx.loadChart("SPY", null, function() {
  CIQ.Studies.addStudy(stxx, "ma");
  CIQ.Studies.addStudy(stxx, "volume");
  stxx.addSeries('IBM',{color:'blue',permanent:true}); // see the HTML where we are forcing a diferent name just on the tooltip
  stxx.addSeries('GE',{color:'orange',display:'Friendly Name'}); // the display will be used in the tooltip and the context menu
});