javascript - How to convert tooltip to onclick event in high charts? -
i have column highchart on mouseover entire month values showing want 1 place value on click eventi having mouse on functionality. need tooltip on mouse click event in highcharts.
highcharts.chart('container', { title: { text: 'mouse events demo' }, subtitle: { text: 'on point mouse click, values should reported in top left' }, plotoptions: { series: { point: { events: { mouseover: function() { var chart = this.series.chart; if (!chart.lbl) { chart.lbl = chart.renderer.label('') .attr({ padding: 10, r: 10, fill: highcharts.getoptions().colors[1] }) .css({ color: '#ffffff' }) .add(); } chart.lbl .show() .attr({ text: 'x: ' + this.x + ', y: ' + this.y }); } } }, events: { mouseout: function() { if (this.chart.lbl) { this.chart.lbl.hide(); } } } } }, tooltip: { enabled: false }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] });
the code available on jsfiddle too. instead of mouse hover want on click event.
replace javascript part in fiddle below code
highcharts.chart('container', { title: { text: 'mouse events demo' }, subtitle: { text: 'on point mouse on or mouse out, values should reported in top left' }, plotoptions: { series: { point: { events: { click: function () { var chart = this.series.chart; if (!chart.lbl) { chart.lbl = chart.renderer.label('') .attr({ padding: 10, r: 10, fill: highcharts.getoptions().colors[1] }) .css({ color: '#ffffff' }) .add(); } chart.lbl .show() .attr({ text: 'x: ' + this.x + ', y: ' + this.y }); } } }, events: { mouseout: function () { if (this.chart.lbl) { this.chart.lbl.hide(); } } } } }, tooltip: { enabled: false }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] });
just changed mouseover function click
wiki
Comments
Post a Comment