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
Related
I would appreciate any help that I can get with this
I need to plot a pie chart with 4 standard pies: ABC, BCD, CDE and DEF
Each Pie has a data point coming in from my GraphiQL resolver which looks like this:
{
"data": {
"metrics": {
"A": 56147.85,
"B": 116480.51,
"C": 56147.85,
"D": 120329.45000000001,
}
}
}
This is my highchart code for piechart
function PieChart() {
const { loading, error, data } = useQuery(CONC, {
variables: {
Currency: 'USD',
Date: {
date: '2019-05-01',
date_range: ['2019-05-01', '2019-06-10'],
},
Options: {
a: {
prop: '44',
csprop: ['14', '14', '40', '60'],
},
d: {
prop: '104',
csprop: ['511', '289', '519', '62'],
},
},
C: 'G',
Incl: false,
DFilters: [
{
by: 'P',
values: [],
},
],
},
});
const Top = [];
const First = [];
const Second = [];
const Rest = [];
data &&
data.metrics.forEach((e) => {
Top.push(e['A']);
First.push(e['B']);
Second.push(e['C']);
Rest.push(e['D']);
});
return (
<HighchartWrapper
chartOptions={{
chart: {
type: 'pie',
height: 230,
// width: 565,
},
title: {
text: '',
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
},
accessibility: {
point: {
valueSuffix: '%',
},
},
exporting: {
enabled: false,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
},
},
},
series: [
{
name: 'R',
data: [
{ name: 'ABC', y: Top},
{ name: 'BCD', y: First},
{ name: 'CDE', y: Second},
{ name: 'DEF', y: Rest},
],
},
],
}}
/>
);
}
export default memo(PieChart);
PROBLEM:
The GraphiQL query is generating results.
But I believe it's the way I am trying to push data that's giving me an empty pie chart
Thank you all in advance
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'
}]
});
});
I am trying to plot a line chart and a column chart on separate y-axes in highstock using react. However, the line chart is hidden behind the column chart. Could I have the line chart on the column chart as shown in their example dual chart - https://www.highcharts.com/demo/combo-dual-axes?
I've added a link to my chart to clarify my problem.
const chart_options= {
chart: {
zoomType: 'x'
},
title: {
text: ""
},
tooltip:{
split: false,
shared:true,
valueDecimals: 2
},
legend: {
enabled: true,
layout: 'horizontal'
},
series: [
{
name: 'ABC',
type: 'line',
data: this.props.data1,
yAxis:1,
color:'grey',
lineWidth: 3
},
{
name: 'DEF',
type: 'line',
data: this.props.data2,
yAxis:0,
},
{
name: 'GHI',
type: 'column',
data: this.props.data3,
yAxis:0,
color: '#ffd699',
dataGrouping:{
enabled: false
},
pointWidth: 1
},
],
xAxis: {
type: 'datetime',
gridLineWidth:1,
title: {
text: 'Time'
},
tickPixelInterval: 5
},
yAxis: [
{
labels: {
format: '{value:.0f}%',
},
opposite: false,
tickPixelInterval: 20
},
{
title: {
labels: {
format: '{value:.2f}',
},
tickPixelInterval: 20
},
],
}
Could someone please help?
Thanks.
You can set zIndex propert for the series:
series: [{
zIndex: 1,
...
}, {
zIndex: 0,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/x5aefpLv/
API Reference: https://api.highcharts.com/highstock/series.column.zIndex
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,
}
}} />)