We Keep Coding

Highcharts bar format datalabels to percent and add text - javascript

I have highcharts bar.
How I can format my datalabel to percent and add text datalabels (how i can reposition this text? It's need me for create vertical version of this bar) ?
In the end, it should turn out like this in a horizontal or vertical solution.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Activity'
},
xAxis: {
categories: ['Activity']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
borderWidth: 0,
stacking: 'normal',
pointWidth: 3,
dataLabels: {
enabled: true,
y: 2,
verticalAlign: 'top',
align: 'left',
color: '#000000',
style: {
textOutline: false
}
}
}
},
series: [{
name: 'One',
data: [10],
color: '#f45b69'
}, {
name: 'Two',
data: [20],
color: '#44bba4'
}, {
name: 'Three',
data: [30],
color: '#ff9f1c'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

To just show the number with a percentage sign behind as well as the series name you can set the dataLabels format like this:
plotOptions: {
series: {
format: '{y} % <br/> {series.name}',
...
}
}
If you want to change how it looks or have more customize-ability you can use formatter instead of format.
Working example: https://jsfiddle.net/ewolden/y5ygdx2a/1/
API on dataLabels.format: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format

Related

I have recently switched to highchart and i am trying to achieve a graph like this with the highchart bullet graph
but failed to customize it like this, Somebody can me define what I'm doing wrong? or is it possible to customize the bullet graph like this or should I move to another graph, Please find the code below.
Highcharts.setOptions({
chart: {
inverted: true,
marginLeft: 135,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
gridLineWidth: 0
},
plotOptions: {
series: {
borderWidth: 0,
borderRadius: '10%',
color: '#819bc2',
targetOptions: {
width: '10%'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
Highcharts.chart('container1', {
chart: {
marginTop: 40
},
yAxis: {
plotBands: [{
from: 0,
to: 150,
borderRadius: '10%',
color: '#819bc2'
}, {
from: 150,
to: 225,
borderRadius: '10%',
color: '#375e9a'
}, {
from: 225,
to: 9e9,
borderRadius: '10%',
color: '#ccd8e9'
}],
title: null
},
series: [{
data: [{
y: 150,
target: 250
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
#container1 {
max-width: 1000px;
height: 90px;
margin: 1em auto;
border-radius: 20%;
}
.hc-cat-title {
font-size: 13px;
font-weight: bold;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="container1"></div>

Yes - it's possible. Actually the column on your chart is rounded - you can observe that when it's hovered.
You sholud remove plot bands and add two more series instead:
series: [{
data: [{
y: 360,
target: 300
}]
}, {
data: [{
y: 280,
target: 250,
color: '#c0ffee'
}]
}, {
data: [{
y: 150,
target: 250,
color: '#bada55'
}]
}],
grouping has to be disabled to make series overlapped.
Live demo: https://jsfiddle.net/BlackLabel/p2zwf6e8/
API reference: https://api.highcharts.com/highcharts/

I am new to HighCharts and I am trying to display 2 graphs on the same x-axis) axis like shown here: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-multi-axes/.
However, I get an error message: This error happens when you set a series' xAxis or yAxis property to point to an axis that does not exist.
The error occurs in "chart1"
The html and JAVASCRIPT code is as follows:
$(function updat() {
var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var humid = [],
date = [],
high=[],
day=[],
chanceOfRain=[],
humid_final = [],
day_final=[],
high_final=[],
chanceOfRain_final=[]
$.getJSON(url, function (json) {
$(json['Items']).each(function(i, data) {
//Store indicator name
// fill the date array
humid.push(data.humidity);
// fill the string data array
date.push(data.Date);
high.push(data.high);
day.push(data.Day);
chanceOfRain.push(data.chanceOfRain);
});
console.log(date);
// query send string that we need to convert into numbers
for (var i = 0; i < humid.length; i++) {
if (humid[i] != null) {
humid_final.push(parseFloat(humid[i]));
high_final.push(parseFloat(high[i]));
day_final.push(parseFloat(day[i]));
chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
} else {
humid_final.push(null)
};
}
console.log("day_final", day_final);
var chart = new Highcharts.chart({
chart: {
type: 'spline',
renderTo: 'light',
marginBottom: 200
},
title: {
text: 'indicatorName'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: 'Ambient Light Level'
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'light level',
data: high_final //
}]
});
var chart1= Highcharts.chart('temp&humid',{
chart: {
zoomType:'xy'
},
title:{
text:'Humidity and temperature'
},
xAxis:{
categories: [1,2,3],
crosshair: true
},
yAxis: [{
labels:{
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title:{
text: 'Temperature',
style:{
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
},
{ //secondary Y AXIS
gridLineWidth: 0,
title:{
text: 'Humidity',
style:{
color: Highcharts.getOptions().colors[0]
}
},
labels:{
format: '{value}%',
style:{
color:Highcharts.getOptions().colors[0]
}
}
}]
,
tooltip:{shared:true},
legend:{
layout: 'vertical',
align:'left',
x:80,
verticalAlign: 'top',
y: 55,
floating:true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series:[{
name:'Humidity',
type: 'column',
yAxis:1,
data:[12,3],
tooltip:{valueSuffix: ' %'}
},
{
name:'Temperature',
type:'spline',
yAxis:2,
data: [1,2,3],
tooltip:{valueSuffix: ' °C'}
}]
});
}); //getJSON method
setTimeout(updat, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>
<div id="light" style="min-width: 310px; height: 400px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 400px; left:10px"></div>

You are doing the following:
series:[{
yAxis:1,
},
{
yAxis:2,
}]
You need to do:
series:[{
yAxis:0,
},
{
yAxis:1,
}]
The problem is that axes start indexing at 0. So your index where you set temperature to axis 2 does not work because there is no axis 2. In the demo there are 3 axes, which is why it works with these definitions.

My graph is very similar to this example: http://jsfiddle.net/MrFox1/n6vwqafg/
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<div id="container" style="height: 500px; min-width: 410px; max-width: 600px; margin: 0
auto">
</div>
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.code = this.code.toUpperCase();
});
// Instanciate the map
Highcharts.mapChart('container', {
chart: {
borderWidth: 1
},
title: {
text: 'US population density (/km²)'
},
legend: {
layout: 'vertical',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'middle',
align: 'right',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series: [{
animation: {
duration: 1000
},
data: data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
}]
});
});
});
I need to add a label to the axis showing the average of all the data shown.
Ideally with a marker to the position in the legend. The same marker that is shown on the axis when you hover over the map, that shows how the color you're pointing to relates to the legend.
The average over all the numbers has already been calculated, it's just about how to show this visually.

You can set tick positions in the color axis via colorAxis.tickPositions (array) or colorAxis.tickPositioner (callback). It will creates a tick for the specified value. If you use a logarithmic axis then those values need to be scaled properly.
colorAxis: {
tickPositions: [Math.log10(1), Math.log10(10), Math.log10(calculatedAverage), Math.log10(100), Math.log10(1000)],
Then use colorAxis.labels.formatter to define text for a specific tick.
labels: {
formatter: function () {
return this.value == calculatedAverage
? 'avg (' + this.value + ')'
: this.value;
}
}
example: http://jsfiddle.net/n6vwqafg/9/

I am creating a chart and have so far found that a scatter and errorbar combination chart is the best fit. I have hit a problem when adding an extra pair of series that because I have used a scatter, that they are placed on top of each other.
This is the standard view for the chart which is correct:
This is what I WANT to happen when I add an extra pair of series data:
But this is what happens:
var chart;
$(function () {
$('#container').highcharts({
title: {
text: 'Chart'
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['Col1', 'Col2', 'Col3']
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Chart'
}, opposite: true
}
, { // Secondary yAxis
title: {
text: 'Score'
}
}],
plotOptions: {
scatter: {
dataLabels: {
enabled: true,
x: 0,
y: 10
},
enableMouseTracking: false
},
errorbar: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
type: 'scatter',
yAxis: 1,
data: [1001.418, 1000.006, 1005.237],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[0],
padding: 3,
color: '#ffffff',
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1000.46, 1002.376], [999.071, 1000.941], [1002.753, 1007.721]]
},
//START extra data
{
name: 'Compare',
type: 'scatter',
yAxis: 1,
data: [1001.918, 1000.506, 1005.737],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[1],
padding: 3,
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1001.46, 1003.376], [1000.071, 1001.941], [1003.753, 1006.721]]
},
//END extra data
{
//force the ErrorBar icon into the legend
name: 'ErrorBar',
type: 'scatter',
marker: {
symbol: "url(data:image/gif;base64,R0lGODlhDwAMAIAAAFVVVf///yH5BAEHAAEALAAAAAAPAAwAAAIXhI8ZywEN4Yt0UnmjzWtzn4GXWFXJeRQAOw==)"
},
data:[null]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
http://jsfiddle.net/ewurrLgk/
I have taken a look through the API and I have tried to use other chart types like Line and Column and although they do align correctly, the error bar pretty much disappears because those chart types start from zero. I've also tried pointPlacement but that just moves them both into the middle. Is what I am trying to do just not possible using a scatter?

You should use pointPlacement, but set per particular series. I prepared a minified demo for you:
series: [{
type: 'scatter',
pointPlacement:-0.2,
data: [51,73]
},{
type: 'scatter',
pointPlacement:0.2,
data: [8,7.6]
},{
type: 'errorbar',
pointPlacement:-0.2,
data: [[48, 51], [68, 73]]
}, {
type: 'errorbar',
pointPlacement:0.2,
data: [[6, 8], [5.9, 7.6]]
}]
http://jsfiddle.net/6e749xx9/1/

I have this annoying thing in Highcharts that I cannot figure out. I have graphs that are dynamically generated and can contain multiple columns and splines. In the example the spline is a temperature measurement and contains lots of data points. The two columns are grouped by day and therefore contain only one value per day.
When I use this combination the column width becomes almost invisible:
http://jsfiddle.net/FXRj2/
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Test'
},
subtitle: {
text: 'Me'
},
xAxis: [{
type: 'datetime'
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall 2',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4572A7'
}
},
opposite: true
}, { // Tertiary yAxis
title: {
text: 'Rainfall 2',
style: {
color: '#red'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4red'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Rainfall 1',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [[1374105600000,1461.77],[1374192000000,1473.67],[1374278400000,1122.47],[1374364800000,1170.16],[1374451200000,1436.88],[1374537600000,1383.57],[1374624000000,9.73]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Rainfall 2',
color: '#red',
type: 'column',
yAxis: 2,
data: [
[1374105600000,3.28],[1374192000000,2.95],[1374278400000,3.12],[1374364800000,3.8],[1374451200000,3.61],[1374537600000,0.39]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [[1374105600000,21.9],[1374109200000,21.6],[1374112800000,21.2],[1374116400000,20.8],[1374120000000,20.5],[1374123600000,20],[1374127200000,19.7],[1374130800000,19.6],[1374134400000,19.9],[1374138000000,20.3],[1374141600000,20.9],[1374145200000,21.4],[1374148800000,21.9],[1374152400000,22.5],[1374156000000,23.1],[1374159600000,23.5],[1374163200000,23.9],[1374166800000,23.7],[1374170400000,23.8],[1374174000000,23.3],[1374177600000,23.1],[1374181200000,22.4],[1374184800000,21.9],[1374188400000,21.4],[1374192000000,21],[1374195600000,20.4],[1374199200000,20.1],[1374202800000,19.7],[1374206400000,19.3],[1374210000000,19],[1374213600000,18.7],[1374217200000,18.9],[1374220800000,19.3],[1374224400000,19.8],[1374228000000,20.6],[1374231600000,21.4],[1374235200000,22.1],[1374238800000,22.6],[1374242400000,23.2],[1374246000000,23.5],[1374249600000,23.5],[1374253200000,23.5],[1374256800000,23.1],[1374260400000,23],[1374264000000,22.4],[1374267600000,22],[1374271200000,21.4],[1374274800000,21.2],[1374278400000,20.6],[1374282000000,20.2],[1374285600000,20.3],[1374289200000,20.2],[1374292800000,20],[1374296400000,19.7],[1374300000000,19.3],[1374303600000,19],[1374307200000,18.9],[1374310800000,19],[1374314400000,19.2],[1374318000000,19],[1374321600000,19.7],[1374325200000,19.8],[1374328800000,20.2],[1374332400000,20.6],[1374336000000,21],[1374339600000,21.6],[1374343200000,21.8],[1374346800000,22.1],[1374350400000,22.3],[1374354000000,22.1],[1374357600000,21.5],[1374361200000,21.1],[1374364800000,20.6],[1374368400000,20.1],[1374372000000,19.7],[1374375600000,19.4],[1374379200000,19],[1374382800000,18.6],[1374386400000,18.2],[1374390000000,18.2],[1374393600000,18.6],[1374397200000,19.4],[1374400800000,20.4],[1374404400000,21.6],[1374408000000,22.9],[1374411600000,24.2],[1374415200000,25.4],[1374418800000,26.5],[1374422400000,27.2],[1374426000000,27.8],[1374429600000,28.3],[1374433200000,28.5],[1374436800000,28.4],[1374440400000,27.8],[1374444000000,27.1],[1374447600000,26.2],[1374451200000,25.7],[1374454800000,25],[1374458400000,24.3],[1374462000000,23.8],[1374465600000,23.1],[1374469200000,22.5],[1374472800000,22.1],[1374476400000,22.2],[1374480000000,22.5],[1374483600000,23.1],[1374487200000,23.9],[1374490800000,24.9],[1374494400000,26.1],[1374498000000,27],[1374501600000,27.8],[1374505200000,28.4],[1374508800000,28.9],[1374512400000,29.1],[1374516000000,29.2],[1374519600000,29],[1374523200000,28.7],[1374526800000,28.5],[1374530400000,27.7],[1374534000000,27.3],[1374537600000,26.8],[1374541200000,26.5],[1374544800000,25.9],[1374548400000,25.4],[1374552000000,24.8],[1374555600000,24.1],[1374559200000,23.6],[1374562800000,23.5],[1374566400000,23.8],[1374570000000,24.3],[1374573600000,24.9],[1374577200000,25.5],[1374580800000,25.7],[1374584400000,26.3],[1374588000000,27.3],[1374591600000,28.1],[1374595200000,28.5],[1374598800000,28.9],[1374602400000,29],[1374606000000,29.4],[1374609600000,29.1],[1374613200000,28.9],[1374616800000,28.2],[1374620400000,27.6],[1374624000000,26.9],[1374627600000,26.2],[1374631200000,25.6],[1374634800000,25.1],[1374638400000,24.6],[1374642000000,24.3],[1374645600000,23.7],[1374649200000,23.6],[1374652800000,23.5],[1374656400000,23.9],[1374660000000,24.4],[1374663600000,24.4],[1374667200000,24.3],[1374670800000,24.9],[1374674400000,25.9],[1374678000000,26.3]],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
I have been searching for ways to dynamically control the width of columns by using pointWidth but this gets me into a hole new area of issues, as I am not always sure if there is a combination of columns and splines and what the date range is.
Is there a trick to solve this? I hope I have missed something simple.

I was reading through the API description of Highcharts when I noticed an option to have multiple x axis. Since my problem seemed to be related to scaling on the x axis I decided to give it a go...
I created a new x axis for the line data and it works like a charm. Of course we do not want to see multiple x axis, so a little fiddling with the settings hides it again.
My x axis definition now looks like this:
xAxis: [{
type: 'datetime',
},{
type: 'datetime',
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
opposite: true,
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
}],
On the data series that has 'too many' points I simply added 'xAxis: 1'.
Fiddle here : http://jsfiddle.net/AM4vx/