Develop Reference

Location of the values ​in the Highcharts.js bar chart

I'm trying to make bar chart looks like in picture here:
Here is the result that I got
Maybe someone can suggest, how can I sticked value to xAxis?
Series I want to plot are :
series: [{
name: 'text',
data: [{"color":"#17a78b","y":3.36},
{"color":"#17a78b","y":2.1},{"color":"#17a78b","y":1.67},
{"color":"#17a78b","y":2.07},{"color":"#17a78b","y":-3.89},
{"color":"#17a78b","y":2.73},{"color":"#17a78b","y":2.34},
{"color":"#17a78b","y":2.91},{"color":"#56e8cb","y":4.94},
{"color":"#56e8cb","y":2.99},{"color":"#56e8cb","y":-2.5},
{"color":"#56e8cb","y":3.77}]
}]
Or maybe there is some way to style negative and positive value

You can make it using Highcharts.SVGElement.translate method. Each data label is SVG element which you can translate depend on your needs. This solution is more flexible because you can add more custom logic by analyzing point and label heights. Check demo and code I posted you below.
Code:
chart: {
type: 'column',
events: {
render: function() {
var chart = this,
series = chart.series[0],
offset = 3,
pointHeight,
textHeight,
translateY;
series.points.forEach(function(point) {
textHeight = point.dataLabel.getBBox().height;
pointHeight = point.shapeArgs.height;
if (pointHeight < textHeight) {
translateY = (pointHeight - textHeight / 2) + textHeight + offset;
} else {
translateY = (pointHeight - textHeight / 2) - offset;
}
translateY = (point.y < 0) ? -translateY : translateY;
point.dataLabel.translate(0, translateY);
});
}
}
}
Demo:
https://jsfiddle.net/30bxv9rc/
Api reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
https://api.highcharts.com/highcharts/chart.events.render

First set plotOptions.column.stacking to normal so that data labels are displayed inside the columns.
Next, you will need to update each point of data in the series through another function after the chart is rendered. Referring to my example, data points are looped; its value is accessed to check positive or negative; and subsequently verticalAlign and y attributes are updated so that label is displayed according to your requirement.

How to display the total of the series values for a donut chart in Highcharts?

I'm displaying a donut chart using Highcharts and in the middle I've currently got the title; 'Transactions' but below that, but still in the middle, I'm trying to show the total number of the series values which should be €8,173.99.
I thought the following code would work:
events: {
load: function(event) {
var total = 0; // get total of data
for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
total += this.series[0].this.y[i];
}
var text = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add()
}
},
I see no errors but then again the total is not being displayed. What am I doing wrong?
You can see the JSFiddle here http://jsfiddle.net/tobitobetoby/1fqvzpdn/3/

The events object should be placed inside chart object. As for the adding 'Total' info, I personally think that the better idea is to just set title on load event using Chart.setTitle() function. Take a look at the below example.
API Reference:
http://api.highcharts.com/highcharts/Chart.setTitle
Example:
http://jsfiddle.net/yt5pj3yf/

Echarts3 (baidu) colored round in tooltip

Echarts3 (baidu) colored round in tooltip
By default the tooltip has rounds of the same colour as graph, like this:
http://echarts.baidu.com/gallery/editor.html?c=candlestick-brush
But if I customize the tooltip it removes the colour coded round like in this example:
https://ecomfe.github.io/echarts/doc/example/tooltip.html#-en
Is there a way to use custom tooltip and put the colour round back.
Here is another way to explain it.
Go to this link
pie-simple
and you will find charts with no coloured round.
delete the following line:
formatter: "{a} <br/>{b} : {c} ({d}%)"
then press <运行> to refresh and you will see the round back.

