Cyclops uses Chartist.js for displaying simple, responsive charts. To display a chart, include the Chartist script file.

<script src=""></script>


Then use either the cyclops jQuery function or the knockout binding to create your chart. The knockout binding uses the jQuery function under the covers and thus shares all the same options, chart API documentation.

// jQuery
$('.myChart').chart({type: 'Line', data: data, chartOptions: {}})
<!-- knockout binding -->
<div class="myChart" data-bind="chart:{ type: 'Line', data: data, chartOptions: {} }"></div>


In addition to displaying data in a chart, the loading, failed, and empty states should be accounted for. The interactive example below demonstrates an artifically long loading time, with options to render a failed or empty template.

Line Chart

var lineData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  series: [
    name: "Widget",
    value: [75, 76, 77, 78, 81, 79, 76]

ko.applyBindings({ data: lineData }, $("#lineChart")[0]);
<div id="lineChart" data-bind="chart:{ type: 'Line', data: data }"></div>


Bar Chart

var barData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  series: [{
    name: "My First dataset",
    value: [65, 59, 80, 81, 56, 55, 40]
    name: "My Second dataset",
    value: [28, 48, 40, 19, 86, 27, 90]

ko.applyBindings({ data: barData }, $("#barChart")[0]);
<div id="barChart" data-bind="chart:{ type: 'Bar', data: data }"></div>


Pie, Donut & Guage Chart

var pieData = {
  series: [
      value: 300,
      name: "set 1"

ko.applyBindings({ data: pieData }, $("#pieChart")[0]);
ko.applyBindings({ data: pieData }, $("#donutChart")[0]);
ko.applyBindings({ data: pieData }, $("#guageChart")[0]);
<div id="pieChart" data-bind="chart:{ type: 'Pie', data: data }"></div>
<div id="donutChart" data-bind="chart:{ type: 'Donut', data: data }"></div>
<div id="guageChart" data-bind="chart:{ type: 'Guage', data: data }"></div>


Aspect Ratio

In order for a chart element to scale properly and be responsive, apply an aspect ratio (e.g. 4:3, 3:2, 16:9 etc.) rather than specifying a fixed width and height. Specify the ratio directly on the container without the need to calculate any fixed dimensions. In order to create a chart that is using the aspect ratio of a golden section you can add the .ct-golden-section to the container where chart is initialized.

class name ratio

Color Palette

Chart series default color palette is made up of 10 unique colors. If your chart happens to contain more than 10 series, the color series will loop (e.g. the 1st and 11th series will be the same color).

.ct-series-a = #8cc63f
.ct-series-b = #58776a
.ct-series-c = #f5a934
.ct-series-d = #d44747
.ct-series-e = #59b082
.ct-series-f = #597c97
.ct-series-g = #404c43
rgb(64, 76, 67)
.ct-series-h = #5e9354
.ct-series-i = #f1ee6b
.ct-series-j = #b8e288
.ct-series-k = #5e9354
.ct-series-l = #58776a
.ct-series-m = #b8e288
.ct-series-n = #8cc63f
anchor link to top of page