I am getting a border for each data in a stacked bar graph.
ChartOptions :
Highcharts.chart('container', {
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: [{
y: 5,
borderColor: 'red',
borderWidth: 4
}, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [{y: 2,
borderColor: 'red',
borderWidth: 4}, 2, 3, 2, 1]
}, {[enter image description here][1]
name: 'Joe',
data: [{y: 3,
borderColor: 'red',
borderWidth: 4}, 4, 4, 2, 5]
}]
});
codepen
I want something like this
image
Kindly help me with the correct ChartOptions which gives a single border around the bar without multiple borders around each bar.
Thanks and Regards
You can add fake series with a border and update it dynamically depending on changes on the chart or render a custom shape to simulate borders.
series: [..., {
showInLegend: false,
stacking: false,
data: [10],
grouping: false,
color: 'transparent',
borderWidth: 4,
borderColor: 'red'
}]
Live demo: http://jsfiddle.net/BlackLabel/gtLm9hqk/
API Reference:
https://api.highcharts.com/highcharts/series.column
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
If you are trying to remove the red border, here is the solution:
Highcharts.chart('container', {
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: [{
y: 5,
borderWidth: 1
}, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [{
y: 2,
borderWidth: 1}, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [{
y: 3,
borderWidth: 1}, 4, 4, 2, 5]
}]
});
Related
I have a bar diagram something similar to this
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked/
And I need to display a drill-down in such a way that a single column is split into multiple bars in the next page.
For example:
If I click Apples column in the bar, it should drill down into the next page with 3 columns
First Column - x-Axis: Joe, y-Axis: 3
Second Column - x-Axis: Jane, y-Axis: 2
Third Column - x-Axis: John, y-Axis: 5
Similar operations for the rest of the columns in the main bar diagram.
Finally, I should be able to navigate back to the main page as well.
Any help from anyone would be much appreciated. Thanks in advance.
Highcharts.chart('container', {
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: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '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
}
}
},
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]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Chart showing stacked columns for comparing quantities. Stacked charts
are often used to visualize data that accumulates to a sum. This chart
is showing data labels for each individual section of the stack.
</p>
</figure>
Your requirement is possible to achieve by config data in the proper way and adding drilldown module.
Demo: https://jsfiddle.net/BlackLabel/xz46uspb/
Series data example:
series: [{
name: 'John',
data: [{
y: 5,
name: 'Apples',
drilldown: "Apples"
}, {
y: 3,
name: 'Oranges',
drilldown: "Oranges"
}, {
y: 4,
name: 'Pears',
drilldown: "Pears"
}]
}, ...
],
And drilldown data:
drilldown: {
series: [{
name: 'Apples',
id: 'Apples',
colorByPoint: true,
data: [{
name: 'John',
y: 5
}, {
name: 'Jane',
y: 2
}, {
name: 'Joe',
y: 3
}]
}]
}
API: https://api.highcharts.com/highcharts/xAxis.type
API: https://api.highcharts.com/highcharts/series.column.colorByPoint
API: https://api.highcharts.com/highcharts/drilldown
In this Stacked Column Chart I want to add different series for different categories in x axis. For example, in the category of apple i want to show aaa=1,bbb=2,ccc=3 and for the category of Oranges i want to show like eee=5,fff=4,ggg=1 and so on.Is it possible?
Highcharts.chart('container', {
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]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You need to set x data values, for example as the first elements in arrays:
series: [{
name: 'John',
data: [
[0, 5],
[1, 3]
]
}, {
name: 'Jane',
data: [
[1, 2],
[2, 2]
]
}, {
name: 'Joe',
data: [
[0, 3],
[2, 4]
]
}]
Live demo: http://jsfiddle.net/BlackLabel/nh1toe8g/
API Reference: https://api.highcharts.com/highcharts/series.column.data
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 have been working on charts, My requirement is when i click on column i want to display data in pie chart format. Initially its working good means i am getting static data in the column chart, But i want to display data in pie chart like circle. i will place code which is working good in column format. But i want it in pie format. Initially column should be in column format, When i click on any on the column data should be display in pie format.
Thanks in advance
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
// Create the chart
Highcharts.chart('container', {
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: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// trying to get data in pie chart after click on any of the column
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
{
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
},
},
// end
{
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>
// working good in column format
<script>
// Create the chart
Highcharts.chart('container', {
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: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// second drill down
{
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
}, {
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>
The line series don't properly match up.
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4],
stack: 0
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6],
stack: 0
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0],
stack: 0
}, {
type: 'line',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'line',
name: 'Total consumption',
data: [3, 2.67, 3, 6.33, 3.33],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
Here's a fiddle to show what I'm doing:
http://jsfiddle.net/tn7b0fb0/
The numbers for the line's are the same, why aren't they on top of eachother?
If you unstack the bar charts, it looks right.
Remove the stacking: 'normal' from plotOptions, and apply it individually at a series level, to the column series only.
Updated Jsfiddle