Giter Club home page Giter Club logo

Comments (5)

jerairrest avatar jerairrest commented on May 3, 2024 7

Hey @flyingpath,

Full credit goes to @lschneiderman who came up with the solution in the Chartjs repo. chartjs/Chart.js#1861

Simply use the following options:

const options = {
	showAllTooltips: true
};

and put the following in your componentWillMount

componentWillMount() {
			Chart.pluginService.register({
				beforeRender: function (chart) {
					if (chart.config.options.showAllTooltips) {
						chart.pluginTooltips = [];
						chart.config.data.datasets.forEach(function (dataset, i) {
							chart.getDatasetMeta(i).data.forEach(function (sector, j) {
								chart.pluginTooltips.push(new Chart.Tooltip({
									_chart: chart.chart,
									_chartInstance: chart,
									_data: chart.data,
									_options: chart.options.tooltips,
									_active: [sector]
								}, chart));
							});
						});
						// turn off normal tooltips
						chart.options.tooltips.enabled = false;
					}
				}, afterDraw: function (chart, easing) {
					if (chart.config.options.showAllTooltips) {
						// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
						if (!chart.allTooltipsOnce) {
							if (easing !== 1) return;
							chart.allTooltipsOnce = true;
						}
						chart.options.tooltips.enabled = true;
						Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
							tooltip.initialize();
							tooltip.update(); // we don't actually need this since we are not animating tooltips
							tooltip.pivot();
							tooltip.transition(easing).draw();
						});
						chart.options.tooltips.enabled = false;
					}
				}
			});
		}

I just verified its working with this code. Let me know if you have anymore troubles!

Jer

from react-chartjs-2.

aaayumi avatar aaayumi commented on May 3, 2024 1

It didn't work for me.

I got the following error.

TypeError: Cannot read property 'register' of undefined Categories.componentWillMount src/categories.js:1593 1590 | } 1591 | 1592 | componentWillMount() { > 1593 | Chart.pluginService.register({ 1594 | beforeRender: function (chart) { 1595 | if (chart.config.options.showAllTooltips) { 1596 | chart.pluginTooltips = [];

from react-chartjs-2.

AdeelK93 avatar AdeelK93 commented on May 3, 2024

do you mean something like this? http://jsfiddle.net/5gyfykka/14/

from react-chartjs-2.

flyingpath avatar flyingpath commented on May 3, 2024

Yes! Any simple way to do that on react chartjs?
Or can only use it on charjs ?

from react-chartjs-2.

dbrodie122 avatar dbrodie122 commented on May 3, 2024

@aaayumi I got the same error. Check out my comment in #201 , managed to get things working.

from react-chartjs-2.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.