I'd like to have the lines linking each data block, like the attached screenshot from Excel. Even better would be if the line could change color based on it's angle. I can't seem to find anything in the documentation to create this style chart. Any ideas?
JSFiddle - Same Bar Chart (without connectors)
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Row1', 'Row2']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Data1',
data: [9, 4]
}, {
name: 'Data2',
data: [12, 6]
}, {
name: 'Data3',
data: [15, 7]
}, {
name: 'Data4',
data: [16, 8]
}, {
name: 'Data5',
data: [19, 7]
}]
});
});
Related
I'm creating a chart with Highchart library and I have a set of data like this: [x,y], with x: value and y: occurrence. I tried to use this to present normal distribution line but it uses yData to calculate instead of xData. Does anyone have any ideas to solve this?
var data = [[1,5], [2,4], [2.9, 3], [3.3,1], [4.5, 19], [4.7, 25], [4.9, 15],
[5.4, 10], [5.6, 11], [6.2, 2]];
Highcharts.chart('container', {
title: {
text: 'Bell curve'
},
xAxis: [{
title: {
text: 'Data'
},
alignTicks: false
}, {
title: {
text: 'Bell curve'
},
alignTicks: false,
opposite: true
}],
yAxis: [{
title: { text: 'Occurence' }
}, {
title: { text: 'Bell curve' },
opposite: true
}],
series: [{
name: 'Bell curve',
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
baseSeries: 1,
zIndex: -1
}, {
name: 'Data',
type: 'scatter',
data: data,
accessibility: {
exposeAsGroupOnly: true
},
marker: {
radius: 3
}
}]
});
jsfiddle link: https://jsfiddle.net/Lvehqmaz/1/
You can add a mocked series and hide it, as you suggested. Example: https://jsfiddle.net/BlackLabel/1ykt65av/
Or modify the way of calculating data. Source code: https://code.highcharts.com/modules/histogram-bellcurve.src.js
(function(H) {
H.wrap(H.seriesTypes.bellcurve.prototype, 'setMean', function(proceed) {
this.mean = H.correctFloat(
H.seriesTypes.bellcurve.mean(this.baseSeries.xData)
);
});
H.wrap(H.seriesTypes.bellcurve.prototype, 'setStandardDeviation', function(proceed) {
this.standardDeviation = H.correctFloat(
H.seriesTypes.bellcurve.standardDeviation(this.baseSeries.xData, this.mean)
);
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/7cryn8vd/
API Reference: https://api.highcharts.com/highcharts/series.bellcurve.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I am working on updating HighCharts stack bar charts dynamically along with their drilldown charts but I am stick to one problem that async drilldown not getting updated.
In my scenario series data is completely dynamic and also
corresponding drilldown columns.
There one more small issue because of color:null of drilldown series, each time series color are different and because it's dynamic so I can't set static colors is there any way to make color same like default color scheme of simple column chart
Here is issue reproducible JSFiddle
I have used following methods (second method is commented in JSFiddle)
First method use chart.update API
Second method use
chart.options.merge API
// Create the chart
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
type: 'column',
name: 'Animals',
data: [2, 3],
color: null
},
'Fruits': {
type: 'column',
name: 'Fruits',
data: [7, 3],
color: null
}
};
const series = [];
series.push(drilldowns['Animals']);
series.push(drilldowns['Fruits']);
series.forEach(serie => {
chart.addSingleSeriesAsDrilldown(e.point, serie);
});
chart.applyDrilldown();
}
},
drillup: function() {
var newOptions = {
legend: {
enabled: true
}
};
this.update(newOptions);
}
}
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}]
});
$('#update').click(function() {
// First Method
chart.update({
drilldown: {
series: [{
name: 'Animals2',
data: [1, 5],
color: null,
type: 'column'
}, {
name: 'Fruits2',
data: [3, 5],
color: null,
type: 'column'
}]
}
});
// Second Method
/* chart.options.drilldown = Highcharts.merge(chart.options.drilldown, {
series: [{
name: 'Animals2',
data: [1, 5],
color: null,
type: 'column'
}, {
name: 'Fruits2',
data: [3, 5],
color: null,
type: 'column'
}]
}); */
});
You can dynamically set color to your drilldown series:
series.forEach(function(serie, i) {
serie.color = chart.options.colors[i];
chart.addSingleSeriesAsDrilldown(e.point, serie);
});
Live demo: https://jsfiddle.net/BlackLabel/mb7dhxc4/
I have found a workaround for above mention problem that async drilldown charts not getting updated I just updated the drilldown event from chart.events with the updated series of drilldown here is updated button code
$('#update').click(function() {
chart.hcEvents.drilldown[0] = function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
type: 'column',
name: 'Animals2',
data: [1, 6],
color: null
},
'Fruits': {
type: 'column',
name: 'Fruits2',
data: [7, 4],
color: null
}
};
const series = [];
series.push(drilldowns['Animals']);
series.push(drilldowns['Fruits']);
series.forEach(serie => {
chart.addSingleSeriesAsDrilldown(e.point, serie);
});
chart.applyDrilldown();
}
};
});
So I have an area stacked chart:
chart: {
type: 'area',
},
plotOptions: {
series: {
stacking: 'normal',
},
area: {
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
},
},
},
},
title: {
text: title,
},
xAxis: {
type: 'datetime',
min: startDateInMS,
max: endDateInMS,
},
yAxis: {
title: {
text: yLabel,
},
},
series: data,
credits: {
enabled: false,
},
};
How do I add a line item/chart to what I already have? I have looked through the docs and they don't really have an example of combining a line with an area chart.
Thanks!
Highcharts support combining different kinds of charts like so:
http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types
series: [{
type: 'area',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'line',
name: 'John',
data: [2, 3, 5, 7, 6]
},
Combining area and line would look something like this:
http://jsfiddle.net/henrikskar/ateje82r/
From the following fiddle we can implement drilldown in highCharts :http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/
Code:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
});
But my requirement is when you perform a drill down, I need to show multiple charts showing same data, for example a spline as well as bar chart. I tried a lots of trial and error, but no luck. Is it possible to implement this kind of feature with HighCharts or any other jQuery plugins? Kindly share your thoughts.
My existing graph with HighCharts :
It's combination of bar and spline.
When I click a bar, this should result in the following drilldown view:
Please help to achieve this.
Im creating a stacked Highcharts bar chart. Within each bar, I want to have custom text. However, highcharts is only displaying the data number.
The fiddle is here.
My code is:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
},
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'John',
data: [['test 1', 5], ['test 2', 3]]
}, {
name: 'Jane',
data: [['test 3', 2], ['test 4', 2]]
}]
});
});
I want 'test 1', 'test 2' etc is appear within the bar chart (they do appear on the popover). But instead, the data numbers, i.e. 5, 3, 2, ans 2, appears there. Can this be done?
See working fiddle with your data here
Use formatter function :
bar: {
dataLabels: {
formatter: function(){
return this.point.name
},
enabled: true
}
}