I have a Highcharts waterfall chart with two x-Axis:
xAxis: [{
useHTML: true,
categories: ['ONE', 'TWO', 'THREE', 'FOUR']
},
{
tickWidth: 0,
categories: [0, 10, 12, 1],
labels: {
style: {
fontSize: '12px',
fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
fontWeight: 'bold'
},
formatter: function(){
return '$ ' + Highcharts.numberFormat(this.value,1)
}
}
}],
example: https://jsfiddle.net/er1187/8gwzcbsk/4/
I am also trying to add custom labels on top of each bar (red labels): https://jsfiddle.net/er1187/pqfa0Lpm/
I am struggling to show all three (3) on one chart, when I add the custom labels the second axis disappears. Any way to have all three?
Thanks in advance!
I was able to add all three by linking two categories:
{
linkedTo: 0,
categories: ['ONE', 'TWO', 'THREE','FOUR']
},
{ linkedTo: 0,
categories: ['FIVE', 'SIX', 'SEVEN', 'EIGHT']
}
See edited jsfiddle: http://jsfiddle.net/er1187/pqfa0Lpm/
Related
It seems like when I enable crosshair for the yAxis, only the last series defined get a crosshair. I would like all of them to be crosshaired.
(.. and I would love if they also had the color (or preferably a darker variant) as the series.)
You can create an y axis per series, link those additional axes to the first one and define a specific crosshair in each axis - then link series with a specific axis and you will get an seperate customizable crosshair per series.
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[0]
}
}, {
linkedTo: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[1]
},
visible: false
}],
tooltip: {
shared: true
},
series: [{
data: data.slice()
}, {
yAxis: 1,
data: data.reverse()
}]
});
example: http://jsfiddle.net/absuLu6h/
I am trying to make the y-axis visible using various ways, but every time I change the color of the axis the color of the whole graph i.e the series changes. Is there a way to make the y and x axes visible without changing the graph color.
xAxis: {
gapGridLineWidth: 0
},
yAxis: {
opposite:false,
},
navigator: {
enabled:false,
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false,
},
You should be able to change color of your axes without changing color of your series.
You can use tickColor, lineColor, gridLineColor and labels.style for setting colors of your label:
http://api.highcharts.com/highcharts/yAxis.lineColor
yAxis: {
lineColor: 'red',
gridLineColor: 'red',
tickColor: 'red',
labels: {
style: {
color: 'red'
}
}
},
xAxis: {
lineColor: 'red',
tickColor: 'red',
labels: {
style: {
color: 'red'
}
}
},
Here you can see an example how it can work: http://jsfiddle.net/c9bfmzsm/
I've got a chart where there are multiple yAxes and labels that overlap. I cannot instantiate them with different x values because I've got a UI that will switch the axes on and off, so that would leave weird spacing to one of the labels. I want to use formatter to detect if the label is not a first label and then change the x value then, but I have trouble finding how to change the value in formatter callback. Below is my code
{
title: 'Count',
gridLineDashStyle: 'Dash',
gridLineColor: '#e8ebef',
showFirstLabel: false,
labels: {
enabled: true,
align: 'right',
x: 5,
y: 15,
style: {
fontFamily: fontFamily,
fontSize: '10px',
fontWeight: 'bold',
color: '#8596a5'
}
},
opposite: true,
allowDecimals: true,
min: 0,
minRange: 2 // Ensures flat charts don't show line at the bottom
},
{
title: 'Cost',
gridLineDashStyle: 'Dash',
gridLineColor: '#e8ebef',
showFirstLabel: false,
labels: {
enabled: true,
align: 'left',
x: 5,
y: 15,
style: {
fontFamily: fontFamily,
fontSize: '10px',
fontWeight: 'bold',
color: '#8596a5'
},
formatter: function() {
if ( this.isFirst ) { console.log("first") }
this.attr({ x:44 })
}
},
allowDecimals: true,
min: 0,
minRange: 2 // Ensures flat charts don't show line at the bottom
},
Any ideas?
Both of your yAxis should have order in which you want to show them.YAxis needs to be stacked. Use
yAxis:0, //for first series
yAxis:1 //for second series
I Will add a fiddle in few mins.
I am having some difficulty getting my x-axis labels correct. i am using highcharts to draw a column chart, but instead of useing my catagories as labels, it uses numbers from 1 - however many plots points there are.
here is the code:
$('#bar').highcharts({
chart: {
borderColor: "#FFFFFF",
borderRadius: 2,
backgroundColor: "#D8D8D8",
renderTo: 'chartdiv3',
type: 'column'
},
title: { text: 'one year rain' },
xAxis: [{
type: "catagory",
catagories: [
'09/19',
'09/12',
'09/05',
'08/29',
'08/22',
'08/15',
'08/08',
'08/01',
'07/25',
'07/18',
'07/11',
'07/04',
'10/12'
],
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
},
title: {
text: 'week ending'
}
}],
yAxis: {
title: { text: 'inches'}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
// must move the month ahead because javascript indexes a month as a number between 0 and 11
series: [{
name: 'rain',
color: "#2E64FE",
type: "column",
data: [
0.0,
0.05,
0.2,
0.02,
1.48,
0.38,
1.75,
2.74,
1.07,
0.36,
2.72,
0.1,
0.0
]
}]
});
the plots look fine, but the labels both in the tooltip and at the bottom for the x-axis just show numbers 1-12.
i appreciate any tips here. I have searched everywhere.
You spelled "categories" incorrectly.
Something like this should work:
categories: ['Apples', 'Bananas', 'Oranges']
I am developing bar chart using Highchart library.I created two y axis, first is for TAM and second for Share.Share is in percentage while TAM is not.For the Share y-axis value, I made the maximum value is 100 and it fixed, but for TAM the value is dynamic.
Referring to the graph
[http://jsfiddle.net/unidha/vGVRb/45/][1]
There a requirement to make Share bar height to depend on the Tam bar height. For example, currently Tam one is 12,300,000 unit and share one is 70% .Based on the graph, Share One is taller than Tam One because it has it's own axis.Now how I want to make the Share One's height is 70% from Tam One 's bar height?
Is it possible to do that?As my understanding for all this time, the bar height should be determined by the y-axis NOT based on other bar height.In case got solution for such requirement, what possibility it should be?
Here the same code that reside in above jsfiddle for your reference.
$(function () {
$('#container').highcharts({
chart: {
type:'column',
zoomType: 'xy',
alignTicks:false
},
title: {
text: 'Performance Snapshot'
},
xAxis: [{
categories: ['Tam One Share One ', ' Tam Two Share Two '],
//NUR
tickWidth:0
}],
yAxis: [{ // Primary yAxis
labels: {
// format: '{value}%',
style: {
// color: '#89A54E'
color: 'FFFFFF'
},
//NUR
step:2,
y:0
} ,
min: 0,
minRange:0.1,
max:100,
title: {
text: 'Share',
style: {
// color: '#89A54E'
color: '#4572A7'
}
}
}, { // Secondary yAxis
title: {
text: 'Tam',
style: {
color: '#4572A7'
}
},
labels: {
//NUR format: '{value} unit',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Tam Unit',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [12300000, 34400000],
tooltip: {
valueSuffix: ' unit'
},
groupPadding: 0
}, {
name: 'Share',
color: '#89A54E',
type: 'column',
data: [70,40],
tooltip: {
valueSuffix: '%'
},
groupPadding: 0
}]
});
});
Thanks
You can do this, but you need to pass series data as calculated values, not percent, for example: http://jsfiddle.net/vGVRb/48/
tooltip: {
shared: true,
formatter: function () {
var s = this.x,
points = this.points,
len = points.length;
for (var i = 0; i < len; i++) {
var p = points[i];
console.log(p);
s += '<br><span style="color:' + p.series.color + '">' + p.series.name + '</span><span>: ' + p.point.label + '</span>';
}
return s;
}
},
series: [{
name: 'Tam Unit',
color: '#4572A7',
type: 'column',
data: [{
y: 12300000,
label: '12300000 units'
}, {
y: 34400000,
label: '34400000 units'
}],
groupPadding: 0
}, {
name: 'Share',
color: '#89A54E',
type: 'column',
data: [{
y: 12300000 * 0.7,
label: '70%'
}, {
y: 34400000 * 0.4,
label: '40%'
}],
groupPadding: 0
}]
You can observe 'label' property under data, which is used later in tooltip.formatter to make sure you will display proper tooltip. Also, values are calculated accordingly to percentage in label.