CrossPlot

Plot multiple variables using CIQ.CrossSection.

by ChartIQ Library

HTML

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />

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


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

JavaScript

// Reference the main ChartIQ library.
import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/standard.js";

// Reference the CrossPlot plug-in.
import "https://jsfiddle.chartiq.com/chart/plugins/crosssection/core.js";

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

// Create a static data source for the chart.
var quotes = [
  {
    "DT": "2022-12-08T05:00:00.000Z",
    "DataSet": {
      "Client 1": {
        "name": "Beatles & Sons",
        "portfolio": "A",
        "touchpoints": 32,
        "score": 18.09294,
        "tcv": 2136
      },
      "Client 2": {
        "name": "Led Zeppelin Holdings",
        "portfolio": "A",
        "touchpoints": 69,
        "score": 5.27148,
        "tcv": 200
      },
      "Client 3": {
        "name": "Queen Wholesale",
        "portfolio": "B",
        "touchpoints": 94,
        "score": 8.14696,
        "tcv": 4543
      },
      "Client 4": {
        "name": "Pink Floyd Trading",
        "portfolio": "B",
        "touchpoints": 172,
        "score": 8.01689,
        "tcv": 2618
      },
      "Client 5": {
        "name": "Rolling Stones International",
        "portfolio": "C",
        "touchpoints": 254,
        "score": 23.84789,
        "tcv": 4354
      },
      "Client 6": {
        "name": "AC/DC America",
        "portfolio": "C",
        "touchpoints": 216,
        "score": 15.89953,
        "tcv": 2462
      },
      "Client 7": {
        "name": "Eagles Inc",
        "portfolio": "A",
        "touchpoints": 220,
        "score": 10.59312,
        "tcv": 2840
      },
      "Client 8": {
        "name": "Metallica Brokerage",
        "portfolio": "A",
        "touchpoints": 36,
        "score": 6.6223,
        "tcv": 1590
      },
      "Client 9": {
        "name": "Guns N' Roses & Co",
        "portfolio": "C",
        "touchpoints": 52,
        "score": 21.87604,
        "tcv": 8995
      },
      "Client 10": {
        "name":...