[Anthony]

The jsfiddle only works if you hover on the first chart. Hovering over the second chart doesn’t cause the first chart to show the crosshair.

If you have both charts configured to cause the other to show the crosshair then you get a stack overflow since a mouse event triggers a mouse event on the other canvas, which relays it back. This happens in a loop until your browser crashes. Need a better solution.

[Anthony]

This is unusable performance-wise with large charts though. Is there a way to trigger just the legend to re-render. Drawing the entire unchanged graph over again takes way too long.

[Anthony]

Figured it out. Gotta use setter methods:

                itemmouseover: function (e) {
                    $(e.chart._canvasJSContainer).attr("title", "My custom tooltip");
                    console.log('mouseover');
                    e.chart.legend.set("fontColor", 'orange');
                    e.chart.legend.set("backgroundColor", 'blue');
                    e.chart.legend.set("borderColor", 'red');
                    e.chart.legend.set("borderThickness", 3);
                    e.chart.legend.set("fontStyle", 'italic');
                    e.chart.legend.set("fontWeight", 'bold');
                    e.chart.render();
                },
                itemmouseout: function (e) {
                    $(e.chart._canvasJSContainer).removeAttr("title");                    
                    console.log('mouseout');
                    e.chart.legend.set("fontColor", 'black');
                    e.chart.legend.set("backgroundColor", 'transparent');
                    e.chart.legend.set("borderColor", 'transparent');
                    e.chart.legend.set("borderThickness", 0);
                    e.chart.legend.set("fontStyle", 'normal');
                    e.chart.legend.set("fontWeight", 'normal'); 
                    e.chart.render();
                }

[Anthony]

The following works for adding tooltip:

                itemmouseover: function (e) {
                    $(e.chart._canvasJSContainer).attr("title", "My custom toolip");
                    console.log('mouseover');
                    e.chart.legend.fontColor = 'orange';
                    e.chart.legend.backgroundColor = 'blue';
                    e.chart.legend.borderColor = 'red';
                    e.chart.legend.borderThickness = 3;
                    e.chart.legend.fontStyle = 'italic';
                    e.chart.legend.fontWeight = 'bold';
                    e.chart.render();
                },
                itemmouseout: function (e) {
                    $(e.chart._canvasJSContainer).removeAttr("title");                    
                    console.log('mouseout');
                    e.chart.legend.fontColor = 'black';
                    e.chart.legend.backgroundColor = 'transparent';
                    e.chart.legend.borderColor = 'transparent';
                    e.chart.legend.borderThickness = 0;
                    e.chart.legend.fontStyle = 'normal';
                    e.chart.legend.fontWeight = 'normal'; 
                    e.chart.render();
                }

But, doesn’t work for changing the color/style/border/whatever of the series label. Any tips on how to get that to work?

• This reply was modified 6 years, 8 months ago by Anthony.

[Anthony]

To clarify, streaming data over a websocket and incrementally rendering the chart would allow overlapping network wait and render wait.

[Anthony]

I’ve noticed that the scatter plot is much slower than a line chart. Also I’ve noticed that markerType square performs much better than markerType circle or triangle. Any reason for this? I’ve been using a dashed line chart instead of a scatter plot because of the huge performance difference with 100,000 points.