score:2
Accepted answer
$(function() {
$('#container4').highcharts({
chart: {
type: 'column',
events: {
click: function(e) {
console.log(e);
},
selection: function(e) {
console.log(e);
}
}
},
title: {
text: ''
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xaxis: {
gridlinecolor: '',
labels: {
enabled: false
}
},
yaxis: {
title: {
text: 'fruit'
},
visible: false
},
credits: {
enabled: false
},
plotoptions: {
/*series: {
allowpointselect: true,
states: {
select: {
color: 'blue',
}
}
},*/
column: {
stacking: 'normal',
}
},
series: [{
name: '',
data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100],
threshold: 0,
color: '#e0e0e0 ',
enablemousetracking: false,
}, {
name: '',
data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50],
threshold: 0,
color: 'green',
negativecolor: 'red',
}, ]
});
});
$(document).on('click', '.highcharts-tracker rect', function() {
var elm = $(this);
if (!elm.attr('class')) {
$('.highcharts-tracker rect').removeattr('class').css('opacity', 0.5);
elm.attr('class', 'active').css('opacity', 1);
$('#pointer').show().
offset({
top: elm.offset().top - 30,
left: elm.offset().left + 10
})
}
});
$('#pointer').click(function() {
$('.highcharts-tracker rect').removeattr('class').css('opacity', 1);
$(this).hide()
})
.highcharts-series rect {
transition: all .3s ease;
}
#pointer {
height: 30ph;
width: 10px;
display: noone;
background-color: blue;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container4"></div>
<div id="pointer">x</div>
Source: stackoverflow.com
Related Query
- Trying to produce a pop up when the chart is clicked. The pop up is a close button
- How to make legend labels to bring out the series of a pie chart and not make them disappear when label is clicked in HighCharts?
- How can I open a high chart in a modal window when the chart is clicked on?
- Highcharts => Getting the id of a point when clicking on a line chart
- Highcharts saying undefined is not a function when trying to add a new chart
- Highstock: When legend under the chart has many items, the chart height is small. How can I fix the height?
- Using Highcharts and displaying a message over or on the chart when there is no data
- Remove Tooltip in Synchronized Charts, When user leaves the chart area
- Show gridLines when the chart is empty(no series) in highstock
- Get name of clicked point in Highcharts when the point has drilldown
- Highcharts - Rotate pie chart aligning the clicked section to a fixed point (180°)
- Highcharts stock chart - Technical Indicators - Stock price is missing in the tooltip when selecting the 'All' range
- trying to draw dotted lines over the chart
- Why do I have the issue 'property assigment expected' when I want to display a chart on my web page using highcharts
- Highcharts - how to do a responsive pie chart when the texts of the labels are long
- Categories overlaps when export the chart
- How to render a vertical line when the mouse cursor is on the chart using highcharts?
- How to show open, close, high and low in tooltip when the chart type is 'line' in highstocks?
- Show tooltips of piechart when hover outside of the chart on a button
- change datalabels color in a HighCharts chart when hovering without updating the series
- React-highcharts: how do I stop the chart from re-animating when a certain prop changes?
- Highcharts: how to get the point category clicked on when drilling down?
- Does not return data as intended when creating the chart
- How can I reveal my chart tooltip programatically when the tooltip combines data from multiple series? (sync charts)
- Zoom function breaks the xAxis labels and creates chart gaps when exiting zoom
- Strange character in the Highstock source code
- in HighChart the X axis 0(zero) geting up in the middle of the chart when there is no record or all the records are zero
- HighCharts title styles i.e textDecoration property not applying when we export the chart using canvg
- How do i color the highcharts legend square symbol when my chart has multiple color entries
- Highchart changes chart width when user hides the graph lines
More Query from same tag
- Highcharts export to svg
- How do I make npm pack "highcharts-export-server" wait for it to finish processing
- Retrieve data from Controller to View using Json to HighCharts
- Display start and end date range in timeseries LineChart using HighCharts
- Highchart, dynamically change the chart type
- Why try catch around highchart constructor does not catch error#12 but error#19?
- Highcharts - mouse event in chart - e.Offset solution across browsers
- Highcharts - On and Off over Time
- Highstock tooltip.positioner isn t working
- display content on highcharts Xaxis and Yaxis title in form of subscript and superscript
- Is there a way to fill different colors up to the desired point in Highcharts gauge graph?
- Radial Pie Chart Datalabels in Highcharts
- Highcharts IE issues with jQuery ajax load
- X axis tick not centering on column series in highcharts (jsFiddle)
- An alternative way of displaying the negative values on the column chart
- How to change highcharts radius according to data
- Pie chart options in ZingChart
- Gridline only on 0 in column range
- Highcharts: change line options mid-way through a line
- Changing number of columns based on the zoom level : HighChart (column chart type)
- Radar Chart: Label outside the chart
- import data from localhost(phpmyadmin) to a web page"Highcharts"(as a project in phpmyadmin)
- Center title of chart relative to the plot background
- Returning correctly formatted json response for use in highcharts with Laravel
- Prevent y-zoom for specific series/y-axis on highcharts
- Displaying yAxsis data for columnrange highchart
- Configure Highstock export server in Play framework (java) 1.2.5
- Comparing percentage with Highstock
- Why inactive option not working on scatter highcharts
- Error scraping Highcharts in Python with selenium