UI Goodies

UI Goodies examples repository

https://github.com/bitfinexcom/bfx-stuff-ui : small examples to master Bitfinex UI Goodies

Chart Marks


Chart markers allow you to display certain events, such as important news, on the Bitfinex UI chart. All markers are associated with a specific timestamp which determines the candle above which the mark will be shown.



Chart markers can be manipulated with websocket messages:

Create a new mark

wss.send(JSON.stringify([0, 'n', 12345, {
  type: 'ucm-ui-chart',
  info: {
    type: 'marker_create',
    id: 'mark_0',
    ts: Date.now(), // timestamp in milliseconds
    symbol: 'tBTCUSD', // not required. If not present applies to all symbols
		content: 'lorem <a href="https://www.bitfinex.com/assets/bfx-stacked.png">here</a>', // content to show in tooltip
    color_bg: '#FF1133', // RGB
    color_text: '#FF1133', // RGB
    color_border: '#FF1133', // RGB
    label: 'M', // marker letter
    size_min: 8,

Clear all existing marks

wss.send(JSON.stringify([0, 'n', 12345, {
  type: 'ucm-ui-chart', info: {
  type: 'marker_clear',
} }]))


typeString, one of [‘marker_create’, ‘marker_clear’]yesThe type of the action
idstringyesUnique id of the mark. It’s necessary to allow the UI to distinguish the marks, and to easily determine that the given mark is already added to the chart in a possible scenario in which the same mark is broadcasted multiple times.
tsnumberyesUnix timestamp in milliseconds of the event. The mark of the event will be associated with the candle that overlaps with this moment in time.
symbolstringnoSymbol that the mark applies to e.g. “tBTCUSD”. If not provided, or provided value is “ANY” the mark applies to each existing pair.
contentstring(HTML)noHTML content displayed in the tooltip. Tooltip appears on mark hover and disappears on mark blur. This library is used to sanitize HTML to prevent potentially malicious tags from being injected:
color_bgstringnoBackground color of the mark. Must be in a form of RGB color such as “#FF0099”
color_borderstringnoBorder color of the mark. Must be in a form of RGB color such as “#FF0099”
color_textstringnoText color of the mark. Must be in a form of RGB color such as “#FF0099”. Should not be confused with tooltip text color. (See “label” below)
labelstring with length = 1noOptional single char that is displayed inside the mark circle when it’s zoomed in enough. Note: chart marks tend to become smaller when zooming out, and become bigger when zooming in. See also “size_min”.
size_minnumbernoMinimum mark size in pixels. See also “label” above.

HTML Sanitize settings

Definition of allowed HTML tags and attributes

 allowedTags: ['h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
   'li', 'b', 'i', 'strong', 'em', 'code', 'hr', 'br', 'div',
   'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'img'],
 allowedAttributes: {
   a: ['href', 'name', 'target'],
   img: ['src', 'height', 'width'],

Custom Notifications

Broadcasts a custom notification to all connected websockets belonging to the authenticated user.


Simple notification


messageNotification content
typeall, browser, desktop
levelsuccess, info, warning, error
imageURL to any image (not supported for desktop notifications on macOS)
linkURL to open when notification is clicked
titleHeader content
ttlTime in milliseconds to display notification for
sound: { tone: TONE }TONE=tone|wob|tripleChime| tripleBeep|doubleTap|pingUp| pingDown


  • Display entire message content
  • Play a sound, if provided, according to the specified user setting or provided tone (see structure above)
  • Display an image, if provided, underneath the message content
  • If a link is provided, the notification should open the link
  • Display the title, if provided, above the message
  • Close after either the provided TTL or the default
wss.send(JSON.stringify([0, 'n', 12345, {
  type: 'ucm-notify-ui', info: {
  type: 'all',
  level: 'success',
  image: 'https://www.bitfinex.com/assets/bfx-stacked.png',
  link: 'http://www.bitfinex.com',
  message: 'This is a test notification',
  sound: {
     tone: 'pingUp',
} }]))

Chart Markers + Custom notifications from Twitter