3 Min.max

Cornerstone Charts Developer Guide

Learn how to integrate with Cornerstone Charts or extend its functionality.

Backend Filters
Frontend Filters

Cornerstone Charts uses Chart.js internally. All properties are keyed the same way it is keyed in Chart.js. The different is that objects like tooltip are divided by an underscore (tooltip_enabled instead of { tooltip: { enabled: true } }). This is then processed into an object prior to the backend filters.

Backend Filters

You can filter the JSON config that is passed to Chart.js. It is recommend to start with a filter here, because this will not run on the page. Thus being slightly faster then extending through the frontend. Functional based extensions might not be able to use this though.

Disabling Animations Based on Backend Data

In this sample we are going to turn off animations when the GET parameter disable-animations is present.

<?php

// Filter that is run for every chart
// This data is passed directly to CornerstoneCharts.js and thus Chartjs
add_filter("cs_chart_element_configuration", function($config) {
  // Disable animations based on emptiness of `disable-animations`
  $disableAnimations = !empty($_GET['disable-animation']);

  if ($disableAnimations) {
    // Disable all animations
    // https://www.chartjs.org/docs/latest/configuration/animations.html#disabling-animation
    $config['options']['animation'] = false;
  }

  // Return filtered value
  return $config;
});

Frontend Filters

@since 1.0.1

Certain filters require a frontend integration. This could either be with creating a custom legend, tooltip, or dynamic chart controlled by other parts of your page.

Use window.csGlobal.csHooks to filter various parts of Cornerstone. cs_charts_config is the filter to use to filter all Charts. You can also use cs_charts_config_{ID} to filter individually by ID. Note it is recommended to change the ID in the customize tab of the Chart Element and not use the generated IDs.

Adding a Custom Unit to all Tooltips

In this example we are going to append a unit of cm to all data in our tooltip. So each point of data would say NUMBER cm.

// The UNIT to add
const UNIT = "cm";

// Filter the config of a CS Chart
// Use `cs_charts_config_{ID}` to filter based off of ID
window.csGlobal.csHooks.filter("cs_charts_config", function(config) {
  // Tooltip building callbacks
  config.options.plugins.tooltip.callbacks = {
    // The individual point of data label
    label: function(context) {
      return context.parsed + " " + UNIT;
    }
  };

  // Return with our changes
  return config;
});

Altering the Chart.js Object

@since 1.2.0

Using the frontend filter cs_charts_object you can alter the Chart.js object directly. If you have given your chart an ID you can also use the filter cs_charts_object_YOUR_ID. With this api you can change the Chart dynamically.

window.csGlobal.csHooks.filter("cs_charts_object", function(chart) {
  // After 5 seconds remove all the data
  setTimeout(function() {
    // Loop through datasets
    chart.data.datasets.forEach(dataset => {
      dataset.data.pop();
    });

    // Send Update to chart and render
    chart.update();
  }, 5000);

  return chart;
});

See something inaccurate? Let us know