You should know that I am new to Highcharts, so if my code or question seem weird, let me know.
Users can add data series to a chart.
When users click on the legend of a data series, that data series get's hidden from the chart and the legend get's grayed out. I want to change this behavior so that when users click on the legend of a data series, that data series should be completely removed from the chart, not only hidden.
I tried by writing the following code in highcharts-graph.js:
plotOptions: {
line: {
events: {
legendItemClick: function () {
this.remove(true);
}
}
}
}
This code removes the legend. But when a user adds another data series to the chart, the legend of the deactivated data series re-appears. So I believe that I need to modify the code to remove the data series instead of the legend.
To avoid error being thrown legendItemClick function could return false. To avoid same names or mixed indexes for series, it is possible to set names and indexes for new series.
JSFiddle: http://jsfiddle.net/jct0msdt/
$(function () {
$('#container').highcharts({
plotOptions: {
line: {
events: {
legendItemClick: function () {
this.remove(true);
return false;
}
}
}
},
series: [{
data: [1, 2, 3, 4, 5, 6, 7]
}, {
data: [3, 4, 5, 6, 7]
}, {
data: [2, 3, 4, 5, 6, 7]
}, {
data: [4, 5, 6, 7, 8, 9]
}]
});
var i = 5,
chart = $('#container').highcharts();
$('#button').click(function () {
chart.addSeries({
data: [i, i + 2, i + 4],
index: i,
name: 'Series ' + i
});
i++;
});
});
Related
I have a question regarding to Highcharts option for plotting a "pie-of-a-pie" chart. I need to show something similar to the one: https://www.amcharts.com/demos/pie-of-a-pie/?theme=material Can i do the same thing in Highcharts? If yes please do help.
If not possible in High Charts, can you please help in amcharts only?
Yes, you can achieve that result in Highcharts. You can use two pie series and update one of them in series.point.events.click funtion. For example:
series: [{
data: [{
y: 1,
details: [1, 3, 2]
}, {
y: 2,
details: [4, 31, 2]
}, {
y: 3,
details: [14, 3, 2]
}],
point: {
events: {
click: function() {
var series = this.series.chart.series;
series[1].setData(this.details.slice());
}
}
},
center: [200, 100],
size: 200
}, {
size: 100,
center: [500, 100],
data: []
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4996/
API Reference:
https://api.highcharts.com/highcharts/series.pie.size
https://api.highcharts.com/highcharts/series.pie.center
https://api.highcharts.com/highcharts/series.pie.point.events.click
https://api.highcharts.com/class-reference/Highcharts.Series#setData
I create a high chart using angular 4 and I want to highlight a particular portion of Highchart.
Ex Image :https://www.screencast.com/t/MHxo59j2dM
As per above image if data point value goes below to some limit (like 0) then highlight with "Red" color and if it goes below 8 then highlight with Yellow
I'm not sure whether its possible with Highchart or not but if someone had created this kind of features then please let me know.
Highchart provides Area Chart option - https://www.highcharts.com/demo/area-negative but my chart is normal and I don't want to highlight all series point.
There's no such functionality in Highcharts, but you can mimic it by using polygon series and plot lines:
var chart = Highcharts.chart('container', {
plotOptions: {
polygon: {
showInLegend: false
}
},
yAxis: {
tickInterval: 1,
plotLines: [{
value: 4,
color: 'orange',
width: 2
}, {
value: 3,
color: 'red',
width: 2
}]
},
series: [{
data: [6, 4, 3, 1, 2, 3, 4, 7]
}, {
type: 'polygon',
data: [[1,4], [2, 4], [2,3]],
color: 'orange'
}, {
type: 'polygon',
data: [[5,4], [6, 4], [5,3]],
color: 'orange'
}, {
type: 'polygon',
data: [[2,3], [5, 3], [4,2], [3,1], [2,3]],
color: 'red'
}]
});
Live working example: http://jsfiddle.net/kkulig/fbomb7cf/
It will require some programming to make the process of creating these areas automatic (in my fiddle everything is hard-coded).
To achieve similar styling you can try patter fill Highcharts plugin: https://www.highcharts.com/blog/extension/pattern-fill/
API references:
http://api.highcharts.com/highcharts/series.polygon
http://api.highcharts.com/highcharts/yAxis.plotLines
I have two arrays I would like to display in Highcharts with custom buttons : Day and Week.
To reset the chart and display the original data I need a reset button but my problem is that it fails to render this specific array (original_data).
What could be the reason of this issue and how can I sort it out ?
Thank you,
JSFiddle
original_data = [1, 2, 3, 4, 5];
new_data1 = [6, 7, 6, 7, 6];
new_data2 = [15, 14, 13, 12, 11];
var mychart = Highcharts.chart('container', {
series: [{
name: 'Total',
data: original_data,
type: 'area'
}
],
exporting: {
buttons: {
first_Button: {
text: 'Day',
onclick: function () {
mychart.series[0].setData(new_data1);
}
},
second_Button: {
text: 'Week',
onclick: function () {
mychart.series[0].setData(new_data2);
}
},
third_Button: {
text: 'Reset',
onclick: function () {
mychart.series[0].setData(original_data);
}
}
}
}
});
You passed original_data in configuration object. Now everytime you call setData(new_data) you override original_data cause it works as reference.
So when you click 'Week' button in the background it looks like:
original_data = new_data2;
The solution is to pass clone of original_data in configuration object.
Example: JSFiddle
I'm trying to dynamically update a C3.js line chart using a function that get a set of x and y values from a database. The function I'm trying to use to insert the data is:
function insertGraph(yAxis, xAxis, Header) {
setTimeout(function () {
console.log("starting");
chart.load ({
bindto: "#graph",
xs: {
'y':'x'
},
columns: yAxis, xAxis
});
}, 100);
}
The data being passed into the function looks like this:
yAxis:
["y", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
xAxis:
["x", 0, 131.35, 26971.3, 27044.75, 27351.4, 27404.483333333334, 27419.416666666668, 33128.96666666667, 33549.13333333333, 34049.48333333333, 77464.26666666666, 77609.71666666666, 174171.85, 259166.98333333334]
Header:
MakeModeChange #just a string
I know I'm doing something fundamentally wrong here, but any help would be appreciated
Just in case anyone needs it I managed to figure out my issue. It's all in how you do the "columns" portion (it need to be bound in []). Here's the fixed code just in case:
function insertGraph(yAxis, xAxis, Header) {
setTimeout(function () {
chart.load ({
bindto: "#graph",
xs: {
'y':'x'
},
columns: [
yAxis,
xAxis
]
});
}, 100);
}
I am using the Highcharts API, and am using a Column Range chart to represent a schedule of events. The vertical axis represents event IDs, the horizontal axis represents the time.
User should be able to add a single event by clicking the chart.
Once added, user should be able to click the newly added event to remove it.
After removal, user should then be able to click the chart again to re-add the new event in another location.
For the most part, this all works fine - See JS Fiddle Demo
On the demo, first click the chart to add a red bar. Then click the red bar to remove it. This is exactly as it should work. The problem is that if you try to add the red bar again after removing it, the categories on the vertical axis increase.
How do I add a point, then remove it, then add it again without "regenerating" extra categories on the vertical axis?
Here's the code (working JS fiddle is linked above). I've tried to simplify it as much as possible in order to focus on the problem at hand.
$(function () {
var flag = false;
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
events: {
click: function (e) {
if (!flag) {
var y = e.yAxis[0].value;
this.series[0].addPoint({
name: 'New',
low: y,
high: (y + 10),
color: 'red',
events: {
click: function () {
this.remove();
flag = false;
}
}
});
flag = true;
}
}
}
},
xAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
tooltip: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[3.2, 8.5]
]
}]
});
});
I've read through the Highcharts API and tried everything I can think of but to no avail. Any help is appreciated. Thanks.
A collaborative effort between the OP and myself ...
Re-inject the original x-axis categories and series data :
events: {
click: function () {
this.remove();
chart.xAxis[0].update({
categories: xAxisCategories
});
chart.series[0].update({
data: seriesData
});
flag = false;
}
}
where :
chart = $('#container').highcharts()
xAxisCategories = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
seriesData = [....] (the original series data)
updated fiddle