@millistream/millistream-widgets

Millistream Widgets

Millistream financial data widgets for websites.

Installation

$ npm install @millistream/millistream-widgets

Angular example

<button (click)="loadChart()">Load</button>
<div id="chart" style="millistream-chart-target"></div>

...
loadChart) {
(async function () {
    const {
        MillistreamWidgetStreamingApi,
        Milli_Chart,
        MillistreamWidgetSettings,
        setDataApiUrl
    } = await import(
        // @ts-ignore
        '@millistream/millistream-widgets'
    );

    // If using your own data-api
    setDataApiUrl('xxx?');

    MillistreamWidgetSettings.token = 'xxx';

    let pushapi = new MillistreamWidgetStreamingApi({
        token: MillistreamWidgetSettings.token,
        server: 'wss://push.millistream.com',
    });

    let ml = new Milli_Chart({
        instrument: [6485],
        target: document.getElementById('chart'),
        autodraw: true,
        intradaylen: '5',
        historylen: '5y',
        gridHorizontalLines: 0,
        gridHorizontalLinesStyle: 'normal',
        gridVerticalLines: 1,
        chartlen: '2d',
        dateformat: 'b dd',
        drawyaxis: true,
        fillchart: true,
        timeformat: 'HH:mm',
        streaming: pushapi,
        instrumentStyle: {
          color: '#f90',
          backgroundLinearGradient: {
            topColor: 'rgba(255,153,0,0.6)',
            bottomColor: 'rgba(255,153,0,0.1)',
          },
          width: 1,
        },
        horizontalLegendStyle: {
          fontSize: '11px',
          fontFamily: 'Arial, Helvetica, sans-serif',
        },
        verticalLegendStyle: {
          fontSize: '11px',
          fontFamily: 'Arial, Helvetica, sans-serif',
        },
        tooltip: {
          // @ts-ignore
          formatter: function () {
            // @ts-ignore
            var date = formatDate(this.data.date, 'yyyy-mm-dd');
            var time = '';
            // @ts-ignore
            if (this.chartType == 'trades') {
              // @ts-ignore
              var hour = this.data.date.getHours();
              var minute = '';
              // @ts-ignore
              if (this.data.date.getMinutes() < 10) minute = '0';
              // @ts-ignore
              minute += this.data.date.getMinutes();
              time = hour + ':' + minute;
            }
            // @ts-ignore
            return (
              '<span class="tooltip-name">' +
              // @ts-ignore
              this.name +
              '</span><br>' +
              // @ts-ignore
              this.data.price +
              ', ' +
              // @ts-ignore
              this.data.diff.toFixed(2) +
              '%</br>' +
              date +
              ' ' +
              time
            );
          },
        },
    });

})();

/* Global Styles */
.millistream-chart-target {
  position: relative;
}

.millistream-chart-target {
  position: relative;
}

.millistream-chart-tooltip {
  position: absolute;
  background: #ffffff;
  border: 1px solid lightblue;
  border-radius: 2px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 2px;
  pointer-events: none;
}

.millistream-chart-pointer {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 2px #f90;
  pointer-events: none;
}

.millistream-chart-zoombox {
  position: absolute;
  background: rgb(255, 153, 0, 0.1);
  pointer-events: none;
}

Widget documentation

Please refer to non npm-version documentation on widget customization. https://mws.millistream.com/widgets/3.0.4/doc/chart_v3.html

Support

https://www.millistream.com