I am trying to get my highcharts graph to look like this or similar to this.
I have tried to use groupped category addon for highcharts, but it down not seem to work well with stack option.
sample in JSFiddle: http://jsfiddle.net/02ey1hbr/7/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -0,
style: {
fontSize: '10px',
align: 'Right',
}
},
categories: [{
name: "Case A",
categories: ["Male", "Female"]
}, {
name: "Case B",
categories: ["Male", "Female"]
}]
},
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [5,3,4,5],
stack: 'StackA'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackA'
},{
name: 'x',
data: [5,3,4,5],
stack: 'StackB'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackB'
}
]
});
To display bar the way you want, you need to get rid of the stack property from all series. Why do you want to preserve them? They are used for dividing series into groups. I also corrected position of labels using x property.
API Reference:
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.stack
http://api.highcharts.com/highcharts/xAxis.labels.x
Example:
http://jsfiddle.net/sjtdgq9L/
Within my project, using stacks allows me to get better control over the 12 data sets in a series that is split into 2 stacks. Example in jsfiddle is a smaller version to get the proof of concept working and better interact with community. Stacks also make the code much easier to maintain.
Using: Proper x-axis for Highcharts stack group column as a reference, i was able to modify my example to: http://jsfiddle.net/02ey1hbr/11/ and achieve a working example with stacks. Its not perfect but really close to.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: [{
categories: ["Case A", "Case B","Case C", "Case D"],
labels: {
rotation: -90,
x: -60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 1,
tickLength: 60,
},
{
categories: ['Male', 'Female','Male', 'Female','Male', 'Female','Male', 'Female'],
opposite: false,
labels: {
rotation: 0,
x: 60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 0,
}],
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [1,8,9,16],
stack: 'StackA'
}, {
name: 'y',
data: [1,7,10,15],
stack: 'StackA'
},{
name: 'x',
data: [3,6,11,14],
stack: 'StackB'
}, {
name: 'y',
data: [4,5,12,13],
stack: 'StackB'
},
{
name: '',
data: [0,0,0,0,0,0,0,0],
showInLegend: false,
stack: 'StackB',
xAxis: 1
}
]
});
Change your series to:-
series: [{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
},{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
}
]
Related
I have two series of data in my highchart and want to use "minPointLength" for only one of them. Is this possible to set? My series contains only: name, color and data. My chartconfig looks like this:
const chartConfig = {
chart: {
type: 'column',
dashStyle: 'ShortDash',
},
title: {
text: '',
},
xAxis: {
padding: 0,
plotLines: [{
dashStyle: 'shortDash',
}],
},
yAxis: {
opposite: true,
title: {
text: '',
},
gridLineDashStyle: 'dash',
},
plotOptions: {
column: {
borderRadiusTopLeft: 32,
borderRadiusTopRight: 32,
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
},
enableMouseTracking: false,
},
series: {
pointWidth: 24,
minPointLength: 3,
},
},
};
What I want is to always show minimum height on one of the datasets. Even if the scale goes from 1 to 1 000 000, it supposed to be a little peak at the bottom if one of my columns shows 3 out of 1 000 000.
Yes, you can set a minPointLength property individually for each series:
series: [{
minPointLength: 80,
data: [...]
}, {
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/19nc8jv6/
API Reference: https://api.highcharts.com/highcharts/series.column.minPointLength
I got a really strange problem with Highcharts in combination with Angularjs 1.6. I am using components to render graphs based on the chart type. This is a example of my json data:
"Widgets":[
{
"Id":1,
"description":"Test test",
"datasource":"Risk",
"charttype":"Bar",
"x":0,
"y":0,
"width":3,
"height":2
},
{
"Id":2,
"description":"test test 2",
"datasource":"KRI",
"charttype":"Area",
"x":3,
"y":0,
"width":3,
"height":2
},
{
"Id":3,
"description":"Some cool data",
"datasource":"KRI",
"charttype":"Heatmap",
"x":6,
"y":0,
"width":3,
"height":2
}
]
Based on Charttype I want to render the charts and I am using angular components for this. This is my angular component for a Bar chart:
angular.module("generalApp").component("chartType", {
template: "<div class=Bar></div>",
bindings: {
data: "=",
charttype: "="
},
controller: function () {
$('.Bar').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
})
}
});
And this is a component for my Area chart
angular.module("generalApp").component("chartType", {
template: "<div class=Area></div>",
bindings: {
data: "=",
charttype: "="
},
controller: function () {
$('.Area').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
}
});
On the HTML page I use the custom tag to use the component:
<chart-type data="w.datasource" charttype="w.charttype"></chart-type>
I want to bind the charttype on the widgets and based on that it must render a chart:
Condition
ng-repeat="w in dashboard.Widgets track by $index"
When I only use one chart it's working fine but when I use a more then component I get the following error in my console.
Can someone point me to the right direction?
Kind regards
It seems that the problem is that all of your components are registered using the name chartType.
They all should have a unique name, for instance: BarComponent and AreaComponent.
In your container template you can include all of the chart type components. And with a control flow directive you can specify what component should be displayed to the user. For example:
<div ng-switch="currentComponent">
<area-component ng-switch-when="area"></area-component>
<bar-component ng-switch-when="bar"></bar-component>
<div ng-switch-default>Please select a chart type</div>
</div>
I’m working with highcharts.js and I have a scatter plot example I found, fiddle here. With this example I can break down the X-axis into two categories which is ideal for my situation. However, I would like to rotate the labels for each ‘Vendor’ variable 90 degrees while keeping the ‘date’ variable horizontal. I can’t figure this out, of even know if it’s possible. I know how to rotate both variables but that doesn’t look good. Is it even possible to achieve this effect with highcharts.js?
var cates = [{
name: "1/1/2014",
categories: ["Vendor 1", "Vendor 2", "Vendor 3"]
}, {
name: "1/2/2014",
categories: ["Vendor 1", "Vendor 2", "Vendor 3"]
}, {
name: "1/3/2014",
categories: ["Vendor 1", "Vendor 2", "Vendor 3"]
}];
console.log("here: ", cates);
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "scatter",
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
backgroundColor: '#f7f7f7'
},
title: {
text: "title"
},
yAxis: [{ // Primary yAxis
labels: {
format: '${value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Daily Tickets',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Secondary yAxis
title: {
text: 'Invoices',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '${value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}]
,
series: [{
name: 'Daily',
type: 'scatter',
yAxis: 1,
data: [4, 14, 18, 5, 6, 5, 14, 15, 18],
tooltip: {
valueSuffix: ' mm'
}
}],
xAxis: {
categories: cates,
/** UNCOMMENT BELOW **/
// labels: {
// rotation:-90,
// style: {
// fontSize:'10px',
// fontWeight:'normal',
// color:'#333'
// },
//}
}
});
});
UPDATE: I figured it out, the labels object should look like this
labels: {
groupedOptions: [{
y: 90,
rotation: 0
}],
rotation:-90,
style: {
fontSize:'10px',
fontWeight:'normal',
color:'#333'
},
}
I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?
bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.
Hi I am using the Highcharts library to create a bar chart with a cumulative plot line as demonstrated in the jsFiddle below.
CHART DEMO
I am looking to have the cumulative series represented like the red line in the following image (with cumulative values plotted on the right-most axis):
SAMPLE OF DESIRED OUTPUT
As you can see the secondary Y Axis is flipped and is displaying the series index value rather than the actual cumuative values.
Here is the current code:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: [{
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null,
}
},
{
opposite:true,
title: {
text: "Cumulative"
}
}],
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}, {
name: 'Cumulative',
xAxis:1,
type:"spline",
data: [34, 732, 914, 1973, 4054]
}
]
});
How can I correct this in order to plot the series as intended?
Thanks!
What you can do is after loading add a new series based on the sum of the 2 series added at creation:
events: {
load: function () {
var s1900 = this.series[0].data;
var s2008 = this.series[1].data;
var newData = [];
if (s1900.length == s2008.length) {
for (var i = 0; i < s1900.length; i++) {
newData.push(s1900[i].y + s2008[i].y);
}
}
this.addSeries({
name: 'Cumulative',
xAxis: 0,
type: "spline",
data: newData
});
}
}
I am not sure why you want this on the opposite xAxis or why your curve in the linked image you supplied is not really the cumulative unless that is not what you really want. See live demo.
Note you are going to have to handle cases where not all points have a value or if one category is not in both series, etc etc etc.
Revised answer.
Assuming you want to have the same categories on the alternate xAxis and do not want to share the same yAxis you can do:
...
xAxis: [{
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
}, {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
opposite: true,
title: {
text: null
}
}],
yAxis: [{
min: 0,
endOnTick: false,
title: {
text: 'Population (millions)',
align: 'high'
}
}, {
min: 0,
opposite: true,
reversed: true,
endOnTick: true,
title: {
text: 'Cumulative Population (millions)',
align: 'high'
}
}],
...
This sets it up so that you have identical xAxis categories (other ways to do this). See new demo.