I have a problem with the chart!
How can I enlarge and fixed the point I clicked on?
An example of my chart below, I will be grateful for the help
example: http://jsfiddle.net/4bounhdg/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
enabled: true,
symbol: 'circle',
radius: 6},
point: {
events: {
click: function() {
for (var i = 0; i < this.series.data.length; i++) {
this.series.data[i].update({ color: '#7db7ed' }, true, false);
}
this.update({ color: '#0053ff'}, true, false);
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0]
}]
});
});
You can set the higher radius in the update callback.
Demo: http://jsfiddle.net/BlackLabel/rkqtcps8/
point: {
events: {
click: function() {
this.update({
color: '#0053ff',
marker: {
radius: 20
}
}, true, false);
}
}
}
API: https://api.highcharts.com/class-reference/Highcharts.Point#update
Related
I tried to resize the width and height of my custom button in highcharts, but I can't find any demo or tutorial about this.
http://jsfiddle.net/Murali_Kaliappan/2F4pJ/1029/ is my fiddle
$(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]
}],
exporting: {
buttons: {
customButton: {
x: -62,
onclick: function () {
alert('Clicked');
},
symbol: 'url(https://png.icons8.com/metro/1600/expand.png)',
height:18,
width:18
}
}
}
});
});
customButton.symbol should be used with SVG objects - that's why configuration options like height and width don't work.
You can use Highcharts defs to define image background for your button:
JS:
defs: {
custombtnbg: {
tagName: 'pattern',
id: 'custom-btn-bg',
x: 0,
y: 0,
width: 24,
height: 24,
children: [{
tagName: 'image',
width: 24,
height: 24,
href: 'https://png.icons8.com/metro/1600/expand.png'
}]
}
},
(...)
exporting: {
buttons: {
customButton: {
x: -62,
id: 'btn',
onclick: function() {
alert('Clicked');
},
text: '',
className: 'custom-btn',
theme: {
'stroke-width': 0
}
}
}
}
CSS:
#import 'https://code.highcharts.com/css/highcharts.css';
.custom-btn {
fill: url(#custom-btn-bg);
}
Live demo: http://jsfiddle.net/BlackLabel/u4Lx71by/
Doc about defs: https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
Can anyone help me set step value on x-axis or y-axis dynamically say on clicking a button (not at the design time). In the example below, I should be able to set the step/interval as 100 instead of 250.
here is the example fiddle
http://jsfiddle.net/PanicJ/H2pyC/8/
$(function () {
var setA = [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4];
var setB = [129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4];
var data = Math.random() < 0.5 ? setA : setB;
var height=Math.max.apply(Math, data);
if(height > 1000){
height = 1000;
}
$('#container').highcharts({
chart: {
marginRight: 80 // like left
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{
lineWidth: 1,
max: height,
min: 0,
title: {
text: 'Primary Axis'
}
}],
series: [{
data: data
}]
});
});
The tickInterval is what you want to change:
$('#setStep').click(function () {
var chart = $('#container').highcharts();
chart.yAxis[0].update({
tickInterval: 100
});
});
http://jsfiddle.net/blaird/H2pyC/85/
I'm working with Highchart. I've got a multiple series graph in which several series can be associated to the same y-axis. The association is based on the measurement unit, which is also the y-axis id. Series are added dynamically.
Each y-axis has setExtremes() different than null and for this reason I have encountered one problems that it seems I can't resolve.
When hiding a series. I want the associative y-axis to be visible until all the series associated to that specific axis are hidden also. At the moment I was able just to hide the y-axis once one of the series is set to series.hide()
The used code is presented below. And can be accessed in jsfiddle through this like: http://jsfiddle.net/39xBU/134/ .
$(function () {
//creates chart options
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: 'Axis manipulation'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
id:'°C',
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title:{
text:''
},
opposite: true,
showEmpty: false
}, { // Secondary yAxis
id:'mm',
gridLineWidth: 0,
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
},
title:{
text:''
},
showEmpty: false
}],
tooltip: {
formatter: function() {
var unit = {
'Rainfall': 'mm',
'Temperature': '°C',
'Sea-Level Pressure': 'mb'
}[this.series.name];
return ''+
this.x +': '+ this.y +' '+ unit;
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: '#FFFFFF'
},
series: []
};
// Adds series to the chart. i do this because in the real application I add data dinamically
options.series.push({
name: 'Rainfall',
color: '#4572A7',
type: 'spline',
yAxis: getAssociativeYAxisIndex('mm', options.yAxis),
data: [149.9, 171.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 195.6, 154.4]
});
options.series.push({
name: 'Sea-Level Pressure',
type: 'spline',
color: '#4572A7',
yAxis: getAssociativeYAxisIndex('mm', options.yAxis),
data: [116, 116, 115.9, 115.5, 112.3, 109.5, 109.6, 110.2, 113.1, 116.9, 118.2, 116.7],
marker: {
enabled: false
},
dashStyle: 'shortdot'
});
options.series.push({
name: 'Temperature',
color: '#89A54E',
type: 'column', // date is not shown only if it is 'spline'
yAxis:getAssociativeYAxisIndex('°C', options.yAxis),
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
});
var chart = new Highcharts.Chart(options);
//after rendering I set axis limits, based on their measurement unit.
var yAxis1 = chart.get('mm');
yAxis1.setExtremes(0, 200);
var yAxis2 = chart.get('°C');
yAxis2.setExtremes(0, 40);
// hide Rainfall button
$("#b1").click(function(){
chart.series[0].hide()
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
});
// hide sealevel button
$("#b").click(function(){
chart.series[1].hide()
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
});
// delete rainfall button
$("#b2").click(function(){
chart.series[0].remove();
chart.yAxis[1].setExtremes(null, null);
});
// delete sea-level button
$("#b3").click(function(){
chart.series[1].remove();
chart.yAxis[1].setExtremes(null, null);
});
//get's series associatie axis
function getAssociativeYAxisIndex(seriesMeasureUnit, yAxis) {
var axisIndex = -1;
$.each(yAxis, function (index, axes) {
if (seriesMeasureUnit == axes.id) {
axisIndex = index;
return false;
}
});
return axisIndex;
};
});
Any suggestions to this matter would be very useful.
You can simply check if all of series are hidden, this way: http://jsfiddle.net/39xBU/135/
And code:
new function to make it easy to read:
function hideShowAxis(series) {
var axis = series.yAxis,
show = false;
$.each(axis.series, function (i, e) {
if (e.visible) {
show = true;
}
});
axis.update({
labels: {
enabled: show
}
});
}
and execute:
// hide Rainfall button
$("#b1").click(function () {
chart.series[0].hide()
hideShowAxis(chart.series[0]);
});
// hide sealevel button
$("#b").click(function () {
chart.series[1].hide()
hideShowAxis(chart.series[1]);
});
I tried to plot a chart with column type with one series. The data can be both positive and negative. I tried to update the color of points that are larger than 0 (or less than 0) with one click. With the following example:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
for (var i = 0; i < this.series.data.length; i++) {
if (this.y < 0) {
if (this.series.data[i].y < 0)
this.series.data[i].update({ color: '#ECB631' }, false, false);
}else {
if (this.series.data[i].y > 0)
this.series.data[i].update({ color: '#ECB631' }, false, 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],
negativeColor: '#FF0000'
}]
});
Here is the link. http://jsfiddle.net/CkkbF/57/
I found that something interesting and weird:
If the point data is positive, the clicked column color will be changed, but other columns with positive data have slightly different color (seem highlighted.)
If the point data is negative, the clicked column color will stay the same (red in my example) until you mouse out of it. The other columns with negative data stays the same unless you try to mouse in/out of them.
Possibly a bug? How can I update them correctly?
I think you want to update series color, or series negativeColor, take a look: http://jsfiddle.net/CkkbF/60/
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
if (this.y > 0) {
this.series.update({
color: "#ECB631"
});
} else {
this.series.update({
negativeColor: "#ECB631"
});
}
}
}
}
}
},
For this.x, I am getting the index location when I push the data in via code. If I populate the data separately, like the following code, then this.x returns the right item. How can I fix this issue?
Works
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]
}]
Index location is getting pushed out for this.x here
var points = [{
Name: 'good',
Y: '15000'
}, {
Name: 'baad',
Y: '3000'
}, {
Name: 'wow',
Y: '2000'
}];
var chartData = {
GetChartSeries: function (points, name) {
var seriesData = [];
if (points != null && points != 'undefined') {
for (i=0; i<points.length; i++) {
seriesData.push({
name: ""+points[i].Name,
y: parseFloat(points[i].Y)
//,color: ''
});
}
}
return seriesData;
}
};
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80],
borderColor: '#A4A4A4',
borderRadius: 5,
borderWidth: 2
},
legend: {
enabled: false
},
title: {
text: 'Graduation Year Breakdown'
},
colors: ['#790000'],
legend: {
enabled: false
},
plotOptions: {
series: {
/*
dataLabels: {
enabled: true,
color: 'red'
},
*/
borderRadius: 3,
colorByPoint: true
}
},
tooltip: {
formatter: function() {
return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+
'in year: '+ this.x;
}
},
xAxis: {
categories: [],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Students'
}
},
series: [{
//name: 'Population',
data: chartData.GetChartSeries(points, ""),//[4000, 3400, 2000, 34000, 120000],
dataLabels: {
enabled: true,
//rotation: -90,
color: '#4F4F4F',
align: 'center',//'right',
//x: 4,
//y: 10,
style: {
fontSize: '12px',
//fontWeight: 'bold',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
While I am uncertain as to why your solution doesn't work, I can propose an alternative solution.
The tooltip formatter function has access to a number of different parameters. Instead of this.x, you could use this.point.name.
For example:
formatter: function() {
// If you want to see what is available in the formatter, you can
// examine the `this` variable.
// console.log(this);
return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+
'in year: '+ this.point.name;
}