Repository navigation
Add JavaScript function references and typed tick number format - #45
Merged
Merged
Conversation
Chart.js options that take a JavaScript function can now be set from C#.
The app registers each function by name in its own JavaScript file, and
C# references it with ChartFunction. Only registered functions resolve:
a name is never evaluated as code, and globals such as window.open or
fetch can't be reached by name.
- blazorexpress.chartjs.registerFunction(name, fn) registers a function;
new ChartFunction("name") references it. References are resolved on
create, on every update and when a dataset is added.
- An unregistered name logs one console error naming the function and
the option, and the option keeps its Chart.js default. A function that
throws is logged once and the chart keeps drawing.
- Function options: ChartAxesTicks.Callback; the 14 tooltip callbacks,
External, Filter and ItemSort; legend OnClick, OnHover, OnLeave and
labels Filter, Sort and GenerateLabels; datalabels Formatter, chart-wide
and per dataset; ChartAnimation.OnProgress and OnComplete; ChartOptions
OnClick, OnHover and OnResize.
- A legend OnClick function replaces Chart.js's default toggle, as in
Chart.js. The library still keeps the visibility the click changed
across UpdateAsync and still raises OnLegendClick.
- Colour properties on every dataset gain a ...Function sibling (for
example BackgroundColorFunction), sent instead of the value when set;
line and radar also get point colour functions. A function can return
a canvas gradient.
- LineChartDataset.SegmentStyle (ChartLineSegment) styles line segments
with values or functions; Segment stays as it is.
- ChartAxesTicks.Format (ChartNumberFormat) formats linear, logarithmic
and radial axis labels as currency, percent or compact numbers with no
JavaScript. The tooltip value uses the same format.
- The library's datalabels background now works with a function colour.
- Existing properties, defaults and their JSON are unchanged.
Adds six demos (currency ticks, tick and tooltip functions, legend
filter, legend click function, segment styling, gradient fill), a
"JavaScript functions" getting-started section, docs tables, an unlisted
/demos/js-functions-self-check page that checks 44 cases on live charts,
and JSON tests.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Chart.js options that take a JavaScript function can now be set from C#. The app registers each function by name in its own JavaScript file, and C# references it with ChartFunction. Only registered functions resolve: a name is never evaluated as code, and globals such as window.open or fetch can't be reached by name.
Adds six demos (currency ticks, tick and tooltip functions, legend filter, legend click function, segment styling, gradient fill), a "JavaScript functions" getting-started section, docs tables, an unlisted /demos/js-functions-self-check page that checks 44 cases on live charts, and JSON tests.