CSS Overview

Introduction

CSS is used to control styling for charts produced by the library. The look of the chart can be customized simply by adding CSS elements that override the defaults. This tutorial will describe the CSS classes that affect each element on the chart.

Important! Please do not edit the default css or scss files that come with the SDK. Modifying these files will prevent you from upgrading without having to reimplement your changes. Instead, override the default styling by including your own CSS file after, or in place of, the default files.

Note: The ChartIQ SDK utilizes the HTML canvas to render charts. Canvas does not natively support CSS styling but the ChartIQ SDK makes it possible!

Required Files

Core CSS

stx-chart.css - contains CSS that is required by the core charting library (chartiq.js). This tutorial focuses on the contents of this file. The charting library looks for the styles provided in this file to determine which colors, thickness, fonts, etc to use when rendering the chart. Our recommendation is to always include this file and then override any defaults in your own css file that is included afterward.

CSS Required for templates

The following files are SASS files that contain styles used in sample-template-advanced.html and sample-template-basic.html. These templates are built using W3C web components. Each component requires certain styles in order to render properly. These SASS files are compiled into chartiq.css which is what is actually included in the templates. If you choose to modify SASS styles, we recommend creating your own scss file that contains override styles which you can add to the import list in chartiq.scss.

Add an import to your override file inside chartiq.scss:

/* chartiq.scss */
...
@import "ciq-components"; /* include main components */
@import "ciq-night"; /* Night theme. Use this as a base if you wish to design your own themes. */
@import "ciq-extras"; /* Plugins and other pieces */
// Add an import for your overrides here and then recompile the SASS
...

chartiq.scss - The parent file for all SASS. This contains SASS variables used throughout the child files as well as some basic mixins. You can change the variables to customize the look and feel. Compile this using sass chartiq.scss and replace re resulting chartiq.css file in the css directory.

_ciq-components.scss - contains the main styles for the ChartIQ web component library.

_ciq-night.scss - contains CSS overrides for a night (dark) theme. Use this as a template for building additional custom themes.

_ciq-extras.scss - includes styling for ChartIQ plugins. You may not require this at all.

page-defaults.css - Some basic page wide styling to make sample-template-advanced.html look good! These may not match the intended style for your application so feel free to ignore this.

Note: The default web component styles assume that you've included normalize.css. Normalize is an open source project that sets the baseline "empty page" style for all browsers to a reasonable default. The components may look a bit "wonky" if you forget to include this.

Core Chart Styles

This section will document the styles that affect the core chart - those included in stx-chart.css. Most chart elements recognize the "color" style element. You can use any type of color (hex, rgb, rgba or color name).

You can create semi-transparencies with the alpha value in an rgba style. For instance, to create semi-transparent red candles:

{
  .stx_candle_down {
    color: rgba(255,0,0,.5);
  }
}

Note: Full transparency ("transparent" or rgba(x,x,x,0)) is usually interpreted as an "automatic" color. An automatic color will be white or black depending on shade of the background.

Not every CSS style is supported by the charting engine. Some chart elements (such as line charts) will recognize the "width" element. A few, but not most, chart elements support more complex styling including border colors and gradients.

Background Color

The chart itself is transparent; the canvas is transparent. Set the background color of your chart container div in order to give your chart a background color.

<style>
  .chartContainer {
    backgroundColor: black;
  }
</style>
<div class="chartContainer">
</div>
Chart Styles

The default styling for the different chart types can be found in stx-chart.css. See Chart Styles and Types for specific styles that affect each chart type.

As an example, to change the candle colors, override the declarations stx_candle_up and stx_candle_down to change the colors for up and down candles respectively. This same concept can be applied to the other chart types, use the comments and declaration names as your guide.

Screenshot of the up and down candles

Axis Styles

Axis Text

The axis text styles are controlled by the CSS declarations stx_yaxis and stx_xaxis. The font color, size, style and size can be controlled. The x-axis height will automatically adjust to accommodate the font that is set. Note: y-axis width does not automatically adjust for larger fonts. Be sure to set the width to be wide enough to accommodate your style. See CIQ.ChartEngine.YAxis#width.

A third axis CSS declaration, stx_xaxis_dark can be used to style date dividers. Date dividers may be the beginning of the day, month or year depending on the scale of the chart.

