I'm using highCharts with angularJs and I want to limit the number of xAxis to 5; so the highchart shows only 5 xAxis there is my code:
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 50
},
yAxis: {
title: {
text: ''
}
},
tickAmount cannot be used with Datetime, logarithmic or category axes as mentioned here.
tickPositions can be used to achieve this.
xAxis: {
type: 'datetime',
categories: ['2016-01-01', '2016-01-02', '2016-01-03', '2016-02-01', '2016-02-02', '2016-03-01', '2016-03-02', '2016-04-01', '2016-04-02'],
tickPositions: [0, 2, 4, 6, 8]
}
The values in the tickPositions array are the index positions.
Here is the fiddle.
Related
I have an example taken from highcharts: this question is very similar to Highcharts: legend of stacked chart
however I havent found the answer I'm looking there.
what I'm looking is something is to group the stack legends like shown below for every name legend it belongs.
in my case I want to have following structure in the legend
Male:
Joe
JOhn
Female:
Janet
Jane
is that possible?
I also tried : http://jsfiddle.net/7sgdbezh/
however since I'd be having multiple legends I dont want to clutter the chart with too many redundant stack name values.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
Hi I need to customize each column in highcharts stacked column
like this image
I this implementation i have given like this
{
categories:["6-7","7-8"]
series: [{
name: 'pass',
data: [5, 3, 4, 7, 2]
}, {
name: 'Fail',
data: [2, 2, 3, 2, 1]
}]
}
But now I need to change this implementation and i have to customize each column and add categories
how do i achieve this i'm having a array like this
[{"pass":2,"fail":3,"category":"6-7","percentage":"20%"}
{"pass":5,"fail":0,"category":"7-8","percentage":"10%"}]
i wanted like this
|percentage|
------------
| pass |
| fail |
-----------------
category
You need to preprocess your data to create series structure required by Highcharts. The 'category' label is achievable by using name property and 'percentage' by stack-labels formatter:
var data = [{
"pass": 2,
"fail": 3,
"category": "6-7",
"percentage": "20%"
}, {
"pass": 5,
"fail": 0,
"category": "7-8",
"percentage": "10%"
}];
var series = [{
name: 'Pass',
data: []
}, {
name: 'Fail',
data: []
}];
data.forEach(function(dataObj) {
series[0].data.push({
y: dataObj.pass,
name: dataObj.category,
percentage: dataObj.percentage
});
series[1].data.push({
y: dataObj.fail,
name: dataObj.category
});
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
yAxis: {
stackLabels: {
enabled: true,
formatter: function() {
return this.axis.series[0].options.data[this.x].percentage;
}
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/nfbq2soe/
API Reference: https://api.highcharts.com/highcharts/yAxis.stackLabels.formatter
I want to display data from my database into highcharts (bars).
I tried using HashMap to pass values from controller to javascript.
MyController.java:
#GetMapping("/Hist")
public String barGraph(Model model) {
ApplicationContext context =
new ClassPathXmlApplicationContext("Spring-Module.xml");
PTS_POINTS_HISTORY_DAO ptsHistDAO = (PTS_POINTS_HISTORY_DAO) context.getBean("PtsPointsHistoryDAO");
model.addAttribute("surveyMap", ptsHistDAO.barGraph());
//ptsHistDAO.barGraph() returns Map<String, Integer>
return "Hist";
}
hist.jsp:
<div id="containerx" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('containerx', {
chart: {
type: 'column'
},
title: {
text: 'Total Redeem'
},
xAxis: {
categories: ['${surveyMap.keySet()}']
},
yAxis: {
max: 10000,
min:0,
title: {
text: 'Numbre of Loylaty Points Redeemed'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'permillion'
}},
series: [{
name: 'Fulfilled',
data: [9667, 0, 5694, 2752, 200]
}, {
name: 'Cancelled',
data: [500, 3000, 300, 2, 1]
}, {
name: 'Pending',
data: [3, 500, 400, 2, 50]
}]
});
</script>
I expected that each key will be represented by their value in bar graph, but actually all the keys represents only the first value in graph.
expected :
x1:20151514 y1: 9667 cancelled, 500 fullfilled, 3 pending
what i get:
x1: [20151514,20151513,20151512..] y1: 9667 cancelled, 500 fullfilled, 3 pending
Highcharts requires categories property to be an array of strings. Your result was a string, which required to use JSON.parse method:
var str = "[0013-05-08, 2010-11-17, 0015-05-09, 0024-01-01, 0021-01-01]"
var res = str.replace(/,\s/g, '","');
var res2 = res.replace('[', '["');
var res3 = res2.replace(']', '"]')
Highcharts.chart('container', {
xAxis: {
categories: JSON.parse(res3)
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/k4L3whu5/
API Reference: https://api.highcharts.com/highcharts/xAxis.categories
I have created a histogram of some data, and would like to show a vertical line where the mean of this data is located. I am able to place a line at any of the categories on the bar chart, for example:
The code for doing this is (react-c3js):
<C3Chart
key={foo}
data={{ unload: true,
columns: data.columns,
type: 'bar',
color: (color, d) => someColor
}}
grid={{
x: {
lines: [
{ value: '1332', text: 'mean' },
{ value: d3.mean(dataForHistogram), text: 'median' },
]
},
y: {
lines: [
{ value: 100, text: 'oiweryoqeiuw' },
]
}
}}
axis={{
x: {
unload: true,
show: features ? true : false,
categories,
type: "category",
label: someLabel,
}
}} />
Note that 1332 is not the actual mean - the correct mean is 2092. But this is not a category value, so the line does not display when I use the mean as the value for the line.
How can I place a line representing the mean on such a bar chart?
Someone gave me the following solution, and it works for me. The solution was to change the type of x-axis from category to linear and to specify the x data:
const categories = [1, 2, 3, 4, 5];
const yValues = [10, 8, 6, 3, 7];
const xDataName = 'my-x-data';
const data = {
columns: [
[xDataName, ...categories],
[yData1, ...yValues],
],
};
return (<C3Chart
key={foo}
data={{
x: xDataName,
unload: true,
columns: data.columns,
type: 'bar',
color: (color, d) => someColor
}}
grid={{
lines: {
front: true
},
x: {
lines: [
{ value: d3.mean(yValues), text: 'mean' },
]
}
}}
axis={{
x: {
unload: true,
show: features ? true : false,
categories,
type: "linear",
label: someLabel,
}
}} />)
I'm using type: 'bar3d', Extjs 6.0.2.
Inside items i've
axes: [{
type: 'numeric3d',
integerOnly: true,
minimum: 0,
minorTickSteps: 1,
},
{
type: 'category3d',
grid: true,
title: {
text: 'Queues'
}
}]
How can i remove the decimals from y-axis? I'm pushing only integer values to the y-axis.
One way to do this is to set majorTickSteps on the axis to match the difference between the maximum and minimum values of the axis. As you have set the minimum to 0, you just need to determine the maximum value of the calls field in the store. This will automatically become the maximum value on the axis so maximum does not need to be set.
axes: [{
type: 'numeric3d',
minimum: 0,
majorTickSteps: store.max('calls'),
fields: ['calls']
}, {
type: 'category3d',
position: 'bottom',
title: 'Categories',
fields: ['name'],
}],
See fiddle: https://fiddle.sencha.com/#fiddle/1iqp
If you had non-integer values, you would need to set the maximum and the majorTickSteps to the next highest integer greater than the maximum value.
Decimals in the Y axis can be easily removed by adding a small checking on the axes rendering.
axes: [{
type: 'numeric3d',
position: 'left',
minimum:0,
fields: ['field1','field2'],
renderer: function (label, layout, lastLabel) {
var string = layout.toString();
var found = string.indexOf('.');
if(found == '-1') {
return layout;
} else {
return ' '
}
},
grid: {
odd: {
fillStyle: 'rgba(245, 245, 245, 2)'
},
even: {
fillStyle: 'rgba(255, 255, 255, 2)'
}
},
title: {
text: 'Title Name'
}
}]