I am trying to create a custom button next to legend as per below use-case:
1) button right of horizontal legend
2) button below vertical legend
JS Fiddle Link
Using chart renderer, I can add the button on chart but its coordinates are fixed. It is rendered as rectangle on chart (got to know after inspecting button using developer tools). Is there any way I can always keep this custom button next to any element inside chart, in my case, next to legend.
chart.renderer.button(...); // code inside jsfiddle link
Use lagend labelFormatter with useHTML:true to add button next to It.If You are using vertical legend you can add line break in legend labelFormatter
var chart;
chart=new Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
useHTML:true,
labelFormatter: function () {
return this.name + ' (click to hide) <button onclick="buttonAction()">Button Action</button>';
}
},
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]
}]
});
function buttonAction(){
if(chart.series[0].visible==true){ //button click will interfere with legend text click
chart.series[0].visible=false
}else{
chart.series[0].visible=true
}
console.log('button clicked')
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Related
I want to show cross hair by default in high chart not any event but it should always be there. How to show crosshair at every x-axis point in highchart?
Using highcharts api
The mouse course will change to crosshair when over a point on the chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'crosshair',
events: {
click: function () {
alert('You just clicked the graph');
}
}
}
},
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]
}]
});
using api jsfiddle
Using jquery
This will make the mouse cursor be a cross hair whenever its on the graph.
$("#container").css( 'cursor', 'crosshair' );
using jquery jsfiddle
I'm using HighCharts Pattern Fill plugin to apply different patterns for each data bar in a Bar chart. Look at this fiddle: http://jsfiddle.net/ravinsp/tme364td/
var rawdata = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
var datapoints = new Array();
for (var i = 0; i < 12; i++) {
datapoints.push({
y: rawdata[i],
color: 'url(#highcharts-default-pattern-' + (i % 10) + ')'
});
}
$('#container').highcharts({
chart: {
type: 'bar',
height: 50 * 12
},
title: {
text: 'Export and resize to see the issue'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: datapoints
}]
});
In Chrome only, if I Export the chart and then attempt to resize the chart, the pattern bars disappear. They are still there in the DOM svg but just not visually rendered. The actual exported image is correct. This only happens in Chrome. No issues on Firefox and IE Edge.
This only occurs if you use individual colors for each data point. This issue does not occur in charts with a single pattern for the entire series (eg. http://jsfiddle.net/9KtwA/1/).
Have anybody else encountered this issue?
In my chart I am combining a class together with datalables of each series.
At some point I am hiding datalables of one series. But If now I show/hide any other series, the hided datalables appears.
I made a jsfiddle example. Do the following steps to see my meaning:
1. click on button 1 to hide datalables on series1
2. Hide series 2
Now the datalables on series 1 shows up. How can I stop this behavior?
jsfiddle link: http://jsfiddle.net/jmogexfj/2/
$(function () {
button1();
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function () {
return '<div class="label_'+this.series._i+'">' + this.y + '</div>';
}
}
}
},
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]
},
{
data: [10.9, 50.5, 60.4, 100.2, 104.0, 106.0, 120.6, 108.5, 106.4, 104.1, 90.6, 50.4]
}]
});
});
function button1(){
$("#b1").click(function(){
$(".label_0").toggle();
});
}
That's how Highcharts library works. When you update chart (like hiding by legend, resizing window browser etc.), elements are redrawn.
To hide dataLabels, use series.update():
$('#container').highcharts().series[0].update({
dataLabels: {
enabled: false
}
});
Demo: http://jsfiddle.net/jmogexfj/4/
If you really need to use classes, then use chart.events.redraw to show/hide dataLabel on each redraw: http://jsfiddle.net/jmogexfj/5/
Highcharts example:
chart: {
events: {
redraw: function () {
var showOrHide = display ? 'show' : 'hide';
$(".label_0")[showOrHide]();
}
}
},
Click button:
function button1() {
$("#b1").click(function () {
display = !display;
$(".label_0").toggle();
});
}
I search for a way to display a tooltip permanently:
click on the point --> tooltip is cloned and displayed permanently
if you click on the same point again, the clone is removed
multiple tooltips are allowed to be displayed at the same time
Most of the things I got to work but there are some little issues that needs to be fixed:
http://jsfiddle.net/jtnDz/1/
$(function () {
cloneToolTip = null;
checkx = [];
checky = [];
clone = [];
del = [];
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
//check if point was already clicked
if (checkx.indexOf(event.point.x) >= 1 & checky.indexOf(event.point.y) >= 1) {
//remove tooltip
chart.container.firstChild.removeChild(clone[checkx.indexOf(event.point.x)]);
//remove xy coordinate and clone from array --> tooltip can be displayed again
/*del=checkx.indexOf(event.point.x);
clone.splice(del, 1);
checky.splice(del, 1);
checkx.splice(del, 1);*/
}
//cloneToolTip=null;
if (checkx.indexOf(event.point.x) == -1 & checky.indexOf(event.point.y) == -1) {
cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
chart.container.firstChild.appendChild(cloneToolTip);
//save coordinates and tooltip object
checkx.push(event.point.x);
checky.push(event.point.y);
clone.push(cloneToolTip);
}
}
}
}
}
},
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]
}]
});
});
My problems are:
the first selected tooltip, i.e. its clone, cannot be removed
When a clone is removed, you cannot display the tooltip again permanently. I tried to remove the corresponding entries in all three arrays (commented code block) but then none of the clones is removed after this correction
I'm really a beginner and google a lot to find examples but this problem I could not fix on my own. Can someone give me a hint?
Thanks!
The problem is with value returned from inArray(). It will return index of array, so it start from 0, while your if statement comapres with 1.
Also, I have made some other changes (otherwise in Chrome I get some errors). Example: http://jsfiddle.net/7vkZV/
For some reason, the scrollbar option for Highcharts is not working on my Rails 3.2.1 application. What is odd is that everything looks exactly the same as this: http://jsfiddle.net/highcharts/fj6d2/
... except that the scrollbar is missing. I have the exact same code as that shown in the jsfiddle above, the graph appears on my local application, but the scrollbar is missing.
This is the code in my local app, the same as in the jsfiddle:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: 6
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
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]
}]
});
Again, the graph shows, but only the scrollbar doesn't. Why isn't the scrollbar showing? Has anybody had success using a scrollbar in their highcharts graphs? I would love to get a fix for this, I really am stumped as to why its not working.
I figured out what was wrong. In my local app, I was loading the highcharts.js file, whereas in the jsfiddle it was loading highstock.js. Adding this:
<script type="text/javascript" src="http://www.highcharts.com/js/highstock.js"></script>
fixed the problem.