Skip to content

Tooltip #294

Description

@heinemannj

Is there any possibility to add a free configurable Tooltip (HTML DIV element) when moving the mouse over data points?
Google chart which I'm using right now has a lot of other limitations.

Examples and goals:

image

Activity

  1. heinemannj commented on Dec 22, 2021

    @heinemannj
    Author

    I've found the following workarround:

    const jsgraphStyle = {
    	id: 'chart0',
    	width: 1200,
    	height: 600,
    	XAxisForceMin: 100,
    	XAxisForceMax: 1300,
    	YAxisForceMin: 0,
    	YAxisForceMax: 100,
    	backgroundImage: null
    }
    
    graph.tracking( {
    	mode: 'individual',
    	textMethod: function(output) {
    		let txt = '';
    		let i = 0;
    		let documentClassId = document.getElementById(jsgraphStyle.id).getElementsByClassName('trackingLegend')[1];
    
    		for (i in output) {
    			if (!output[i].closestPoint) {
    				continue;
    			}
    			if (i >= 1) {
    				txt += '<br>';
    			}
    			txt += `${output[i].serie.getName()}: <br>
    				${jsgraph.axes.x.label}: 
    				${output[i].serie.getXAxis().valueToHtml(output[i].closestPoint.xClosest, true, true, 0)} 
    				${jsgraph.axes.x.unit}`;
    			txt += `<br> ${jsgraph.axes.y.label}: 
    				${output[i].serie.getYAxis().valueToHtml(output[i].closestPoint.yClosest, true, true, 2)} 
    				${jsgraph.axes.y.unit}<br>`;
    		}
    		documentClassId.style.backgroundColor = `rgb(${255 - output[i].closestPoint.xClosest * 0.3}, ${255 - output[i].closestPoint.xClosest * 0.3}, ${255 - output[i].closestPoint.xClosest * 0.3})`;
    
    		return txt;
    	},
    	series: [ jsgraph.series[0].name ],
    	legend: true,
    	legendType: 'common',
    	serieOptions: {
    		withinPx: 10
    	},
    } );
    

    However - A marker on the graph is missing with above:

    image

  2. NPellet commented on Dec 26, 2021

    @NPellet
    Owner

    Same here, I think d8c805d should fix this issue

  3. NPellet commented on Dec 29, 2021

    @NPellet
    Owner

    Which is now published as v2.4.13 on npm.

    Again, waiting for confirmation before closing

  4. heinemannj commented on Dec 30, 2021

    @heinemannj
    Author

    Tested again with v2.4.13 - Not working as expected.

    Above graph has not changed.

  5. NPellet commented on Dec 30, 2021

    @NPellet
    Owner
  6. heinemannj commented on Dec 31, 2021

    @heinemannj
    Author

    npm run build is broken in last commit d74f971:

    ERROR in ./src/graph.ts 36:44-82
    Module not found: Error: Can't resolve './series/graph.serie.box.js'
    
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions