I want to reverse the legend order dynamically based on the legend's 'align' option but I'm a beginner in javascript, I have no idea how it would look like.
If the legend's align is set to 'left' or 'right' then I want to set the legend's 'reverse' option to 'true' else 'false'
Here's my jsfillde: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/legend/reversed/
In python I would do something like this:
if legend align == “left” or “right”:
legend reverse = true
else:
legend reverse = false
You need to use the if - else statement outside the chart configuration object:
var options = {
legend: {
align: 'right',
...
},
...
}
if (
options.legend.align === 'left' ||
options.legend.align === 'right'
) {
options.legend.reversed = true;
} else {
options.legend.reversed = false;
}
Highcharts.chart('container', options);
Live demo: https://jsfiddle.net/BlackLabel/c1jhtoys/
Related question: "this" inside object
Related
How can I show dataLabels or tooltip for outer circle of packedbubble?
For example in Carbon emissions around the world (2014) sample, i need to show a tooltip for each continent, when hovering on them. or if possible show dataLabels for each of them
Notice that the outer circle is just a path without any properties like x, y etc, so it wouldn't work with the Highcharts tooltip feature. The only solution which came to my mind is to create a custom tooltip on mouseover event on this path.
Demo: https://jsfiddle.net/BlackLabel/9gkdfsnj/
Code:
events: {
render() {
var
chart = this,
series = chart.series[0],
graphic = series.parentNode.graphic,
tooltip = document.getElementById('tooltip'),
text;
text = "Sum value: " + Math.floor(series.yData.reduce((a, b) => a + b, 0));
graphic.element.onmouseover = function() {
tooltip.style.visibility = "visible";
tooltip.innerHTML = text;
tooltip.style.left = graphic.x + (tooltip.offsetWidth /2) - chart.plotLeft + 'px';
tooltip.style.top = graphic.y + graphic.height / 2 + 'px'
}
graphic.element.onmouseout = function() {
tooltip.style.visibility = "hidden"
}
}
}
It is just a simple example, feel free to improve it.
Add value key
[{
name: 'Animals',
value: 867,
data: [{
name: 'Lion',
value: 167
}, {
name: 'Croatia',
value: 200
},
{
name: "Dog",
value: 97
}],
}]
Add below lines inside Tooltip
tooltip: {
useHTML: true,
formatter : function(){
let childtooltip = "";
if(this.point != undefined && this.point != null){
if((this.point.name != undefined && this.point.name != null) && (this.point.value != undefined && this.point.value != null)){
childtooltip = `<b>${this.point.name}:</b> ${this.point.value}`;
}
}
if(childtooltip == ""){
return `<b>${this.series.userOptions.name}:</b> ${this.series.userOptions.value}<br>`
}else{
return `${childtooltip}`;
}
}
}
Demo
Should be easy, I have negative values in a Highcharts bar chart that when I make the format ${y} the value comes out as $-157, what is the correct syntax to make the label -$157?
Thanks,
CM
I am unsure if there is a built-in option in Highcharts to do this for currencies, but a way you could achieve this is by using the formatter callback like this:
dataLabels: {
enabled: true,
formatter: function() {
return (this.y >= 0 ? '' : '-') + '$' + Math.abs(this.y)
}
}
Working JSFiddle example: http://jsfiddle.net/ewolden/4o7k210s/
I built a widget with multiple y Axes very similar to the official sample here: http://www.highcharts.com/stock/demo/candlestick-and-volume
I'm trying to have some sort of visual separation between the chart panes, either by
applying a special style to the maximum grid line for each pane, or
adding a horizontal line in the whitespace between the panes
The only approach i got working is using PlotLines, but I'd rather have a separator that's independent of zoom levels. Any ideas on how to achieve this?
Use Renderer to draw a path between y axes.
function drawSeparator() {
let separator = this.separator;
const options = this.options.chart.separator;
if (options && options.enabled) {
if (!separator) {
this.separator = separator = this.renderer.path({
d: 'M 0 0',
'stroke-width': options.width === undefined ? 1 : options.width,
stroke: options.color || 'black'
}).add();
}
const topAxisBottom = this.yAxis[0].top + this.yAxis[0].height;
const bottomAxisTop = this.yAxis[1].top;
const y = topAxisBottom + (bottomAxisTop - topAxisBottom) / 2;
separator.attr({
d: `M 0 ${y} L ${this.chartWidth} ${y}`
});
}
}
Call the method on load/redraw event
chart: {
events: {
load: drawSeparator,
redraw: drawSeparator
},
separator: {
enabled: true,
width: 3,
color: 'blue'
}
},
You can modify the path's d attribute, the path starts from axis.left and stops on axis.left + axis.width
Live example and output
http://jsfiddle.net/L11uqxgq/
I have an areaspline with only one series. The design calls for drawing x-axis gridlines that touch the series and don't extend beyond that. Is it possible to do this? Here's my code to configure the gridlines:
xAxis: {
gridLineWidth: 1,
tickAmount: 30,
lineWidth: 0,
labels: {
enabled: false
},
minPadding: 0
},
Another option (other then 2 mentioned by jlbriggs in a comment on the question) might be to extend Highcharts and change paths of grid lines in a wrapper like:
(function(H) {
var UNDEFINED;
H.wrap(H.Tick.prototype, 'render', function(p) {
p.apply(this, [].slice.call(arguments, 1)); //run original function
if (this.axis.isXAxis && this.gridLine) {
var point = this.axis.series[0].options.data[this.pos],
d = this.gridLine.attr('d').split(' ');
if (point !== UNDEFINED) {
d[2] = this.axis.chart.yAxis[0].toPixels(point);
d = d.join(' ');
} else {
d = ''; //remove if not crossing any point
}
this.gridLine.attr({
d: d
});
}
});
})(Highcharts)
Example: http://jsfiddle.net/69f5z3us/
If a grid line is not crossing any point, then the grid line is removed, but you could change that part of the code if you want to.
I have a flask app in which I am using Highcharts to plot data, and if the user enters a lot of inputs for which he needs a graph, I plot multiple plot lines on the graph with different colors. But after 8-10 plot lines the color repeat and hence its not useful coz its not distinguishable.
<script type="text/javascript">
$('document').ready(function(){
window.seriesOptions = [];
window.yAxisOptions = [],
window.seriesCounter = 0,
window.colors = Highcharts.getOptions().colors;
generate_graph( {{ coordinates| safe }} , {{ graph_name | safe }} );
});
</script>
/*
Generate graph function takes two input parameters i.e. Coordinates - which is an array of [x, y] points AND graph_name which is an array of the (service_name,server_name) pair and generates
seriesOptions and calls createChart function.
*/
function generate_graph(coordinates, graph_name){
$.each(graph_name, function(i, name) {
window.seriesOptions[i]= {
name : graph_name[i],
data : coordinates[i],
type : 'line'
};
seriesCounter++;
if (seriesCounter == graph_name.length) {
createChart();
}
});
$('#add-to-dashboard-button').show();
}
/*
createChart function generates the actual graphs and sets the different properties of the graph.
*/
function createChart(){
$('#chart').highcharts('StockChart', {
chart: {
zoomType: 'x'
},
rangeSelector: {
selected: 4
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%a %d %b', this.value);
}
}
},
title : {
text : 'Graph'
},
legend: {
enabled: true,
layout: 'vertical',
labelFormat: '<span style="color:{color}">{name}</span> - <b> x : ({point.x:.2f}) , </b> y : ({point.y:.2f}) <br/>',
maxHeight: 100
},
series : seriesOptions
});
}
</script>
How to make sure that every time a plot is generated its in a different unique color and hence distinguishable.
Also The tooltip doesn`t appear even though the data for x axis is sorted?
If you don't specify any colours when creating a chart or adding a series, highcharts will pick one from it's default colours. There are a limited number of defaults.
However, you can tell highcharts about a new set of default colours, so you could give it more to chose from, up to the maxumum you want to support. This code sets 9 defaults, but you can add as many as you want, you just need to come up with some unique colours:
Highcharts.setOptions({
colors:[
'#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Make this the first thing you call.