Highcharts treemap data labels overflow - highcharts

while using Highcharts multi level treemap I ran into data labels overflow issue. Data labels overflows to other area. This works fine at level 1 & 2 when I use option overflow: 'crop' but does not work at level 3. Any idea where it is going wrong.
Here in example area with name:F data label overflows but data label with name:C at level 2 does not overflow.
Here is fiddle example.
$(function() {
var H = Highcharts;
$('#container').highcharts({
chart: {
type: 'treemap',
width: 500
},
title: {
text: null
},
plotOptions: {
series: {
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top'
}
}, {
level: 2,
dataLabels: {
formatter: function () {
return this.point.realValue;
},
overflow: 'crop'
}
}, {
level: 3,
dataLabels: {
formatter: function () {
return this.point.realValue;
},
overflow: 'crop'
}
}]
}
},
series: [{
data: [{
name: 'A',
id: 'A',
value: 1,
color: '#FFFFFF'
}, {
name: 'B',
id: 'B',
value: 1,
color: '#FFFFFF'
}, {
name: 'C',
parent: 'A',
id: 'A-1',
value: 10,
realValue: 'thisisveryveryveryveryveryverylongteststring',
color: '#ECEA8E'
}, {
name: 'D',
parent: 'A',
id: 'A-2',
color: '#FFFFFF'
}, {
name: 'E',
parent: 'A-2',
id: 'A-2-1',
value: 10,
realValue: 'A',
color: '#599753'
}, {
name: 'F',
parent: 'A-2',
id: 'A-2-2',
value: 10,
realValue: 'thisisveryveryveryverylongteststring',
color: '#1B3C40'
}, {
name: 'G',
parent: 'B',
id: 'B-1',
value: 10,
realValue: 'A',
color: '#ECEA8E'
}, {
name: 'H',
parent: 'B',
id: 'B-2',
color: '#FFFFFF'
}, {
name: 'I',
parent: 'B-2',
id: 'B-2-1',
value: 10,
realValue: 'A',
color: '#599753'
}, {
name: 'J',
parent: 'B-2',
id: 'B-2-2',
value: 10,
realValue: 'A',
color: '#1B3C40'
}]
}]
});
});

