Cornerstone Charts Developer Guide
Learn how to integrate with Cornerstone Charts or extend its functionality.
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;
});See something inaccurate? Let us know