In Highcharts.js is it possible to disable/enable a given category by clicking on it? In the same way as you can disable/enable a given series in a legend by clicking on it.
If not, what is the next best alternative?
Disabling a category by clicking on it is not supported in Highcharts by default. To acheieve the wanted result you need to add custom code. For example, in render event you can add click event to xAxis labels and update the chart with new categories and data:
var H = Highcharts,
categories = ['one', 'two', 'three'],
data = [1, 2, 3];
chart = Highcharts.chart('container', {
chart: {
events: {
render: function() {
var chart = this;
H.objectEach(chart.xAxis[0].ticks, function(tick) {
if (tick.label) {
H.addEvent(tick.label.element, 'click', function() {
data.splice(tick.pos, 1);
categories.splice(tick.pos, 1);
chart.update({
series: [{
data: data
}],
xAxis: {
categories: categories
}
});
});
}
});
}
}
},
series: [{
type: 'column',
data: data
}],
xAxis: {
categories: categories
}
});
Live demo: http://jsfiddle.net/BlackLabel/8wfx5yve/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update
Related
I build a drillable heatmap with Highchart. It's working well but I need to enhance the capabilities of drilldown on it.
You can see the demo here : https://jsfiddle.net/vegaelce/7wc6t2ex/
I would like to be able to drill on the Y Axis and on the X Axis on specific series.
In the example, by clicking on "California" axis label, I would like the chart drill on 'California_years' drilldown serie.
In the same way, I'd like to be able to click on X-Axis, in the example, by clicking on '2015' label value, the chart would drill to 'States_2015' drilldown serie.
Notice that I use axe_x and axe_y values in each serie to change the axis of the chart on drilldown/drillup event :
events:{
drilldown: function(e) {
var chart = this;
chart.yAxis[0].update({
type: 'category',
categories: y_axes[e.seriesOptions.axe_y]
});
chart.xAxis[0].update({
type: 'category',
categories: x_axes[e.seriesOptions.axe_x]
});
},
drillup: function(e) {
var chart = this;
chart.yAxis[0].update({
type: 'category',
categories: y_axes[e.seriesOptions.axe_y]
});
chart.xAxis[0].update({
type: 'category',
categories: x_axes[e.seriesOptions.axe_x]
});
}
}
How can I achieve these features ?
Thanks
You can check if e.category is defined, if it is, the drilldown was triggered by clicking on axis label. Next, you need to only bind the category with proper drilldown options. For example:
chart: {
type: 'heatmap',
events: {
drilldown: function(e) {
if (typeof e.category !== 'undefined') {
if (e.category === 0) {
e.seriesOptions = this.options.drilldown.series[3];
} else if (e.category === 3) {
e.seriesOptions = this.options.drilldown.series[2]
}
}
var chart = this;
chart.yAxis[0].update({
type: 'category',
categories: y_axes[e.seriesOptions.axe_y]
});
chart.xAxis[0].update({
type: 'category',
categories: x_axes[e.seriesOptions.axe_x]
});
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/186mdyfx/
So I built a Highcharts application which looks somewhat like this:
https://codesandbox.io/s/angular-opcho
the chart looks like this:
export class ChartComponent implements OnInit {
title = "app";
chart;
updateFromInput = false;
Highcharts = Highcharts;
chartConstructor = "chart";
chartCallback;
data1;
data2;
chartOptions = {
title: {
text: "Global temperature change"
},
subtitle: {
text: "Data input from CSV"
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: []
}
A highcharts application where you can upload csv data.
If you put in csv data which looks similar to this:
"runs","numbers",differences
"run1","1123",21
"run2","222",7200
"run3","31112",60
"run4","412312",32
you will have a nice graph with x and y axis.
Now, what i am trying to do is to build in a range selector for the y axis so i can sort out really high values and have a better view on the lower values.
My problem is, i can only find range selectors that have something to do with date and time. Is there any range selector for my specific problem?
The basic range selector uses setExtremes method, so you can do the same on yAxis:
var chart = Highcharts.chart('container', {
series: [{
type: 'column',
data: [1, 2, 3, 1, 3, 999, 888, 979]
}]
});
document.getElementById('low').addEventListener('click', function() {
chart.yAxis[0].setExtremes(0, 10);
});
document.getElementById('high').addEventListener('click', function() {
chart.yAxis[0].setExtremes(850, 1000);
});
Live demo: http://jsfiddle.net/BlackLabel/hbf2smoc/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Anyone know how to programmatically hide a single xaxis label?
I'm hiding the graphic this way, but I need to do the xaxis label too.
.highcharts().series[0].data[1].graphic.hide()
Here's an example http://jsfiddle.net/2pyzjdch/
I'd like to hide the banana label
You can hide the label you want in this way:
.highcharts().xAxis[0].ticks[1].label.hide();
Live demo: http://jsfiddle.net/BlackLabel/68jyh7so/
You can do this in many ways e. g. updating your xAxis categories on click:
chart: {
type: 'bar',
events: {
load() {
var btnHide = document.getElementById('btnHide'),
btnShow = document.getElementById('btnShow'),
chart = this;
btnHide.addEventListener('click', function() {
chart.update({
xAxis: {
categories: ['Apples', '', 'Oranges']
}
})
})
btnShow.addEventListener('click', function() {
chart.update({
xAxis: {
categories: ['Apples', 'Banaas', 'Oranges']
}
})
})
}
}
},
jsFiddle: http://jsfiddle.net/BlackLabel/n87e9gfr/
API Reference: https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Chart#update
I am having an issue with Highcharts highstock column chart. With xaxis min=0, max=5 [page size] which has 20 categories.
After the initial load when you scroll the xaxis to the end and then click on modify data. On this action I will invoke an api and update the series data. 'The chart displays as No data to display' even if there is one category. I wanted to reset scroll to initial position, which I cannot do for categories. You will need to move scroll manually
Also Since there is only one category and I do not want other categories to display as numbers.
https://jsfiddle.net/shashi3337/zcf8kvgx/7/
I am updating the chart to modify xaxis min and max to set max as 0 [ 1 category] to remove numbers.
https://jsfiddle.net/shashi3337/zcf8kvgx/5/.
Now when you click on Add data which adds back the data. I am resetting min=0 and max=5. Now
I just see only 1 category per page scroll.
Expected Behavior
I expect the scroll bar to be automatically scrolled back after I click modify data button and when I click on add data button I expect to see 6 categories per page scroll on xaxis.
function test(n) {
var data = [];
for (var i = 0; i < n; i++) {
var value = Math.random() * 10;
var x = {
id: i,
name: 'test ' + i,
y: value
}
data.push(x);
}
return data;
}
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
},
plotOptions: {
column: {
stacking: 'normal'
},
},
xAxis: {
type: 'category',
min:0,
max:5
},
scrollbar: {
enabled: true
},
series: [{
name: "A",
data: test(20)
}, {
name: "B",
data: test(20)
},
{
name: "C",
data: test(20)
},
{
name: "D",
data: test(20)
}
]
});
$(document).ready(function(){
$('#modify').click(function(){
if(chart){
while (chart.series.length > 0)
chart.series[0].remove(true);
chart.addSeries({
name: 'new',
data: test(1)
});
}
});
$('#add').click(function(){
if(chart){
while (chart.series.length > 0)
chart.series[0].remove(true);
chart.update({
xAxis: {
min:0,
max:5
}
});
chart.addSeries({
name: 'A',
data: test(20)
});
}
});
});
Found the answer to this.
You need to use xAxis.setExtremes() to modify extremes on the chart. At this moment, extremes set by user (e.g. by scrollbar) have the highest priority and are not cleared when you remove all series.
Example https://jsfiddle.net/BlackLabel/pp2qpxks/
chart.xAxis[0].setExtremes(0, 0);
Can we disable zoom on highchart graph while graph is loading.
I have multiple graphs therfore would like to disable the zoom option until all graphs gets loaded.
It is possible to change zoomType of a chart dynamically, but it is not a part of official API. That way after all charts are loaded you will be able to change their zoomType from none to some.
$(function () {
$('#container').highcharts({
chart: {
zoomType: ''
},
xAxis: {
minRange: 1
},
series: [{
data: [1,2,3,4,5,6,7]
}]
});
function enableZoom(zoomType) {
var chart = $('#container').highcharts(),
zoomX = /x/.test(zoomType),
zoomY = /y/.test(zoomType);
chart.options.zoomType = zoomType;
chart.pointer.zoomX = zoomX;
chart.pointer.zoomY = zoomY;
chart.pointer.zoomHor = zoomX;
chart.pointer.zoomVert = zoomY;
}
$('#zoomX').click(function () {
enableZoom('x');
});
$('#zoomY').click(function () {
enableZoom('y');
});
$('#zoomXY').click(function () {
enableZoom('xy');
});
$('#noZoom').click(function () {
enableZoom('');
});
});
JSFiddle: http://jsfiddle.net/pearp126/
you can do so by simple setting zoomType as null in your chart config
zoomType: null
See the documentation here for more details
Basically the only thing you need to get done is removing the chart and replacing it with one with the settings you like.
See the code below:
var chart = $('#container').highcharts();
function renderChart(){
chart = new Highcharts.Chart(chart.options);
chart.render();
}
Once you want to enable zooming (or any other setting):
$('#container').highcharts().options.chart.zoomType = 'xy';
renderChart();
To be honest I'm not sure what happens to the old chart. Hopefully it's just overwritten and doesn't it impose a big memory issue.
I created a fiddle you can find here
Basically you can stop the "selection" event (zoom), when the loading label of the chart is displayed.
Using the default Highcharts function .showLoading() for show the loading label, and the default variable loadingShown, for verify is the loading label is displayed or not.
So, by using the function .showLoading(), let's say before doing an AJAX request, and validating with the variable loadingShown if the loading label is displayed or not, we can stop the selection event.
Another way, is to use a thirdparty loading mask, and add it to the chart's container.
In the next example you'll find how to cancel the zoom using the .showLoading() function and how to use jQuery plugin: pLoading https://github.com/joseshiru/p-loading (for show the loading mask)
$(function () {
var setEvents;
var chart;
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
events: {
selection: function () {
//Quit the selection event, while the loading spinner is displayed.
if (chart.loadingShown) {
return false;
}
}
}
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
setEvents = function () {
var $showLoadingBtn = $('.show-loading');
var $hideLoadingBtn = $('.hide-loading');
var $showExternalMask = $('.show-toggle-mask');
var $hideExternalMask = $('.hide-toggle-mask');
$showLoadingBtn.on('click.showLoading', function () {
chart.showLoading();
});
$hideLoadingBtn.on('click.hideLoading', function () {
chart.hideLoading();
});
$showExternalMask.on('click.toggleMask', function () {
$('#container').ploading({action: 'show'});
});
$hideExternalMask.on('click.toggleMask', function () {
$('#container').ploading({action: 'hide'});
});
}();
});
Example in jsfiddle: http://jsfiddle.net/8p2fzbxw/3/