Unfortunately, Highcharts doesn't hide labels when they don't fit treemap point area. As a workaround, you can loop through each data point and check if label related to it is wider. If it is wider just hide it.
Code:
chart: {
type: 'treemap',
width: 500,
events: {
load: function() {
var chart = this,
series = chart.series[0],
pointWidth,
labelWidth;
series.data.forEach(function(point) {
if (point.dataLabel) {
pointWidth = point.shapeArgs.width;
labelWidth = point.dataLabel.width;
if (labelWidth > pointWidth) {
point.dataLabel.hide();
}
}
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/h65xm4qb/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide

Related

Add additional tooltip from from JSON Array

I have a JSON array like this:
chart_data = [
{category: 'A', per: '0.74', total: 10294, in: 5651, out: 5661},
{category: 'B', per: '0.72', total: 10294, in: 5556, out: 7751},
{category: 'C', per: '0.68', total: 10294, in: 5598, out: 5991},
{category: 'D', per: '0.54', total: 10294, in: 6551, out: 5001}
]
now I am showing the data in the column chart where I am using per column chart data where in Highcharts the only tooltip visible is "per" but I want to show "total, in, out" all of them in the tooltip.
Here's my HighChart Code:
plotColumnChart(chart_data:any, chart_config: any){
let columnChartSeries = [];
let categories = [];
let columnChartData = {
exporting: {
chartOptions: { // specific options for the exported image
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
fallbackToExportServer: false
},
chart: {
type: 'column',
borderColor: '#c1e1c182',
borderWidth: 1,
borderRadius: 5,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: chart_config['name'],
x: -20,
style: {
color: '#0D6ABF',
fontWeight: 'bold'
}
},
credits: {
enabled: false
},
legend: {
enabled: false,
},
xAxis: {
categories: chart_data.map(function(point:any){
return [(<any>Object).values(point)[0]]
}),
title: {
text: null
},
gridLineColor: '#ffffff',
},
yAxis: {
min: 0,
tickInterval: 20,
max:100,
gridLineColor: '#ffffff',
title: {
text: null,
align: null
},
labels: {
overflow: 'justify'
}
},
tooltip: {
shared: false,
backgroundColor: 'black',
borderColor: 'black',
borderRadius: 10,
style: {
color: 'white'
},
useHTML: true,
borderWidth: 3,
headerFormat: '<b style="color: #fff;">{point.x}</b><br/>',
formatter: function() {
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
distance: "-80%",
pointFormat: '{point.y}%',
},
},
column: {
pointPadding: 0.5,
borderWidth: 0,
showInLegend: true,
zones:[{
value: chart_config['color-format'][0], // Values up to 50 (not including) ...
color: '#FA5F55' // ... have the this color.
},
{
value: chart_config['color-format'][1], // Values up to 60/70 (not including) ...
color: '#FFBF00' // ... have the this color.
},
{
color: '#98FB98' // Values greater than 70 ... have the this color.
}
],
}
},
series: [
{
name: '', //chart_config['name'],
color: '', //'#98FB98',
pointWidth: 20,
data: chart_data.map(function(point:any){
return [
Number(
(
parseFloat(
(<any>Object).values(point)[1]
)*100
).toFixed(0)
)
]
})
},
]
} as any;
Highcharts.chart(chart_config['id'], columnChartData);
}
And chart_config = {"id": 'column-chart', "name": 'ABC', 'color-format': [50, 70]};
Can anybody help me to achieve this by writing a formatter function for this?
There is no possibility to get other values from the chart level if you don't provide them in the data. In your example, only "per" value is passed to the series.data . After parsing data to the relevant format, you will also need to define series.keys in order to have access to these options.
//Data parsing to the two dimensional array
let new_chart_data = [];
chart_data.forEach(data => {
data.per = Number(data.per)
new_chart_data.push([data.category, data.per, data.total, data.in, data.out])
})
//Chart
Highcharts.chart('container', {
tooltip: {
pointFormatter: function() {
console.log(this.options)
return `<b>Per:</b> ${this.y}</br><b>Total:</b> ${this.total}</br><b>In:</b> ${this.in}</br><b>Out:</b> ${this.out}</br>`
}
},
series: [{
type: 'column',
keys: ['name', 'y', 'total', 'in', 'out'],
pointWidth: 20,
data: new_chart_data
}]
});
API Reference:
https://api.highcharts.com/highcharts/series.column.keys
Demo:
https://jsfiddle.net/BlackLabel/3dh2m79c/
Something like this?
public formatter(row): string {
return row ? `${row.per}, ${row.in}, ${row.out}` : null;
}

How to show relation between two boxes containing same data in two different treemaps

I am using treemaps for a comparison purpose. I am using highchart.com for visualization.
I am showing two different treemaps side by side and hence providing a way of comparison for users. I want to link two same boxes in different treemaps. For example, I have two different treemaps and both have word "Bananas" in common. I want that when I hover on Box containing "Bananas" in first treemap, it highlights the same box of "Bananas" in 2nd treemap.
Is this even possible?
here is the code which generates the treemap.
Highcharts.chart('treemap1', {
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 1'
}
});
Highcharts.chart('treemap2', {
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 2'
}
});
.treemap-chart {
float: left;
width: 50%
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap1" class="treemap-chart"></div>
<div id="treemap2" class="treemap-chart"></div>
Image of the output here:
codeoutput
You can do this by setting the state of a the hovered point in the mouseOver event and removing the state in the mouseOut event. Like this for the first chart, and the same for second chart changing the variable chart2 to chart1:
plotOptions: {
series: {
point: {
events: {
mouseOver: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('hover')
}
}
},
mouseOut: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('')
}
}
}
}
}
}
},
var chart1 = Highcharts.chart('treemap1', {
plotOptions: {
series: {
point: {
events: {
mouseOver: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('hover')
}
}
},
mouseOut: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('')
}
}
}
}
}
}
},
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 1'
}
});
var chart2 = Highcharts.chart('treemap2', {
plotOptions: {
series: {
point: {
events: {
mouseOver: function(event) {
for (var i = 0; i < chart1.series[0].data.length; i++) {
if (chart1.series[0].data[i].name == event.target.name && chart1.series[0].data[i].parent == event.target.parent) {
chart1.series[0].data[i].setState('hover')
}
}
},
mouseOut: function(event) {
for (var i = 0; i < chart1.series[0].data.length; i++) {
if (chart1.series[0].data[i].name == event.target.name && chart1.series[0].data[i].parent == event.target.parent) {
chart1.series[0].data[i].setState('')
}
}
}
}
}
}
},
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 2'
}
});
.treemap-chart {
float: left;
width: 50%
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap1" class="treemap-chart"></div>
<div id="treemap2" class="treemap-chart"></div>
Working jsfiddle example: https://jsfiddle.net/ewolden/czn1rjxu/2/

Highcharts - Tree map rectangles are showing the next level

I am using Highcharts Treemap and I want to prevent from showing the next level in every level of the treemap.
I want that every object on the treemap will be with only one color.
Here is my code:
Highcharts.chart('myChart', {
tooltip: {
backgroundColor: 'black',
style: {
"color": "white",
"font": "Roboto"
},
borderColor: 'black',
borderRadius: 5,
},
colorAxis: {
minColor: '#ffcfab',
maxColor: '#ff5e43' //'#FF5E43',
},
legend: {
enabled: false
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: result
}],
title: {
text: 'All Data Sources',
margin: 1,
style: {
font: 'Roboto Condensed,sans-serif',
fontSize: '24px',
fontFamily: 'Roboto Condensed',
fontWeight: 700,
display: 'block',
}
}
})
Thanks In Advance.
Setting opacity to 0 for the series seems to be fixing your problem.
Demo: http://jsfiddle.net/qa2czu8y/
$(function() {
Highcharts.chart('container', {
title: {
text: 'All Data Sources',
margin: 1,
style: {
font: 'Roboto Condensed,sans-serif',
fontSize: '24px',
fontFamily: 'Roboto Condensed',
fontWeight: 700,
display: 'block',
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3,
}],
opacity: 0,
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: 3
}, {
name: 'Peter',
parent: 'A',
value: 4,
colorValue: 4
}, {
name: 'Anne',
parent: 'B',
value: 4,
colorValue: 4
}, {
name: 'Rick',
parent: 'B',
value: 10,
colorValue: 10
}, {
name: 'Peter',
parent: 'B',
value: 1,
colorValue: 1
}, {
name: 'Anne',
parent: 'O',
value: 1,
colorValue: 1
}, {
name: 'Rick',
parent: 'O',
value: 3,
colorValue: 3
}, {
name: 'Peter',
parent: 'O',
value: 3,
colorValue: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
colorValue: 2
}]
}],
tooltip: {
backgroundColor: 'black',
style: {
"color": "white",
"font": "Roboto"
},
borderColor: 'black',
borderRadius: 5
},
colorAxis: {
minColor: '#ffcfab',
maxColor: '#ff5e43' //'#FF5E43',
},
legend: {
enabled: false
},
});
});
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

how to create a responsive custom label in highchart

I create a scatter chart and will add a label on a box that has been specified, I've managed to make his label, but when her screen minimized, do not adjust the position of its labels.
labels: {
items : [
{
html : 'Prioritas 4',
style : {
left : '380%',
top : '60px',
fontSize : '10px'
}
},
{
html : 'Prioritas 3',
style : {
left : '660%',
top : '60px',
fontSize : '10px'
}
}
]
},
and my complete code is
$('#ketenagalistrikan-pembenahan-layanan-chart').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Pembenahan Dimensi Layanan'
},
subtitle: {
text: 'Source: rad-research.com'
},
labels: {
items : [
{
html : 'Prioritas 4',
style : {
left : '380%',
top : '60px',
fontSize : '10px'
}
},
{
html : 'Prioritas 3',
style : {
left : '660%',
top : '60px',
fontSize : '10px'
}
}
]
},
xAxis: {
title: {
enabled: true,
text: 'Kepentingan'
},
min: -0.5,
max: 39.3,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 12.7,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 26,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 39.3,
zIndex: 3
}]
},
yAxis: {
title: {
text: 'Kepuasan'
},
tickInterval: 8.9,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 46.2,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 55.2,
zIndex: 3
}]
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Marketing',
data: [[8.75, 45.8]]
},{
name: 'Sales',
data: [[15.0, 43.6]]
},{
name: 'Aktivasi/Instalasi',
data: [[-0.3, 53.2]]
},{
name: 'Contact Center',
data: [[1, 52.2]]
},{
name: 'Customer Account',
data: [[-0.3, 60.1]]
},{
name: 'Field Support',
data: [[30.5, 40.3]]
},{
name: 'Billing',
data: [[37.5, 59.2]]
}]
});
Labels in this case are static, so unless you manually redraw them they will will not be responsive.
I prefer another way - you can use renderer and have control rendered objects completely. With the help axis.toPixels() method you can easily make them responsive and stays in the fixed value.
Create item on load event:
load: function () {
this.customTexts = [];
var text = this.renderer.text(
'Responsive text',
this.xAxis[0].toPixels(15),
this.yAxis[0].toPixels(50)
)
.css({
fontSize: '10px'
})
.add();
this.customTexts.push(text);
},
Redraw the item on redraw event:
redraw: function () {
this.customTexts[0].attr({
x: this.xAxis[0].toPixels(15),
y: this.yAxis[0].toPixels(50)
});
}
Example: http://jsfiddle.net/hfev4w7c/

How to create a single series bar graph with Highcharts

I'm trying to create a simple Highcharts bar graph with a single series and multiple labels in the legend. How is this done?
Here is an example:
$('#container').highcharts({
chart: {
type: 'bar',
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
labelFormatter: function() {
return this.name + " - <span class='total'>"+this.y+"</span>"
}
},
title: {
text: 'Simple Bar Graph'
},
xAxis: {
categories: ['First', 'Second', 'Third', 'Fourth', , 'Fifth'],
allowDecimals: false
},
yAxis: {
allowDecimals: false
},
series: [
{
data: [
{y: 6, name: 'First', color: 'blue'},
{y: 7, name: 'Second', color: 'green'},
{y: 9, name: 'Third', color: 'yellow'},
{y: 1, name: 'Fourth', color: 'orange'},
{y: 1, name: 'Fifth', color: 'red'}
]
}
],
});
Luckily, Highcharts is pretty flexible.
We can do some tricks (maybe hacks?) to achieve this kind of "non-convential" tasks.
What you could do in your case is create "fake" serieses, and use custom event handlers:
series: [
{
pointWidth:20,
color: colors[0],
showInLegend:false,
data: [
{y: 6, name: 'First', color: colors[0]},
{y: 7, name: 'Second', color: colors[1]},
{y: 9, name: 'Third', color: colors[2]},
{y: 1, name: 'Fourth', color: colors[3]},
{y: 1, name: 'Fifth', color: colors[4]}
]
},
{color: 'blue'},
{color: 'green'},
{color: 'yellow'},
{color: 'orange'},
{color: 'red'}
],
In order to format the legend labels we can use labelFormatter for the legend:
legend: {
labelFormatter: function(){
return names[this.index-1];
}
},
this will set the legend label to the name of the corresponding point.
And finally we need to handle the legend click, to imitate the "normal" behaviour:
plotOptions: {
series: {
events: {
legendItemClick: function (x) {
var i = this.index - 1;
var series = this.chart.series[0];
var point = series.points[i];
if(point.oldY == undefined)
point.oldY = point.y;
point.update({y: point.y != null ? null : point.oldY});
}
}
}
},
These are just examples, you can obviously improve this and adjust to your own need.
Good Luck!
http://jsfiddle.net/otm0oq2c/3/
A simpler way than the accepted answer is by setting the categories key as an array of 'labels' and the series.data as an array of 'values'.
Here is an example that uses a collection (Array of objects) or a flat object to populate a bar chart in Highcharts (jsfiddle):
The example assumes a an array of objects with keys name/value, or a simple object of key/value:
var chart = Highcharts.chart('container', {
title: {
text: 'Simple Bar'
},
chart: {type: 'bar'},
xAxis: {
// categories: Object.keys(obj)
// or
categories: collection.map(i => i.name)
},
series: [{
name: 'Usage',
colorByPoint: true,
// data: Object.values(obj)
// or:
data: collection.map(i => i.value)
}],
legend: false
});

Resources