I am having problems with my stack labels. I have them rotated -90 degrees and I have set align to left and vertical align to bottom. But for some reason the label is aligned to the bottom of each column but not as I expected it to do. The center of the text label is align to the bottom, not the first letter of the label. Is there a way to accomplish what I want without manually calculating the y offset for each individual stack label? And if not, how would I best do that tiresome calculation?
See attached fiddle:
$(function () {
$('#container').highcharts({
chart: { type: 'column' },
title: { text: '' },
xAxis: { categories: [""] },
yAxis: [{
title: { text: '', style: { color: '#4572A7'} },
labels: {
formatter: function () { return Highcharts.numberFormat(this.value, 0) + " USD" },
style: { color: '#4572A7' }
},
stackLabels: {
enabled: true,
style: { fontSize: '1.5em', fontWeight: 'bold', color: 'black' },
formatter: function () { return this.stack; },
rotation: -90, x: -5,
verticalAlign: 'bottom',
align: 'left'
}}],
legend: { borderWidth: 1, shadow: false },
plotOptions: {
column: { stacking: 'normal' },
series: { shadow: false}
},
series: [{ data: [34, 34, 54, 12, 23], stack: 'Stack 1' }]
});
});
http://jsfiddle.net/Zprjn/6/
Cheers!
EDIT
This is a simplified version of what I actually have. In my real chart I have dynamic content so there are different texts in the stack labels and the columns have various heights. None of this I know beforehand and thus I need to, somehow, dynamically adjust the stack labels to the bottom (and to the left of) of the columns regardless of the length of the text in the actual label.
Thanks again!
You can change:
verticalAlign: 'middle'
Example: http://jsfiddle.net/Zprjn/7/
or if you want at bottom, add:
y: -40
Example: http://jsfiddle.net/Zprjn/8/
I just figured it out! I had to specify
textAlign: 'left'
as well and that fixed it!
See the updated jsFiddle:
http://jsfiddle.net/Zprjn/9/
Related
use high chart js multiply position legend, I have 2 legends 1st legend align left and 2nd legend align right, currently my view is (click the link and see ): JSfiddle Or see below my code, how to possible this ?
yAxis: [
{
labels: {
formatter: function() {
return "$"+ this.value;
}
},
title: {
text: ''
},
opposite: false
},
{
labels: {
formatter: function() {
return this.value + "k";
}
},
title: {
text: ''
},
opposite: true
}
],
legend:{
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
floating: true,
symbolHeight: 50,
itemMarginTop: 5,
itemMarginBottom: 5,
backgroundColor: '#ffffff'
},
Here's an example of the split legend: http://jsfiddle.net/kkulig/6gzp6tqu/
It's done by wrapping Highcharts Legend.prototype.getAllItems and Chart.prototype.render core functions. You'll find more information about wrapping here (Wrapping prototype functions section): https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I want that if the value is below 300, the align must be "right" and the color of the bar will be yellow.
I need to make this condition for each category. But, I do not know how to do it.
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;
console.log(this.series.name);
},
style:{
width:100
}
}
}
}
I can at least solve half the problem. But couldn't figure out, how to bind the text alignment to the value.
Yellow bar if value below 300
Use the zones property inside every series:
series: [{
name: 'bar3',
data: [600,540,535,500,0],
color: "#00FF00",
// Append this to each series:
zones: [{
// Make it yellow if <= 300
color: '#f0e600',
value: 300
}]
}]
I need to display the average of the values of my 2 datasets, but with a specific characteristic: when the users zoom the chart, the average line is recalculated ONLY with the values of the zoomed area.
How is this done?
Here is my JS:
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Test'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
title: {
enabled: true,
text: 'Date'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: ''
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} date, {point.y} dose'
}
}
},
series: [{
name: 'ag',
color: 'rgba(223, 83, 83, .5)',
data: [[1426719600000,0.9659],[1426719600000,0.8928],[1445205600000,1.6428],[1445205600000,1.4711],[1445205600000,1.4209],[1445205600000,1.9574],[1445205600000,1.1226],[1445205600000,0.8159],[1445205600000,1.0114],[1445205600000,0.9168],[1445464800000,1.175],[1445464800000,1.2219],[1445464800000,1.2641],[1445464800000,1.3006],[1445464800000,0.9375],[1445464800000,0.8966],[1445464800000,0.9374],[1445464800000,1.0811]]
}, {
name: 'cf',
color: 'rgba(119, 152, 191, .5)',
data: [[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.015],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.015],[1445378400000,2.015],[1445378400000,2.015],[1445464800000,1.2254],[1445464800000,1.1065],[1445464800000,1.3482],[1445464800000,1.3015],[1445292000000,1.2297]]
}]
});
});
Thanks in advance!
This can be done several ways. I am going to show you the way to do it via chart.events.redraw. Whenever you do a zoom (or reset zoom) the chart is redrawn and this gives us a good hook into calculating and adding items to chart at that time. Here is the code block for the redraw event:
Here is a live demo.
I made it verbose so you can see each step. We are going to use getExtremes() to find out what are max and min xAxis and yAxis indexes are. From this we determine if the points in each series are within this "window". If they are not within the window we ignore. If they are then we add the y-value to a var and increment the point counter by 1. Once we are done we do a simple check to make sure we are not going to divide by zero and then calculate the average.
Once we have the average we then will draw a plotLine at the value of the average we calculated above. First we see if a plotline exists with our id. If it does we remove it. Then we create our new plotline.
There is some clean up to do as well (such as, do you include a 0-value plotline based on your business rules) but this should get you started.
Attempted to add code block in edit as original answer attempt would not let it through. Still unable to post code block.
Creating a few pie charts using Highcharts which render fine, however the legend does not swap between pages. It updates the page number (E.g. 1/4 -> 2/4 -> 3/4) but the contents of the legend does not change.
I have used code from http://jsfiddle.net/qegmnsm7/ and simply passed my own data into it; giving this code:
var areaOptions = {
chart: {
renderTo: 'areaPie',
defaultSeriesType: 'pie',
width: 900,
height: 600
},
title: {
text: "Test Pie Chart."
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 12,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333',
fontSize: '12px'
}
}
},
exporting: {
buttons: {
printButton: {
enabled: false
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return Math.round(this.percentage) + '% (' + this.y + ')';
}
},
showInLegend: true
, point: {
events: {
legendItemClick: function () {
filterList(this);
this.select();
return false;
},
click: function () { filterList(this); }
}
}
},
series: [{
type: 'pie',
name: 'Banana',
data: []
}]
}
};
areaOptions.series = #Html.Raw(ViewBag.Area);
var areaChart = new Highcharts.Chart(areaOptions);
areaChart.render();
Giving this:
However upon clicking the 'down' arrow, the legend stays exactly the same - apart from 1/2 changes to 2/2.
I have used the example code linked above in my application and it works perfectly; therefore I expected simply updating the data input to work. However something is messing it up and I can't find any other users' questions or google links to help.
What am I doing wrong that stops the legend from paging properly?
Edit: Here is a JSFiddle showing exactly what I mean.
areaChart.render(); is not a part of official API and is causing the problem with legend paging. Removing this part of code will fix you issue.
Fixed code in JSFiddle: https://jsfiddle.net/kfdoxscx/9/
i'm new in the use of highchart, and i made a jquery to display an json result in the series data, but the problem is that i can't (or at least don't know how to) set the last column in x-axis 0
success: function (datalist) {
alert(JSON.stringify(datalist))
//comienza el chart
$('#container').highcharts({
chart: {
type: 'waterfall',
width: 1000,
height: 500
},
title: {
text: name
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '16px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: ''
}
},
legend: {
maxHeight: 30,
enabled: false
},
tooltip: {
pointFormat: '<b>${point.y:,.2f}</b> USD'
},
series: [{
upColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[3],
data: datalist.tablas,
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y / 1000, ',') + 'k';
},
style: {
color: '#FFFFFF',
fontWeight: 'bold',
textShadow: '0px 0px 3px black'
}
},
pointPadding: 0
}]
});
with this code, the data from the json is displayed, but the problem is that the last one should be at x-axis 0 like the first one and is displayed as an increment, i found there is a way you get the last column with the property isSum: true, but i neither know how to add more columns when i already have the serie's data filled with the json result, hope you can help me to understand better the use of the highchart, thanks in advice
i found the solution, like i said, with the atribute: issum:true, i just add another object in the json array with this line code
success: function (datalist) {
datalist['tablas'].push({ "name": fyear, "isSum": "true" });
with that we get a last column with the sum of the previous values, hope this help anybody with the same issue