I have four different HighChart spline charts. All contain six series representing the six New England states. I want to click any legend and hide/show that series in all charts. I have tried legendclickitem but cannot get it to effect both charts. Is what i am asking possible, if so can you point me in the right direction, thanks.
Answer:
Using Paweł FusIn code and in order to keep a legend on each chart I used the following code. You can click on any legend item and it updates all charts.
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
if (this.visible) {
$('#container1').highcharts().series[this.index].hide();
$('#container2').highcharts().series[this.index].hide();
$('#container3').highcharts().series[this.index].hide();
$('#container4').highcharts().series[this.index].hide();
}
else {
$('#container1').highcharts().series[this.index].show();
$('#container2').highcharts().series[this.index].show();
$('#container3').highcharts().series[this.index].show();
$('#container4').highcharts().series[this.index].show();
}
return false;
}
}
}
It's possible, take a look: http://jsfiddle.net/teEQ3/
$('#container1').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
enabled: false
},
series: [{
id: 'someId',
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]
}]
});
$('#container2').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
events: {
legendItemClick: function (event) {
var XYZ = $('#container1').highcharts(),
series = XYZ.get(this.options.id); //get corresponding series
if (series) {
if (this.visible) {
series.hide();
} else {
series.show();
}
}
}
}
}
},
series: [{
id: 'someId',
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]
}]
});
So the idea is to enable only in one chart legend, then in all respective charts hide corresponding series.
Related
I'm trying to add a series to an empty chart in high charts, this chart will sometimes have a plot border but when adding a series to a chart with a plot border, the plot border doesn't seem to adjust to meet the new plot area.
Here is a jsfiddle with the problem
http://jsfiddle.net/Lzpztwf7/1/
var chart = Highcharts.chart('container', {
chart: {
renderTo: 'container',
borderWidth: 1,
borderColor: '#fff',
plotBorderWidth: 1,
plotBorderColor: '#777',
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
});
chart.addSeries({"name":"series 1","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]});
And here is a jsfiddle of how it should look, with the series defined in the options:
http://jsfiddle.net/ebj9jn6w/
var chart = Highcharts.chart('container', {
chart: {
renderTo: 'container',
borderWidth: 1,
borderColor: '#fff',
plotBorderWidth: 1,
plotBorderColor: '#777',
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{"name":"series 1","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]}]
});
It's not possible for me to just add the series in at the start because the users add the data in, and can remove it and add new data, as well as change various options on the chart either before or after adding data.
Try adding an empty series in the initial options and the use the series.update from the API to update
HIGHCHARTS DEMO
var chart = Highcharts.chart('container', {
chart: {
renderTo: 'container',
borderWidth: 1,
borderColor: '#fff',
plotBorderWidth: 1,
plotBorderColor: '#777',
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{}]
});
chart.series[0].update({name: "Your 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]})
So far I've been able to adjust the size of the pointWidth on a bar chart, which simply changes the width of the bar. But what I really want is the axis to also match that size. For example, take a look at this:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
pointWidth: 10
}
},
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]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
The pointWidth means the bar is actually smaller, but the xAxis is actually not adjusting it's size to match it. How can I adjust that size?
Height of each data point container is calculated depending on the height of the main container. See the 320px vs 400px container height in the example below.
var opt = {
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
pointWidth: 10
}
},
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]
}]
};
Highcharts.chart('container1', opt);
Highcharts.chart('container2', opt);
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="height: 320px"></div>
<div id="container2" style="height: 400px"></div>
I have this following code:
Check the JS Fiddle Here
var chart = Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
plotLines: [{
value: 1,
color: 'red',
width: 2,
zIndex: 10
}]
},
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 button action
var $button = $('#button');
$button.click(function () {
console.log(chart.xAxis);
var newValue = (chart.xAxis[0].options.plotLines[0].value + 1) % 12;
chart.xAxis[0].options.plotLines[0].value = newValue;
chart.xAxis[0].update();
});
What I would like to do is to draw a vertical line up to xAxis which I click.
So for example, if I click on January he draws a vertical line up to January, but if i click on November he erases the line of January and draws a new line up to November.
Please, help me.
Thanks =)
I am using chart events click function to track click and add plotLine accordingly. So click respective region for month inside chart and get plot line drawn and erase.
var chart = Highcharts.chart('container', {
chart: {
events: {
click: function(e) {
//console.log(e.xAxis[0].axis.categories[Math.round(e.xAxis[0].value)])
chart.xAxis[0].options.plotLines[0].value = Math.round(e.xAxis[0].value);
chart.xAxis[0].update();
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
plotLines: [{
value: 1,
color: 'red',
width: 2,
zIndex: 10
}]
},
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 button action
var $button = $('#button');
$button.click(function() {
console.log(chart.xAxis);
var newValue = (chart.xAxis[0].options.plotLines[0].value + 1) % 12;
chart.xAxis[0].options.plotLines[0].value = newValue;
chart.xAxis[0].update();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">update plot line</button>
Using highcharts label formatter
http://api.highcharts.com/highcharts#yAxis.labels.formatter
I'm using the code below to customize the first label, and return the values for all others. Is this how I should use return twice within the formatter? While it works i'm just checking that there isn't a better way to write the function. I'm a little new to js and wondering if the returned data could be combined some how?
Thanks
jsfiddle here
$(function () {
$('#container').highcharts({
chart: {
marginBottom: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
labels: {
//align: 'left',
//x: 0,
//y: -2,
useHTML: true,
formatter:function(){
if(this.isFirst){
return 'test';
}
return this.value;
}
}
},
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]
}]
});
});
I have been able to change the color of point in a graph dynamically, but when I hover over that point then the color of that point is changing to previous color.
I have a fiddle here: jfiddle
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
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 button handler
$('#button').click(function() {
chart.series[0].data[2].graphic.attr({ fill: '#FF0000' });
chart.redraw();
});
How can I change the color of the point dynamically in a graph?
I think you are looking to update the marker color dynamically.
you can use update functionality for this
chart.series[0].data[0].update();
Here is a jsFiddle for your reference. I hope this will be useful for you.
is this what you are looking for?
http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-states-select-fillcolor/
plotOptions: {
series: {
allowPointSelect: true,
marker: {
states: {
select: {
fillColor: 'red',
lineWidth: 0
}
}
}
}
}