Example: "Sep" is a date divider. Date dividers are usually styled to be slightly darker than normal x-axis labels:

Screenshot of the date divider axis

Grid Lines

Grid style can be customized with stx_grid, stx_grid_dark for the dividers, and stx_grid_border for the borders. While it is not possible to style x-axis and y-axis grid lines differently, it is possible to turn off either or both x-axis and y-axis grid lines with the variables CIQ.ChartEngine.XAxis#displayGridLines and CIQ.ChartEngine.YAxis#displayGridLines.

Grid lines can be made fatter by setting the CSS "width" style.

The line pattern can also be defined to be "solid", "dotted" or "dashed" by setting the CSS "border-style"

Example:

.stx_grid { /* Default Grid */
    color:#efefef;
    opacity:1;
    border-style:solid;
    }
.stx_grid_dark {/* Default Grid dividers */
    color:#cccccc;
    opacity:.9;
    border-style:solid;
    }
.stx_grid_border {/* Default Grid borders */
    color:#999999;
    border-style:solid;
    }

Axis Labels & Crosshairs

Floating labels appear along both axis when crosshairs are enabled. stx-float-date controls the style of the x-axis label. stx-float-price controls the style of the y-axis label.

Screenshot of the crosshairs with labels

The color of the last price label ("Current HR") is controlled by the two CSS declarations: stx_current_hr_up and stx_current_hr_down. These classes will be applied depending on whether the closing price on the current bar is higher or lower than the previous bar (not the previous day unless a daily chart!).

Screenshot of the Y-Axis last price label

The shape of y-axis price labels is controlled programatically. See CIQ.ChartEngine#yaxisLabelStyle.

Volume Underlay or Overlay

Volume underlay style can be controlled by stx_volume_underlay_up and stx_volume_underlay_down. These classes will be applied based on whether the closing price of a bar is higher or lower than the previous bar. Borders can be removed by setting border-left-color: transparent.

*Note: bar fill colors are controlled through studyLibrary parameters. The CSS is used for border color and bar opacity.

Chart Controls

Chart controls are DOM elements that the chart automatically creates. These include the crosshairs and zoom controls (+ / - ). These can be styled just like any DOM element. They must have style position: absolute in order to be positioned properly. To hide a control simply set display: none for the control's class.

  • stx-crosshair, stx_crosshair_y,stx_crosshair_x - Crosshairs
  • stx-zoom-in and stx-zoom-out - Zoom buttons ( + / - )
  • stx_jump_today - "Home" button ( >> )
  • stx-panel-title - Label in study panels
  • #mSticky - hover div that appears over overlays, series and drawings
  • stx_annotation_save and stx_annotation_cancel - Save and cancel buttons for annotaton drawing
  • stx-ico-up, stx-ico-down, stx-ico-close, stx-ico-edit and stx-ico-focus - Study panel buttons

Note: While setting display: none for stx-ico-up and stx-ico-down will hide the icons, the control remains active. To completely remove the up/down panel controls, see CIQ.ChartEngine#displayIconsUpDown.

Theming

Theming is no more than changing CSS styles! The most common way to enable theming is to preface CSS styles with a class qualifier. In sample-template-advanced.html we use ".ciq-night" as a qualifier for the secondary default or no qualifier for the primary default theme. But you can use anything you'd like.

Example: In this example we've created a theme called "colorblind". We want down candles to be colored yellow when this theme is enabled. We accomplish this by adding a qualifier class, .colorblind.

<style>
  .stx_candle_down { color: red };
  .colorblind .stx_candle_down { color: yellow };
</style>

<html>
  <div class="chartContainer"></div>
</html>

<script>
    function turnOnColorBlind(){

      // Add the .colorblind class.
      // This will cause stx_candle_down elements to be yellow instead of red
      $("html").addClass("colorblind");

      // Tell the chart to reload the styles
      stxx.clearStyles();
    }
</script>

We implement theming through CSS so that a theme can apply to both the chart and also the UI that surrounds the chart. It is much easier to think about theming in the context of an entire application than to have a separate paradigm just for the chart.

Programmatically styling the chart

Styles can also be overwritten programatically at any time using CIQ.ChartEngine#setStyle.

Example:

stx.setStyle("stx_candle_up", "color", "green");
stx.setStyle("stx_candle_down", "color", "red");

You can also load all styles programatically.


Next Steps: