We Keep Coding

stacked bar chart using angular-highchart

var array= [{ name: "LTNS", id: 1, percentage: 60, price: 900000 },
{ name: "NPCS", id: 2, percentage: 30, price: 342000 },
{ name: "MARCOS", id: 3, percentage: 10, price: 600000 }]
Using above array i need build stacked bar chart in angular-highchart and result should be like below.
I am using angular-highchart 7.2.0 version.
I have seen lots reference but nothing is same as above.

I think that you can start from this approach:
var array = [{
name: "LTNS",
id: 1,
percentage: 60,
price: 900000
},
{
name: "NPCS",
id: 2,
percentage: 30,
price: 342000
},
{
name: "MARCOS",
id: 3,
percentage: 10,
price: 600000
}
].reverse();
array.forEach(obj => {
obj.data = [obj.percentage]
})
Highcharts.chart('container', {
chart: {
type: 'bar'
},
plotOptions: {
bar: {
stacking: 'normal',
groupPadding: 0.2
}
},
series: array
});
Demo: https://jsfiddle.net/BlackLabel/d9xrgeka/
If you will face an issue implementing other features, please ask a specific question.

multiple color axis for different parent groups of treemap highcharts

i working on treemap with two different level. The color shades for each box should depend on some value not related to value assign for the size of box. and different parents group should have different color assign. I've created multiple color axis but have not been able to assign each color axis to different parents of each group. Like example in the picture,the 1st color axis (yellow) should belong to 'banana' group and 2nd color axis (gr[`
Highcharts.chart('container', {
color:['#36954E','#367B95','#7E9536','#C744D1','#44D1B7'],
colorAxis:[ {
minColor: '#E1C410',
maxColor: '#FFFFFF',
},{
minColor: '#2EE33C',
maxColor: '#FFFFFF',
},{
minColor: '#E17C10',
maxColor: '#FFFFFF',
}
],
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
//layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
},{
level: 2,
layoutAlgorithm: 'strip',
}
],
data: [{
id: 'A',
name: 'Apples',
}, {
id: 'B',
name: 'Bananas',
}, {
id: 'O',
name: 'Oranges',
}, {
name: 'Anne',
parent: 'A',
value: 5,
colorValue: 5,
}, {
name: 'Rick',
parent: 'A',
value: 3,
colorValue: 1
}, {
name: 'Peter',
parent: 'A',
value: 4,
colorValue: 8
}, {
name: 'Anne',
parent: 'B',
value: 4,
colorValue: 3
}, {
name: 'Rick',
parent: 'B',
value: 10,
colorValue: 9
}, {
name: 'Peter',
parent: 'B',
value: 1,
colorValue: 1
}, {
name: 'Anne',
parent: 'O',
value: 1,
colorValue: 2
}, {
name: 'Rick',
parent: 'O',
value: 2,
colorValue: 3
}, {
name: 'Peter',
parent: 'O',
value: 3,
colorValue: 9
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
colorValue: 6
}]
}],
title: {
text: 'Fruit consumption'
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
This chart shows a tree map with a hierarchy, where the
groups are labelled with a different text style from the
child nodes, and the nodes are grouped together by color.
</p>
</figure>
`]1een) to group 'apple' and so on...

The color-axis feature works for the whole series, so you need to divide your parent groups into separate series. To display the series next to each other, create separate x-axis for each series.
xAxis: [{
width: '33.333%'
}, {
width: '33.333%',
left: '33.333%'
}, {
width: '33.333%',
left: '66.666%'
}],
series: [{
data: [...]
}, {
xAxis: 1,
colorAxis: 1,
data: [...]
}, {
xAxis: 2,
colorAxis: 2,
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/q3wyb298/
API Reference:
https://api.highcharts.com/highcharts/xAxis.left
https://api.highcharts.com/highcharts/xAxis.width

Chart angularJs

I have some trouble integrating my data json to a chart i tried highlight chart , nvd3 ,google chart i have data comming out of http get :
$http.get("/get")
.success(function(data){
$scope.produit=data;
});
the result of this is
$scope.produit = [
{
id: 15,
nom: "azerty",
type: "azerty",
quantity: 456,
prix: 25296
},
{
id: 21,
nom: "sdqs",
type: "qsdqsd",
quantity: 102,
prix: 52
}
];
i want to view quantity and type in chart i tried to put type and quantity in seprate tables then when i try to use for (i=0;i>$scope.produit.lenght;i++) it won't work because am putting the for inside the data structure of the chart here's an exemple of data structure
$scope.pieData = [{
name: type[0],
quantity[0]
}, {
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 10.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
Thank you !

Heat Map With Red Color Range For Negative Values And Green Color Range For Positive Values

I am using heat map of highchart. Its working fine.
Now i want to set color ranges for values. Like green color range for positive values and red color range for negative values.
Is there any option i can use to achieve it ?
Heat Map Sample

U need to Change the min color and max Color
$(function () {
$('#container').highcharts({
colorAxis: {
minColor: '#00FF00',
maxColor: '#FF0000'
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'Positive A',
value: 6,
colorValue: 1
}, {
name: 'Positive B',
value: 6,
colorValue: 2
}, {
name: 'Positive C',
value: 4,
colorValue: 3
}, {
name: 'Neutral',
value: 3,
colorValue: 4
}, {
name: 'Negative E',
value: 2,
colorValue: 5
}, {
name: 'Negative F',
value: 2,
colorValue: 6
}, {
name: 'Negative G',
value: 1,
colorValue: 7
}]
}],
title: {
text: 'Highcharts Treemap'
}
});
});
Here is the JS Fiddle for it

You can mention color to be used while preparing the data to be loaded to chart, you can add your checks and choose at data preparing part.
Example:
data: [{
name: 'A',
value: 6,
color: "red"
}, {
name: 'B',
value: 6,
color: "red"
}, {
name: 'C',
value: 4,
color:"green"
}, {
name: 'D',
value: 3,
color: "red"
}, {
name: 'E',
value: 2,
color:"green"
}, {
name: 'F',
value: 2,
color:"green"
}, {
name: 'G',
value: 1,
color:"yellow"
}]
Sample fiddle

Selecting a point by ID using Highcharts

Using Highcharts, how can I select a point using it's id? For example, if I create a chart using the following code:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [{
name: 'Point1',
x: 1,
y: 2
}, {
name: 'Point2',
x: 2,
y: 5
}]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
The tooltip tells me that when I hover over a point, what the id is. However, I can't figure out the syntax to identify that point. I know that chart1.series[0].name returns Jane. Also,
chart1.series[0].data[0].namereturnspoint1` Is there an easy way that I can just select the point and change the color knowing only 'point1'?
I'm wondering if there is a more efficient way other than looping through all of the points each time.

You can set an id for each point you want to get.
series: [{
name: 'Jane',
data: [{
'name': 'Point1',
'id': 'point1',
'x': 1,
'y': 2
}, {
'name': 'Point2',
'id': 'point2',
'x': 2,
'y': 5
}]
}, {
name: 'John',
data: [5, 7, 3]
}]
Then you can get the point by the following code.
// assuming that chart is your chart var
chart.get('point1');
demo
Or if you don't want to set an id you can simple loop thrue points to compare the name you want to find with the point name.
Reference:
http://api.highcharts.com/highstock#object-Chart