Echarts already sends the marker html in params of each series with specific color. To create an original looking tooltip you can simply use that like this for line chart:
{
formatter : (args) => {
let tooltip = `<p>${args[0].axisValue}</p> `;
args.forEach(({ marker, seriesName, value }) => {
value = value || [0, 0];
tooltip += `<p>${marker} ${seriesName} — ${value[1]}</p>`;
});
return tooltip;
}

ECharts support user-defined tooltip, include the color you wanted.
For example you have a line chart demo like this, and you want to change the default tooltip, add % or something else after the tooltip without lose the default color.Just replace tooltip code with this code below.
tooltip : {
trigger: 'axis',
axisPointer: {
animation: true
},
formatter: function (params) {
var colorSpan = color => '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
let rez = '<p>' + params[0].axisValue + '</p>';
//console.log(params); //quite useful for debug
params.forEach(item => {
//console.log(item); //quite useful for debug
var xx = '<p>' + colorSpan(item.color) + ' ' + item.seriesName + ': ' + item.data + '%' + '</p>'
rez += xx;
});
return rez;
}
},
with this tooltip code, you will see the original tooltip color 邮件营销: 90 become color 邮件营销: 90%, we add self-defined % to tooltip.

One way to solve this is to return custom HTML in your tooltip formatter, for instance:
var formatTooltipLine = function(color){
return "<span style='display:inline-block;width:10px;height:10px;border-radius:50%;background-color:"+color+";margin-right:5px;'></span><span>line text</span>"
}
var formatter = function(){
// custom title
var lines = ["<b>2016</b>"];
// custom lines
["red", "orange"].forEach(function(color){
lines.push(formatTooltipLine(color));
});
return lines.join("<br>");
}
Example:
https://cdn.datamatic.io/runtime/echarts/3.3.0_61/view/index.html#id=117670017722819924657/0B3wq5VFn9PllSEVsQTJvcnVBZU0

How to add % symbol to Y axis values in HighChart graph?

I'm trying to add % after the 100 or -100 yAxis in the chart above.
I tried to add the % symbols like so:
quotes.data.frequency_counts[i].negative = Math.round(negative * -1)+'%';
quotes.data.frequency_counts[i].positive = Math.round(positive)+'%';
However got an error saying strings are not allowed as data_points, which makes sense, but still hoping there is a way to get the % sign displayed so the user knows what we are showing them.
This isn't my app, however it is a HighChart that is editable in plunker: http://plnkr.co/edit/8mDQD1?p=preview

You can use a label formatter for that:
yAxis: {
title: { text: 'Temperature (Celsius)' } ,
labels: {
formatter: function() {
return this.value + '%';
}
}
}
Here's an updated (now nonsensical) Plunker showing the changes

highstocks - legend position and refresh legend values on mousemove of multiple charts

Here is the scenario. I've multiple highstocks say 10 charts on a single page. Currently I've written 500 lines of code to position the legend, show tooltip and refresh the legend values on mousemove.
No. of legends vary per chart. On mousemove values of all the legends are updated. I need to optimize the code I am using highstocks v1.2.2.
Above screenshot shows 2 charts. Return, Basket, vs Basket Spread are legends and it's values are updated on every mousemove.
Please find this fiddle for example. In my case legends are positioned and updated values on mouse move with hundreds of lines of code. When I move the mouse the legend values of Return and Basket of first chart and the legend values of vs Basket Spread are updated. It's working fine but with lots of javascript code. So I need to optimize it less code or with highstocks built-in feature.
Update
User #wergeld has posted new fiddle. As I've shown in screenshot when cross-hair is being moved over any chart, the legend values of all the charts should be updated.
Is there anyway to implement the same functionality with less code or is there built-in feature available in highstocks ???
Using this as a reference.

Basic example would be to use the events.mouseover methods:
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
var theLegendList = $('#legend');
var theSeriesName = this.series.name;
var theYValue = this.y;
$('li', theLegendList).each(function (l) {
if (this.innerText.split(':')[0] == theSeriesName) {
this.innerText = theSeriesName + ': ' + theYValue;
}
});
}
}
}
}
}
This is assuming I have modded the <li> to be:
$('<li>')
.css('color', serie.color)
.text(serie.name + ': NA')
.click(function () {
toggleSeries(i);
})
.appendTo($legend);
You would then need to handle the mouseout event but I do not know what you want to do there.
Working example.
EDIT:
Here is a version using your reference OHLC chart to put the values in a different legend location when any point in the chart is hovered.
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
//using the ohlc and volumn data sets created at runtime.
var stockVal = ohlc[this.index][4]; // show close value
var stockVolume = volume[this.index][1];
var theChart = $('#container').highcharts();
var theLegendList = $('#legend');
$('li', theLegendList).each(function (l) {
var legendTitle = theChart.series[l].name;
if (l === 0) {
this.innerText = legendTitle + ': ' + stockVal;
}
if (l === 1) {
this.innerText = legendTitle + ': ' + stockVolume;
}
});
}
}
}
}
}