Chart.pluginService

[Olmer1st]

Hello,

Can you add support for Chart.pluginService? Chart.js documentation: http://www.chartjs.org/docs/#advanced-usage-creating-plugins

Below the example of usage: https://jsfiddle.net/cmyker/ooxdL2vj/

Thanks

[rickyricky74]

Is there an alternative way to fill in the background color if we cannot use the "beforeDraw" event through the missing pluginService? I am using 2.5.0 and for the life of me, I cannot find this pluginService or plugins array in the chart object. I am using the toBase64Image() method to export a PNG and the background displays black when printing. It is unacceptable if there is no way to change the background color. Also, I am using ng2-charts with Angular 2 so perhaps there is something about my environment that is hosing this capability. Am I missing something here or do I have to wait until this enhancement is implemented?

[edit] Just noticed this is for angular-chart. Perhaps my question is misdirected.

[vlad-ursan]

Is there a workaround for this until the pluginService support is implemented? Some way to register plugins via the Chart object?

[nkoterba]

As @vlad-ursan said, is there any way to pass plugin parameters to the chart's constructor?

I'm trying to implement the following (based on https://stackoverflow.com/a/43092029):

const verticalLinePlugin = {
  getLinePosition: function (chart, pointIndex) {
      const meta = chart.getDatasetMeta(0); // first dataset is used to discover X coordinate of a point
      const data = meta.data;
      return data[pointIndex]._model.x;
  },
  renderVerticalLine: function (chartInstance, pointIndex) {
      const lineLeftOffset = this.getLinePosition(chartInstance, pointIndex);
      const scale = chartInstance.scales['y-axis-0'];
      const context = chartInstance.chart.ctx;

      // render vertical line
      context.beginPath();
      context.strokeStyle = '#ff0000';
      context.moveTo(lineLeftOffset, scale.top);
      context.lineTo(lineLeftOffset, scale.bottom);
      context.stroke();

      // write label
      context.fillStyle = "#ff0000";
      context.textAlign = 'center';
      context.fillText('MY TEXT', lineLeftOffset, (scale.bottom - scale.top) / 2 + scale.top);
  },

  afterDatasetsDraw: function (chart, easing) {
      if (chart.config.lineAtIndex) {
          chart.config.lineAtIndex.forEach(pointIndex => this.renderVerticalLine(chart, pointIndex));
      }
  }
  };

  Chart.plugins.register(verticalLinePlugin);

 new Chart(ctx, {
     type: 'line',
     data: data,
     label: 'Progress',
     options: options,
     lineAtIndex: [2,4,8],
 })

I can successfully register the plugin with Chart.js, but don't know how to pass lineAtIndex data array into the angular directive you've wrapped around Chart.js.

Thanks!

[chorsnell]

@nkoterba did you have any luck on this?

[rickyricky74]

No. I never found a solution to this problem.

On Wed, Aug 30, 2017 at 10:03 AM, Chris [email protected] wrote:

@nkoterba https://github.com/nkoterba did you have any luck on this?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jtblin/angular-chart.js/issues/477#issuecomment-326019266, or mute the thread https://github.com/notifications/unsubscribe-auth/AH8LyD6iZ2s7BPF_kZvsA1GXPJUkXMOnks5sdXm-gaJpZM4Ju5Pr .

[nkoterba]

@poppahorse I can't truthfully remember if I tried passing my lineAtIndex properties to the options object I passed into the angular-chart directive or not and whether that worked or failed. Sorry.

Ultimately, I needed to redraw an SVG line on data update, so I just used the chart's individual methods and it's exposed canvas context, ctx to draw my vertical line in regular javascript code. See below:

this.chart.render()

      if (timestamp != null) {
        let eventIndex = _findIndex(
          this.chart.data.datasets[CHART_EVENT_DATASET_INDEX].data,
          {x: timestamp})
        let eventMetaModel = this.chart.getDatasetMeta(
          CHART_EVENT_DATASET_INDEX).data[eventIndex]._model
        let scale = this.chart.scales['left-y-axis']

        if (eventIndex !== -1) {
          this.chart.ctx.beginPath()
          this.chart.ctx.moveTo(eventMetaModel.x, scale.top)
          this.chart.ctx.strokeStyle = lineColor
          this.chart.ctx.lineWidth = 3
          this.chart.ctx.lineTo(eventMetaModel.x, scale.bottom)
          this.chart.ctx.stroke()
        }
      }

[JohnSalvador]

I'm late to the party but I found a work around by using app.config: app.config(['ChartJsProvider', function(ChartJsProvider){ Chart.pluginService.register({ beforeDraw: function(chart,easing) { //arbitrary before draw functionality here } //, other pluginService functions to register here }); })

[Stanislaw-Rudnicki]

@JohnSalvador Thank you, your solution was very helpful to me!