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
}]
}]
Related
Well, I have a bar Highchart showing some scores, what I want to get is the x Axis value (the user id) when I click a plot serie.
Making some research I was able to show the x Axis value when I click on the chart background (I am using console.log to show this data), but I a unable to do it clicking any plot serie (the coloured bar)
This is the snippet:
var cats=["1.- John :8","2.- Mark :7","3.- Mary :5","4.- Charles :2","5.- Sarah :1"];
var prcs=[2,12,13,11,15];
Highcharts.chart('container', {
chart: {
type: 'bar',
events:{
click: function(te){
console.log(prcs[Math.round(te.xAxis[0].value)]);
}
}
},
title: {
text: null
},
credits: {
enabled: false
},
xAxis: {
categories: cats,
lineColor: '#FFFFFF',
tickColor: 'transparent',
labels: {
align: 'left',
x: 0,
y: -12,
style: {
textOverflow: 'none',
width:'300px',
whiteSpace:'normal'//set to normal
}
}
},
yAxis: {
min: 0,
title: {
text: null,
},
labels: {
enabled: false
}
},
legend: {
enabled: false
//reversed: true
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
align: 'left',
color: '#FFFFFF',
x: 0
},
events:{
click: function(te){
console.log(this.name);
}
}
//pointPadding: 0,
//groupPadding: 0
},
bar:{
}
},
series: [{
name: 'High',
color: '#009900',
data: [0,1,0,1,0]
}, {
name: 'Mid',
color: '#FFCC66',
data: [4,3,0,1,1]
}, {
name: 'Low',
color: '#FF6666',
data: [4,4,5,1,0]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 210px"></div>
The same in jsFiddle: http://jsfiddle.net/29vfsc4t/5/
If you click on the background you will get the user id, and clicking on any bar you will get the "score", what I need is to get the user id when I click on a bar.
You should be catching the point.event instead of the chart.event to get the point's xAxis category:
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
align: 'left',
color: '#FFFFFF',
x: 0
},
point: {
events: {
click: function(te) {
console.log(this.category);
console.log(this.x);
}
}
}
},
bar: {}
},
Note the change to console.log(this.category) to show the xAxis name.
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 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 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/