NativeScript / nativescript-ui-charts

NativeScript wrapper around HiCharts library
Apache License 2.0
26 stars 6 forks source link

Feature request, please add an option to allow for injection of custom variables which can be used in highcharts formatters like legend or label formatters #10

Open cjohn001 opened 3 years ago

cjohn001 commented 3 years ago

Hello, I would like to display statistical data within the highchart charts, for example mean or median of a distribution. Currently I see no way to pass variables from the nativescript code down to the highcharts object.

cjohn001 commented 3 years ago

@shiv19 might you also have an idea how I could get some custom data for a series to a legend.labelFormatter() with the current functionality? I would like to plot the average value of a series into the legend with a custom formatter. As the average is computed outside of the chart (chart does not hold all data for it) I would need to set it somehow on the chartOptions.

shiv19 commented 3 years ago
labelFormatter: function () {
        if (this.visible) {
          return `<div style="box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);background-color: rgb(233, 233, 233);padding: 5px 10px; margin: 0px 0px 7px 0px;border-radius: 8px;border-bottom: 4px solid ${this.color};"><div style="font-family: Helvetica;font-weight: normal;display: inline-block;position: relative;color: #555;">${this.name}</div></div>`;
        } else {
          return `<div style="background-color: rgba(255,255,255,0.2);padding: 5px 10px; margin: 0px 0px 7px 0px;border-radius: 8px;"><div style="font-family: Helvetica;font-weight: normal;display: inline-block;position: relative;color: white;">${this.name}</div></div>`;
        }
      },

I've only used a few special keys that are available inside the labelFormatter function. Haven't tried passing something from NativeScript.

But you might be able pass it by binding your nativescript variable to the label formatter function.

something like

labelFormatter: function(nsVar1, nsVar2) {
   // return your label format
}.bind(this, nsVar1, nsVar2)

But I think that this technique would alter the "this" variable inside the label formatter.