chartjs-plugin-dragdata plugin by @artus9033.
options.plugins.dragDataYou can directly access view custom properties within the arrow function.
For example, if you created a custom prop on the view named customPropName, you could get the value using this code.
(ctx) => {
const view = perspective.context.view;
const customProp = view.custom.read("customPropName");
}
thank you!
As Im to figure out how to use the charts and the platform, I may have another use case below, 
I have a bar chart in which the x axis is step number, y axis is the duration, from the above i am thinking im able to compare X axis to the target dataset step number to get the target duration, then compare to actual Y value and change the color.
The problem is my target is dynamically changing based on the Variant, In the dataset's data of the bar chart Im passing bar Variant per each point, is there a way i can compare the Variant of the point to the Target dataset/array { Variant, step number, target duration}which is living in the custom property.
If I understand correctly, you want to color the bars on the chart based on some calculation (variant)? Is that variant constantly changing and you want the chart to update as it changes?
I'm not sure if options.elements.bars would be the correct place to do it. As I understand it, those properties are there to globally define styles for the listed elements.
Although, it does seem to work...
The arrow function would get called every time the chart is drawn/updated. The ctx object will contain the x and y values for a single bar. In other words, for every bar that must be drawn, the arrow function on backgroundColor would be called with a new ctx object for the respective bar.
Post a sample of your dataset for us to see, if you can.
Be sure to follow this guide when posting code/data.
Wiki - how to post code on this forum - General Discussion - Inductive Automation Forum
The "traditional" way would be to add the backgroundColor property to your dataset.
See this link for more info: Vertical Bar Chart | Chart.js
I think this a perfectly fine place to put it, especially if you want to lookup the colors for several different datasets.
Options in Chart.js are applied in layers and you should use them to your advantage.
Settings in options.elements.bars will be applied to all bars, but these can be overridden by specifying properties inside of an individual dataset.
Good to know, Ben. Another tool in the toolbox.
I wonder what the performance difference would be between providing the color with the data in the dataset vs using an arrow function to lookup colors?
I would think providing it with the data would be more performant. (For large datasets anyways)
Assuming that the arrow function is "simple" I'd expect the rendering performance to be exactly the same. Chart.js's property resolution code is already kind-of heavy, so one additional lookup function is just a drop of water in the ocean.
In fact, for really large datasets I'd expect the performance within Perspective to be better with the scriptable options, because of the reduced transfer size over the WebSocket.
IMO you want to be using the client's hardware instead of the gateway's for all rendering related tasks.
I was able to do both use case with fixed Target to adjust the color, and dynamic target based on the raw data of dataset, but the target coming from other table.
the function is under a BackgroundColor property of the datasets, is there other alternative to do the function that will gain more performance or use less resources?
(ctx) => {
const view = perspective.context.view;
const sku_target = view.custom.read("sku_target");
const value = ctx.raw;
const vsku = value.sku;
const vStepNo = value.step_no;
let target = null;
let last = 3;
for (let i = 0; i < sku_target.length; i++) {
if (sku_target[i].StepNo == vStepNo && sku_target[i].SKU == vsku) {
target = sku_target[i].Target;
break;
}
}
const color = (value.duration <= target) ? '#00B190' : '#FF544F';
return color;
}
How many SKU targets are in the custom.sku_target property?
The loop is a little scary. Instead, you could do preprocessing in the onMount callback to load the custom property into a map in order to avoid looping for every data point.
But if you’ve got a well known number of SKU targets and metrics to plot then it might not be worth worrying about.
Its about <50 data only in the sku_target.
Ill explore the onmount! thank you
in order to use client hardware for this kind of thing, instead of using function call in the props, should I use scripting?
The callback arrow functions provided in the property tree will run in the client.
Any python scripting configured on the properties/on the component always run in the gateway.
Thank you!
What is the best way to redo the backgroundColor function property call?
if the Graph.JS is in a Embedded View, then the button is in another Embedded View? Passing only params
What do you mean by “redo”? What are you expecting the button to do?
Hello!
I am trying to refresh the graph thru a button click and expecting that the backgroundColor will do the function after refrrshing. Im still trying to figure out why it is not refreshing.
Can you share some code? What does the button exactly do? What does your background color function look like?
The background color function is called every time the chart re-renders, so there has to be some else going on.
Im not sure at my first try what happened but now it is working. I just did refresh binding to the dataset.data property and put 1 sec delay after i updated the database to ensure im getting the updated database.
In the database i have a column that changes the color of the bar.
This might be a dumb question... but how can I add a $ to the start of the axis ticks as in here:
(I have no idea what I'm doing; I can't see a callback prop... and if I add it and add that function into it, it doesn't seem to do anything... 
)
And, how can I add an axis title?