So, I have stacked bar chart and I want to hide data labels when they don't fit in the area. for Example in Category 8, not to have data label "4" at all.
This is a similar question bolow:
Highcharts stacked bar chart hide data labels not to overlap
But My problem is I also need to hide lables on exporting
I have done this code after generating graph to hide labales
$.each(this.chartObject.series,function(i,data_series){
if (data_series.visible){
$.each(data_series.data,function(j,data){
if(data.yBottom != null && data.plotY != null){
if(data.yBottom - data.plotY < 15){
if (typeof data.dataLabel != 'undefined'){
data.dataLabel.hide();
}
}
}
});
}
});
You need to move loop from callback, into chart / events / load.
chart: {
events: {
load: function () {
var chart = this;
$.each(chart.series, function (i, serie) {
$.each(serie.data, function (j, data) {
if (data.yBottom - data.plotY < 15) data.dataLabel.hide();
});
});
}
},
renderTo: 'chart',
defaultSeriesType: 'bar'
},
Example: http://jsfiddle.net/HA5xE/20
Related
I need to make an API call when clicking on a bar element. For example, look at this jsfiddle.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-point-events-click-column/
See how the x axis has the 12 months? Let's say that when clicking on the bar for "April," I want to make an API call in order to get sales data for the month of April and display that on the graph. I can't find a way to do this, because this click function...
plotOptions: {
series: {
events: {
click: function (event) {
//code goes here
}
}
}
}
... can only access items inside of the chart. I need to make an outside call to the database when clicking on a bar. Anything I can do? Thanks.
I tried this
document.querySelector('.rect.highcharts-point').addEventListener('click', e => {
//code goes here
});
It didn't work at all which is confusing, because this method clearly works when referencing the chart as whole, but doesn't work for just a bar element as you can see it working for the entire chart in this jsfiddle.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/events-container/
Three ways how you can achieve that:
From the callback to the built-in point click() event:
plotOptions: {
series: {
point: {
events: {
click() {
let point = this;
getPoint(point)
}
}
}
}
},
.
function getPoint(p) {
console.log('From the callback: ', p)
}
From the div container:
document.querySelector('.chart-container').addEventListener('click', e => {
if (e.point != undefined) {
console.log('From the container: ', e.point)
}
});
Looping through the rects:
function getPointLoop(p) {
p.addEventListener('click', e => {
console.log('From the loop:', e.target.point)
})
}
let points = Array.from(document.querySelectorAll('rect.highcharts-point'))
for (i = 0; i < points.length; i++) {
getPointLoop(points[i])
}
Demo:
https://jsfiddle.net/BlackLabel/9bos6eu8/
If i have large amount of data then data labels are overlapping. how to add spacing between data labels in this case .
[
https://jsfiddle.net/3ekhdqov/1/][1]
There is no built-in logic for anit-collision data labels, but you can implement some, according to your needs. You can for example edit translateY attribute based on point's y value.
chart: {
zoomType: 'xy',
events: {
render: function() {
var series = this.series;
series[0].points.forEach(function(point, index) {
if (Math.abs(series[1].points[index].y - point.y) < 20) {
console.log(point.dataLabel)
point.dataLabel.attr({
translateY: point.dataLabel.y + 20
});
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/bg0eyh2t/
API Refernece: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I'm looking for example code on how to implement a drilldown in a sankey diagram.
I tried using the drilldown code from the column drilldown demo but it didn't work for sankey.
The intended functionality is very similar to a dendogram, i.e- click a node to hide reveal child nodes.
Example:
https://jsfiddle.net/y_tddel/d7jby2z1/5/
.
In this example each node in the second column will be clickable and have their own child nodes.The expanded view of Indo-Iranian node is shown as as an example.
Series.point.events can be used to trigger the event when the user clicks on any node, and update the series data, and adding a back button.
Link: https://api.highcharts.com/highcharts/series.sankey.point.events.click
Look at the following code sample:
Highcharts.chart('container', {
series: [{
point: {
events: {
click: function (e) {
console.log(e, 'e')
let series = this.series,
chart = series.chart;
if (this.isNode) {
if (isDrilldown[isDrilldown.length - 1] != this.name && drilldown_data.hasOwnProperty(this.name)) {
chart.backButton = chart.renderer.button('back', chart.plotLeft, 20, function () {
isDrilldown.pop();
d = JSON.parse(JSON.stringify(drilldown_data[isDrilldown[isDrilldown.length - 1]]));
series.update({data: d});
chart.backButton.destroy();
chart.title.show();
}).add()
isDrilldown.push(this.name);
chart.title.hide()
this.series.update({
data: JSON.parse(JSON.stringify(drilldown_data[this.name]))
})
}
}
}
}
},
keys: ['from', 'to', 'weight', 'drilldown'],
data: JSON.parse(JSON.stringify(plot_data)),
type: 'sankey'
}],
});
Demo: https://jsfiddle.net/deveshgoyal/1zcnuq5b/2/
Current drilldown module is not compatible with the sankey series. You will need to create your own drilldown logic. Below is a basic demo which shows how to update series on click event - which could be treated as an drilldown to other series.
Demo: https://jsfiddle.net/BlackLabel/hn19xga5/
events: {
click() {
let series = this.series,
chart = series.chart;
if (!isDrilldown) {
chart.backButton = chart.renderer.button('back', 20, 20, function() {
series.update({
data: initialData
})
chart.backButton.destroy();
isDrilldown = false;
}).add()
isDrilldown = true;
}
this.series.update({
data: drilldown1
})
}
}
API: https://api.highcharts.com/highcharts/series.sankey.data.events.click
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
I would like to use a CSV file as source for a highcharts graph.
Could you give some guidance? I need to understand basically how to get data in the web page.
Do I need to put the function that load the text file in the "series" part of the js function?
This is what I have so far:
<script type='text/javascript'>
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'chart example'
},
xAxis: {
categories: []
},
yAxis: {
},
series: []
};
$.get('test.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first
// position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 1) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
This is how the data file is structured in the CSV file:
Compound,Value
mix1,0.244
mix2,0.453
pureCu,1
pureAg,0.98
The value of column 1 is an ID basically, so the distance between each of them could be considered as 1. So technically, the first column would be always from 1 to 15 for example, with the label using the name in the first column
I would like to put the second field on the Y, and on the X the first field; but using the code pasted (which is what is on an example on the Highcharts website), I can't really figure out how to set up correctly the values on each side of the chart.
Thanks
Here you can find tutorials from Highcharts to load data from external file: http://www.highcharts.com/docs/working-with-data/preprocessing
About refreshing page - yes you can refresh page every n-seconds, however it would be better (I think) to call AJAX to fetch new data from server and then replace it in Highcharts (simply using chart.series[0].setData( new_array_of_data );
I have sample code for question here: http://jsfiddle.net/MuydK/
The problem relates to legend title in the key under chart are changing after I have drilled in and out.
They should stay as
"actual" and
"target"
And are changing to "series 1" and "series 2".
$(function () {
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories1 = ['1011', '1112', '1213', '1415'],
name1 = 'Actual',
I think I may be missing something in drilldown configuration or setChart code?
I got the same problem with a couple if charts based on code posted above.
Many Thanks
Hope this is what you need,
JSFiddle - Legend Name Problem
code:
function setChart(name, categories, data, color) {
console.log(name, categories, data, color);
chart.xAxis[0].setCategories(categories);
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < data.length; i++) {
chart.addSeries({
name: name[i],
data: data[i],
color: color[i]
});
}
}
Edit2: The problem is in your else statement in the function bellow.
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color);
} else { // restore
setChart(name, categories1, [data1, data2], 'white');
}
}
Instead get rid of name1 = 'Actual' and only have data1 and data2 and add name and color to them then you could do like this instead
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
chart.xAxis[0].setCategories(drilldown.categories);
setChart([drilldown.data]);
} else { // restore
chart.xAxis[0].setCategories(categories);
setChart([data1, data2]);
}
}
// add code for removing series
chart.addSeries({
data
});
I hope you understand, but it will be easier if you build data1/2as a highcharts object, and just add the drilldown part to it. So you can change;
series: [{
name: name1,
data: data1,
color: colors[0]},
{
name: name2,
data: data2,
color: colors[1]}],
to:
series: [data1, data2],
Edit: When you are doing operations bellow you should not set redraw to true, it will be much faster. The same goes for adding the series. You do not need to call chart.redraw() until you have removed and added the charts. And removing stuff is easier backwards. So change:
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
To
for (var i = chart.series.length; i >= 0; i--){
chart.series[i].remove(false);
}
// add series with redraw == false
chart.redraw();