Highcharts Polar charts display labels on specific tick quarters - javascript

Considering that my data array is always composed of 4 elements as :
var data = [
{"type":"column","name":"My Label 1","y":38.9500000000003,"color":"#7cb342"},
{"type":"column","name":"My Label 2","y":30,"color":"#7cb342"}, {"type":"column","name":"My Label 3","y":51.85,"color":"#fbc02d"}, {"type":"column","name":"My Label 4","y":55.2999999999997,"color":"#fbc02d"}];
I want to know how to set my data names (data.name) each 45 degrees tick interval to keep them well positioned ?
Here is the example:
http://jsfiddle.net/eento/7rupgxde/4/
It's important for me to display only those labels & keep them inside the global highchart container.

Like this?
dataLabels: {
enabled: true,
formatter: function() {
return this.point.name;
}
}
Example:
http://jsfiddle.net/jlbriggs/7rupgxde/5/

You can use renderer to render those labels, for example, create two methods (one to add labels and one to position them):
function renderLabels(chart) {
var alignments = ['right', 'right', 'left', 'left'];
$.each(chart.series[0].points, function(i, point) {
point.myName = chart.renderer.text(point.name, -9999, -9999).attr({
align: alignments[i],
color: 'black'
}).add();
});
}
function positionLabels(chart, anim) {
var positions = [
// top right label
[chart.plotLeft + chart.plotWidth, chart.plotTop],
// bottom right label
[chart.plotLeft + chart.plotWidth, chart.plotTop + chart.plotHeight],
// bottom left label
[chart.plotLeft, chart.plotTop + chart.plotHeight],
// top left label
[chart.plotLeft, chart.plotTop],
]
$.each(chart.series[0].points, function(i, point) {
if (point.myName) {
point.myName[(anim ? 'animate' : 'attr')]({
x: positions[i][0],
y: positions[i][1],
})
}
});
}
Then use those methods in chart.events:
chart: {
polar: true,
renderTo: 'container',
backgroundColor: null,
events: {
load: function() {
renderLabels(this);
positionLabels(this, false);
},
redraw: function() {
positionLabels(this, true);
}
}
},
And working demo: http://jsfiddle.net/7rupgxde/7/

Related

Display legend and colorAxis at different positions in Highchart

I want to display legend for a line series at the top and colorAxis for heatmap at the right side in a chart. There is a global option to position the legend but no separate option for each series.
Highcharts Version: v4.3.1
That feature is not yet implemented in Highcharts core, but it should be available soon: https://github.com/highcharts/highcharts/issues/11309
For now you can move colorAxis from the legend to another place on the chart in this way:
(function(H) {
H.wrap(H.ColorAxis.prototype, 'drawLegendSymbol', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
this.legendItemWidth = 0;
this.legendItemHeight = 0;
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
marginRight: 80,
events: {
load: function() {
var chart = this,
colorAxis = chart.colorAxis[0].axisParent.element,
mainSVG = chart.container.children[0],
xPos = chart.plotLeft + chart.plotWidth + 10,
yPos = chart.plotTop;
mainSVG.appendChild(colorAxis);
colorAxis.setAttribute(
'transform', 'translate(' + xPos + ', ' + yPos + ')'
)
}
}
},
series: [{
...,
showInLegend: true
}, {
...,
showInLegend: true
}],
colorAxis: {
layout: 'vertical'
}
});
Live demo: http://jsfiddle.net/BlackLabel/0c9fkvwp/
API Reference: https://api.highcharts.com/highcharts/chart.events
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Highchart on mobile (Touch to zoom out and zoom in) - LineChart

I'm trying to apply ZoomIn and ZoomOut in a line chart on a mobile device. The goal is to click on a zone of the chart and ZoomIn in the first click and ZoomOut on the second. The sequence will always be this one.
I already live to see the documentation / examples and I can not find anything to solve this situation.
I have already tried using this properties in the chart: property
pinchType : 'y',
zoomType: 'none'
I tried the zoomtype but the behavior is not what I expect. I want to have a click to zoom this specific area of ​​the chart. I do not want to zoom with two fingers.
{
chart: {
pinchType : 'x'
},
legend: {
itemStyle: {
color: '#fff'
}
},
plotOptions: {
series: {
animation: {
duration: 2000
}
}
},
xAxis: {
tickInterval: 1
},
series: [
{
type: 'spline',
color : '#fff'
},
{
dashStyle: 'longdash',
color: '#b3be77'
}
],
}
As simple as clicking to get zoomin and zoomout
Yes, the second challenge can be easily achieved by adding this logic to plotOptions.series.events.click callback function:
chart: {
events: {
load: function() {
this.clickedOnce = false;
},
click: function() {
const chart = this;
if (chart.clickedOnce) {
chart.zoomOut();
chart.clickedOnce = false;
}
}
}
},
plotOptions: {
series: {
events: {
click: function(e) {
const chart = this.chart,
yAxis = chart.yAxis[0],
xAxis = chart.xAxis[0];
let x,
y,
rangeX,
rangeY;
if (!chart.clickedOnce) {
x = xAxis.toValue(e.chartX);
y = yAxis.toValue(e.chartY);
rangeX = xAxis.max - xAxis.min;
rangeY = yAxis.max - yAxis.min;
xAxis.setExtremes(x - rangeX / 10, x + rangeX / 10, false);
yAxis.setExtremes(y - rangeY / 10, y + rangeY / 10, false);
chart.redraw();
chart.clickedOnce = true;
} else {
chart.zoomOut();
chart.clickedOnce = false;
}
}
}
}
}
Demos:
https://jsfiddle.net/BlackLabel/kotgea5n/
https://jsfiddle.net/BlackLabel/s8w2xg3e/1/
This functionality is not implemented in Highcharts by default, but you can easily achieve it by adding your custom logic when the chart area is clicked.
When area is clicked the first time use axis.setExtremes() method to zoom in. On the second click use chart.zoomOut() to zoom out the chart. Check demo and code posted below.
Code:
chart: {
events: {
load: function() {
this.clickedOnce = false;
},
click: function(e) {
const chart = this,
yAxis = chart.yAxis[0],
xAxis = chart.xAxis[0];
let x,
y,
rangeX,
rangeY;
if (!chart.clickedOnce) {
x = xAxis.toValue(e.chartX);
y = yAxis.toValue(e.chartY);
rangeX = xAxis.max - xAxis.min;
rangeY = yAxis.max - yAxis.min;
xAxis.setExtremes(x - rangeX / 10, x + rangeX / 10, false);
yAxis.setExtremes(y - rangeY / 10, y + rangeY / 10, false);
chart.redraw();
chart.clickedOnce = true;
} else {
chart.zoomOut();
chart.clickedOnce = false;
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/fxm812k4/
API reference:
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
https://api.highcharts.com/class-reference/Highcharts.Chart#zoomOut
https://api.highcharts.com/highcharts/chart.events.click
Using a customEvents plugin (see: https://github.com/blacklabel/custom_events) and adding plotBand on the whole chart area you can register a callback on click and double click events. Using this approach you can make a zoom in on click event and zoom out on double click (not working on mobile devices).
Demo:
https://jsfiddle.net/BlackLabel/6tpb5q2z/

Highcharts: Can I animate changing the order of bars on bar chart?

I want to create a chart like the below.
https://www.reddit.com/r/interestingasfuck/comments/9togwf/the_major_world_economies_over_time/
I created this chart by Highcharts. But, I can't animate changing the order of bars.
function rotate(array, times) {
while (times--) {
var temp = array.shift();
array.push(temp)
}
}
window.data = {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
y_values: [100, 200, 300, 400, 500],
colors: ['#DC4D3A', '#E93D3F', '#83C6C7', '#46D388', '#D1D785']
};
document.getElementById("button").addEventListener("click", function () {
for (var i = 0; i < data['y_values'].length; i++) {
chart.series[0].data[i].update({y: data['y_values'][i]});
chart.series[0].data[i].update({color: data['colors'][i]});
}
chart.xAxis[0].update({categories: data['categories']});
rotate(data['y_values'], 1);
rotate(data['categories'], 1);
rotate(data['colors'], 1);
}, false);
All code I wrote are in JSFiddle.
https://jsfiddle.net/Shinohara/35e8gbyz/
Please anyone can help me?
Highcharts provides animate method for SVG elements, which you can use to achieve the wanted result. You need to animate columns, axis labels and data labels:
document.getElementById("button").addEventListener("click", function() {
var points = chart.series[0].points,
ticks = chart.xAxis[0].ticks;
points[0].graphic.animate({
x: points[1].shapeArgs.x
});
points[1].graphic.animate({
x: points[0].shapeArgs.x
});
points[0].dataLabel.animate({
y: points[1].dataLabel.translateY
});
points[1].dataLabel.animate({
y: points[0].dataLabel.translateY
});
ticks[0].label.animate({
y: ticks[1].label.xy.y
});
ticks[1].label.animate({
y: ticks[0].label.xy.y
});
}, false);
Live demo: https://jsfiddle.net/BlackLabel/ux59vcd6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#animate
It seems there is no native implementation.
The only idea I have it to not display Y axis labels at all. Using SVGRenderer
draw the text and save it as a variable (for further updating)
chart.customText = chart.renderer.text('label name', 100, 100) // label name, X, Y
.attr({
useHTML: true
})
.css({
fontSize: '16px' // and other CSS if necessary
})
.add();
Then you can update x, y or text
chart.customText.attr({
str: 'new text. You can use HTML',
y: 150 // new value
})
Your next step is to do something with Y position. Or even you can try to draw only 1 text with HTML that contains all labels. Then using JS move them as you need.

put a text in all categories in Highcharts

took a long time with this same question, then I appreciate too if I can help.
I researched a lot and understand that by this method that I have in my code will not run. then I can make it work, how I can do? I have tried many things. I do not understand how to adapt a render text or so ago all of my series.
I want to set the VALUE to RIGHT of the bar, and the value of the SERIES (in my case bar1, bar2, bar3) that are always at the LEFT of the bar. as it is in the picture.
this is my code:
http://jsfiddle.net/pb1q9wzk/
plotOptions: {
bar: {
dataLabels: {
padding: 0,
allowOverlap: true,
enabled: true,
align: 'left',
color: '#FFFFFF',
inside: true,
crop: false,
overflow: "none",
formatter: function() {
return this.series.name + " " + this.y;
},
style: {
width:100
}
.
.
.
UPDATE
when it is less than 30, so it appears.
when it is less than 30, "bar" and the value must be outside of the bar.
and when the value is 0, I want to be displayed to the right of "bar".
I appreciate the help, very little css and this library. I still can not get used.
You can do it using dataLabels formatter:
http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.formatter
formatter: function() {
var string = this.series.name + ' ';
if (this.y <= 30) {
string += this.y;
}
return string;
},
Here you will have two possible dataLabels strings, depending on your point value.
You can add custom function responsible for adding second dataLabel in your chart, using Renderer.text:
http://api.highcharts.com/highcharts#Renderer.text
var addSecondLabel = function(chart) {
$('.labelText').remove();
var series = chart.series,
dataLabel, barHeight;
Highcharts.each(series, function(ob, j) {
Highcharts.each(ob.data, function(p, i) {
if (p.y > 30) {
barHeight = p.graphic.element.height.animVal.value;
dataLabel = p.dataLabel;
chart.renderer.text(p.y, dataLabel.x + chart.plotLeft + barHeight, dataLabel.y + chart.plotTop + 11).attr({
zIndex: 100
}).addClass('labelText').css({
"color": "contrast",
"fontSize": "11px",
"fontWeight": "bold",
"textShadow": "0 0 6px contrast, 0 0 3px contrast"
}).add();
} else if (p.y > 0) {
barHeight = p.graphic.element.height.animVal.value;
dataLabel = p.dataLabel;
p.dataLabel.translate(dataLabel.x + barHeight, dataLabel.y);
}
});
});
}
Here I am iterating over all points and adding second label if value of my point is bigger than 30. I am using x and y parameters of this point dataLabel, but I need to add chart.plotLeft and chart.plotTop because chart plotArea is not directly at top left corner.
I am adding class to my labels because I will change their position on redraw and I need to delete previous labels to add labels with new positions.
If my point is bigger than 0 but smaller than 30 I am not adding new label. I am just translating old one so it can be on the left side of column.
example:
http://jsfiddle.net/pb1q9wzk/31/
I update the following part
formatter: function() {
return '<div style="position: absolute; left: 40px"> my label this in other line!<div class="row">bar1</div><div class="row">bar2</div><div class="row">bar3</div></div> <img style="height: 30px; width: 30px; margin-top: 10px" src="https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png"></img>'
}
http://jsfiddle.net/pb1q9wzk/21/
It is kinda messy but I couldn't figure a better way to do it. Hope it helps

How do I hide y2 axis in dygraph?

How do I hide y2 axis (Z axis) in the chart below using drawAxis option in Dygraph? The drawAxis:false option is not working in example snippet below.
I took the following example from http://dygraphs.com/ 's play example and modified to suite my question.
g = new Dygraph(document.getElementById("graph"),
// For possible data formats, see http://dygraphs.com/data.html
// The x-values could also be dates, e.g. "2012/03/15"
"X,Y,Z\n" +
"1,0,3\n" +
"2,2,6\n" +
"3,4,8\n" +
"4,6,9\n" +
"5,8,9\n" +
"6,10,8\n" +
"7,12,6\n" +
"8,14,3\n", {
// options go here. See http://dygraphs.com/options.html
legend: 'always',
animatedZooms: true,
title: 'dygraphs chart template',
series: {
'Z': {
axis: 'y2'
}
},
axes: {
y2: {
drawAxis: false
}
}
});
/*
Relevant CSS classes include:
Labels on the X & Y axes:
.dygraph-axis-label
.dygraph-axis-label-x
.dygraph-axis-label-y
.dygraph-axis-label-y2
Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html
.dygraph-title
.dygraph-xlabel
.dygraph-ylabel
.dygraph-y2label
The legend, see http://dygraphs.com/tests/series-highlight.html
.dygraph-legend
*/
.dygraph-title {
color: gray;
}
<script src="http://dygraphs.com/dygraph-dev.js"></script>
<!-- You may set style: "width: ...; height: ..." to size the chart -->
<div id="graph"></div>

Categories