Related
My project uses echart to create radar chart and i have to find click event for indicators around radar chart.
It is implemented like this.
createradarchart() {
this.theme.getJsTheme()
.pipe(
takeWhile(() => this.alive),
delay(1),
)
.subscribe(config => {
this.options = {
name: 'KPI Radar',
grid: {
left: '5%',
right: '5%',
top: 0,
bottom: 0
},
// label: {
// distance: 5
// },
type: 'radar',
color: ['red', 'green', 'blue'],
legend: {
bottom: 5,
itemGap: 20,
data: ['Baseline', 'Threshold', 'Actual'],
textStyle: {
color: 'black',
fontSize: 10
}
},
radar: {
indicator: this.indicator,
nameGap: 5,
shape: 'circle',
radius: '43%',
name: {
textStyle: {
color: 'black',
fontSize: 10
}
}
},
tooltip: {
show: true,
textStyle: {fontSize:10},
trigger: 'item',
formatter: (params => {
return params['name']+'-'+params['value'][1];
})
},
series: this.seriesdata,
};
this.ctx = this.echartsIntance.getRenderedCanvas();
this.chart = new Chart(this.ctx,{type:'radar', options: this.options})
// this.ctx = canvas.getContext("2d");
});
}
where data and options are in format, with data being fetched from server:
seriesdata: any = {type: 'radar', data:[{name:'Baseline',value:[1,2,3,4,5]},{name:'Threshold',value:[1,2,3,4,5]},{name:'Actual',value:[1,2,3,4,5]}]};
indicator = [
{ name: 'DL User Thpt_Kbps[CDBH]', max: 100 },
{ name: 'ERAB SSR[CDBH]', max: 100 },
{ name: 'PS DCR %[CDBH]', max: 100 },
{ name: 'VoLTE CSSR', max: 100 },
{ name: 'VoLTE DCR[CBBH]', max: 100 }
];
options: EChartOption = {
name: 'KPI Radar',
grid: {
left: '2%',
right: '2%',
top: 0,
bottom: 0
},
// label:{
// distance: 5
// },
type: 'radar',
color: ['red', 'green', 'blue'],
legend: {
orient: 'vertical',
align: 'left',
right: 20,
data: ['Baseline', 'Threshold', 'Actual'],
textStyle: {
color: 'black',
fontSize: 10
}
},
radar: {
indicator: this.indicator,
nameGap: 5,
shape: 'circle',
radius:'60%',
},
tooltip: {
show: false,
// trigger: 'item',
// formatter: (params => {
// return params['name']+'-'+params['value'][1];
// })
}
};
This is where i want click event to be triggered, having the name of label which is clicked.
Approach i found to do this is this, but it didnt work, i debugged and found that scale.pointLabels is empty.
labelClicked(e:any){
var self = this;
var helpers = Chart.helpers;
var scale = self.chart.scale;
var opts = scale.options;
var tickOpts = opts.ticks;
// Position of click relative to canvas.
var mouseX = e.offsetX;
var mouseY = e.offsetY;
var labelPadding = 5; // number pixels to expand label bounding box by
// get the label render position
// calcs taken from drawPointLabels() in scale.radialLinear.js
var tickBackdropHeight = (tickOpts.display && opts.display) ?
helpers.valueOrDefault(tickOpts.fontSize, Chart.defaults.global.defaultFontSize)
+ 5: 0;
var outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
for (var i = 0; i < scale.pointLabels.length; i++) {
// Extra spacing for top value due to axis labels
var extra = (i === 0 ? tickBackdropHeight / 2 : 0);
var pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + 5);
// get label size info.
// TODO fix width=0 calc in Brave?
// https://github.com/brave/brave-browser/issues/1738
var plSize = scale._pointLabelSizes[i];
// get label textAlign info
var angleRadians = scale.getIndexAngle(i);
var angle = helpers.toDegrees(angleRadians);
var textAlign = 'right';
if (angle == 0 || angle == 180) {
textAlign = 'center';
} else if (angle < 180) {
textAlign = 'left';
}
// get label vertical offset info
// also from drawPointLabels() calcs
var verticalTextOffset = 0;
if (angle === 90 || angle === 270) {
verticalTextOffset = plSize.h / 2;
} else if (angle > 270 || angle < 90) {
verticalTextOffset = plSize.h;
}
// Calculate bounding box based on textAlign
var labelTop = pointLabelPosition.y - verticalTextOffset - labelPadding;
var labelHeight = 2*labelPadding + plSize.h;
var labelBottom = labelTop + labelHeight;
var labelWidth = plSize.w + 2*labelPadding;
var labelLeft;
switch (textAlign) {
case 'center':
labelLeft = pointLabelPosition.x - labelWidth/2;
break;
case 'left':
labelLeft = pointLabelPosition.x - labelPadding;
break;
case 'right':
labelLeft = pointLabelPosition.x - labelWidth + labelPadding;
break;
default:
console.log('ERROR: unknown textAlign '+textAlign);
}
var labelRight = labelLeft + labelWidth;
// Render a rectangle for testing purposes
self.ctx.save();
self.ctx.strokeStyle = 'red';
self.ctx.lineWidth = 1;
self.ctx.strokeRect(labelLeft, labelTop, labelWidth, labelHeight);
self.ctx.restore();
// compare to the current click
if (mouseX >= labelLeft && mouseX <= labelRight && mouseY <= labelBottom && mouseY >= labelTop) {
alert(scale.pointLabels[i]+' clicked');
// Break loop to prevent multiple clicks, if they overlap we take the first one.
break;
}
}
}
Thanks in advance
For some reason no matter what we try the labels on our area chart series seem to have a mind of their own. Even though a short label looks like it could fit inside the area of the data, it puts it right on the end line, bleeding out of the area.
We suspect it might be due to having min and max dates that are beyond the series min and max, but these buffer zones are a requirement.
Is there an option to make labels be contained to their own series and not bleed off into whitespace?
Below is the example chart configuration and here is the JSFiddle: http://jsfiddle.net/sLqu34cn/
Highcharts.chart('container', {
chart: {
type: "area",
height: 200
},
legend: {
enabled: false
},
plotOptions: {
area: {
stacking: "percent",
pointPlacement: "on"
},
series: {
lineWidth: 0,
fillOpacity: 1,
marker: {
enabled: false
},
label: {
style: {
color: "white",
textOutline: "1px black"
}
}
}
},
series: [
{
name: "Two",
data: [[1532217600000, 1], [1532822400000, 0]],
color: "#41B6E6"
},
{
name: "Three",
data: [[1532217600000, 0], [1532822400000, 2]],
color: "#0072CE"
}
],
xAxis: {
tickWidth: 1,
title: {
enabled: false
},
labels: {
format: "{value: %b %e}"
},
max: 1533243166375,
min: 1530478366375,
type: "datetime"
},
yAxis: {
tickInterval: 20,
title: {
text: null
},
labels: {
format: "{value}%"
},
max: 100,
min: 0
},
tooltip: {}
});
Probably not the perfect solution, but you can create some customization to position the series labels. This is an example how to manually calculate the center of area in triangle shape:
Highcharts.wrap(Highcharts.Chart.prototype, 'drawSeriesLabels', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var chart = this,
plotTop = chart.plotTop,
plotLeft = chart.plotLeft,
series = chart.series,
height = chart.yAxis[0].height,
x1,
x2,
y1,
y2;
x1 = ((series[0].graphPath[1] + plotLeft) * 2 + series[0].graphPath[4] + plotLeft) / 3;
y1 = (height + plotTop + series[0].graphPath[2] + plotTop + series[0].graphPath[5] + plotTop) / 3;
x2 = (series[1].graphPath[1] + plotLeft + (series[1].graphPath[4] + plotLeft) * 2) / 3;
y2 = ((series[1].graphPath[2] + plotTop) * 2 + series[1].graphPath[5] + plotTop) / 3;
series[0].labelBySeries.attr({
x: x1,
y: y1,
align: 'center'
});
series[1].labelBySeries.attr({
x: x2,
y: y2,
align: 'center'
});
});
Live demo: http://jsfiddle.net/BlackLabel/34z8od5f/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I want to have custom labels in my BarChart, but using tics forces lines to be added and I want labels to be between lines to represent the area between two lines.
options = {
title: "- - - - - - - - Low - - - - - - - - - - - - - - - - Middle - - - - - - - - - - - - - - - - - - - - - - High - - - - - ",
animation: {
startup: 'true',
easing: 'linear',
duration: 500
},
height: 100,
legend: {
position: 'none'
},
hAxis: {
maxValue: 10,
minValue: 0,
ticks: [{
v: 0,
f: ''
}, {
v: 3,
f: ''
}, {
v: 7,
f: ''
}, {
v: 10,
f: ''
}]
},
width: 700,
tooltip: {
trigger: 'hover'
},
backgroundColor: "transparent",
};
I have made a fiddle showing the functions I'm looking for. I would be super happy if someone knows how to solve this correctly:
https://jsfiddle.net/zkcps3h8/2/
Functions the fiddle represents:
Having three sections of: Low, medium, high
Having lines dividing these sections
Having labels under or above these colums
Any way to solve this problem is appreciated.
there are no standard config options you can use to get the desired layout,
but you can add labels manually, when the chart finishes drawing.
use ticks to add lines for the desired sections,
then use those lines for reference when adding the labels,
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var options = {
animation: {
startup: 'true',
easing: 'linear',
duration: 500
},
height: 100,
legend: {
position: 'none'
},
hAxis: {
maxValue: 10,
minValue: 0,
gridlines: {
color: '#757575'
},
ticks: [{
v: 0,
f: ''
}, {
v: 3,
f: ''
}, {
v: 7,
f: ''
}, {
v: 10,
f: ''
}]
},
tooltip: {
trigger: 'hover'
},
backgroundColor: 'transparent',
chartArea: {
backgroundColor: 'transparent',
height: '100%',
width: '100%',
top: 60,
left: 72,
right: 24,
bottom: 24
},
height: '100%',
width: '100%'
};
var container = document.getElementById('s-graph');
var data_array = $(container).data('values');
data_array.unshift(['Something', 'Fun', {role: 'style'}]);
var data = new google.visualization.arrayToDataTable(data_array);
var chart = new google.visualization.BarChart(container);
google.visualization.events.addListener(chart, 'animationfinish', function () {
var chartElements = container.getElementsByTagName('rect');
var chartArea = chartElements[0];
var sectionLabels = ['Low', 'Middle', 'High'];
var svg = container.getElementsByTagName('svg')[0];
var svgNS = svg.namespaceURI;
// clone existing label for style, font
var defaultLabel = container.getElementsByTagName('text')[0];
var labelIndex = -1;
var xCoordLeft = parseFloat(chartArea.getAttribute('x'));
Array.prototype.forEach.call(chartElements, function(rect) {
if (rect.getAttribute('fill') === options.hAxis.gridlines.color) {
if (labelIndex > -1) {
var xCoordRect = parseFloat(rect.getAttribute('x'));
var xCoordLabel = ((xCoordRect - xCoordLeft) / 2) + xCoordLeft;
// top label
var label = defaultLabel.cloneNode(true);
label.setAttribute('x', xCoordLabel);
label.setAttribute('y', chartArea.getAttribute('y'));
label.textContent = sectionLabels[labelIndex];
svg.appendChild(label);
// adjust for length of label
var labelBounds = label.getBBox();
xCoordLabel = xCoordLabel + (labelBounds.width / 2);
label.setAttribute('x', xCoordLabel);
// bottom label
label = label.cloneNode(true);
label.setAttribute('y', parseFloat(chartArea.getAttribute('height')) + parseFloat(chartArea.getAttribute('y')) + labelBounds.height);
svg.appendChild(label);
xCoordLeft = xCoordRect;
}
labelIndex++;
}
});
});
window.addEventListener('resize', function () {
chart.draw(data, options);
});
chart.draw(data, options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div data-values="[["Tom", 7.2, "#ed341c"], ["Nisse", 6.4, "#16593a"]]" id="s-graph"></div>
note: changes made manually will not show when using chart method getImageURI,
if you need an image of the chart, you can use html2canvas
You should be able to do this via the ticks property under hAxis
Checkout this https://jsfiddle.net/5dqhxbqq/
And here is the documentation on it. hAxis.ticks
Is it possible to add an image to a specific data point in an X-Series Highchart graph?
For example, I have the following chart:
/**
* Highcharts X-range series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
each = H.each,
extendClass = H.extendClass,
pick = H.pick,
Point = H.Point,
Series = H.Series;
defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.yCategory}</b><br/>'
}
});
H.seriesTypes.xrange = H.extendClass(columnType, {
pointClass: extendClass(Point, {
// Add x2 and yCategory to the available properties for tooltip formats
getLabelConfig: function () {
var cfg = Point.prototype.getLabelConfig.call(this);
cfg.x2 = this.x2;
cfg.yCategory = this.yCategory = this.series.yAxis.categories && this.series.yAxis.categories[this.y];
return cfg;
}
}),
type: 'xrange',
forceDL: true,
parallelArrays: ['x', 'x2', 'y'],
requireSorting: false,
animate: H.seriesTypes.line.prototype.animate,
/**
* Borrow the column series metrics, but with swapped axes. This gives free access
* to features like groupPadding, grouping, pointWidth etc.
*/
getColumnMetrics: function () {
var metrics,
chart = this.chart;
function swapAxes() {
each(chart.series, function (s) {
var xAxis = s.xAxis;
s.xAxis = s.yAxis;
s.yAxis = xAxis;
});
}
swapAxes();
this.yAxis.closestPointRange = 1;
metrics = columnType.prototype.getColumnMetrics.call(this);
swapAxes();
return metrics;
},
/**
* Override cropData to show a point where x is outside visible range
* but x2 is outside.
*/
cropData: function (xData, yData, min, max) {
// Replace xData with x2Data to find the appropriate cropStart
var crop = Series.prototype.cropData.call(this, this.x2Data, yData, min, max);
// Re-insert the cropped xData
crop.xData = xData.slice(crop.start, crop.end);
return crop;
},
translate: function () {
columnType.prototype.translate.apply(this, arguments);
var series = this,
xAxis = series.xAxis,
metrics = series.columnMetrics,
minPointLength = series.options.minPointLength || 0;
H.each(series.points, function (point) {
var plotX = point.plotX,
plotX2 = xAxis.toPixels(H.pick(point.x2, point.x + (point.len || 0)), true),
width = plotX2 - plotX,
widthDifference;
if (minPointLength) {
widthDifference = width < minPointLength ? minPointLength - width : 0;
plotX -= widthDifference / 2;
plotX2 += widthDifference / 2;
}
plotX = Math.max(plotX, -10);
plotX2 = Math.min(Math.max(plotX2, -10), xAxis.len + 10);
point.shapeArgs = {
x: plotX,
y: point.plotY + metrics.offset,
width: plotX2 - plotX,
height: metrics.width
};
point.tooltipPos[0] += width / 2;
point.tooltipPos[1] -= metrics.width / 2;
});
}
});
/**
* Max x2 should be considered in xAxis extremes
*/
H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
var axis = this,
dataMax,
modMax;
proceed.call(this);
if (this.isXAxis) {
dataMax = pick(axis.dataMax, Number.MIN_VALUE);
each(this.series, function (series) {
each(series.x2Data || [], function (val) {
if (val > dataMax) {
dataMax = val;
modMax = true;
}
});
});
if (modMax) {
axis.dataMax = dataMax;
}
}
});
}(Highcharts));
// THE CHART
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Item List'
},
xAxis: {
type: 'datetime',
min: Date.UTC(2014, 11, 3)
},
yAxis: {
title: '',
categories: ['Item 1', 'Item 2'],
reversed: true
},
series: [{
name: 'Project 1',
// pointPadding: 0,
// groupPadding: 0,
borderRadius: 5,
pointWidth: 10,
data: [{
x: Date.UTC(2014, 11, 3),
x2: Date.UTC(2014, 11, 3),
y: 0
}, {
x: Date.UTC(2014, 11, 6),
x2: Date.UTC(2014, 11, 7),
y: 0
},
{
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 11),
y: 0
}], color: '#BF0B23'
}]
});
JSFiddle Example
In the first data point:
{
x: Date.UTC(2014, 11, 3),
x2: Date.UTC(2014, 11, 3),
y: 0
},
I want to add a marker image as the date range renders it too small to actually be displayed on the graph (like the "sun" image from this example) but I can't work out where the marker would need to be placed in my JSFiddle example.
The marker is placed on your point:
{
x: Date.UTC(2014, 11, 3),
x2: Date.UTC(2014, 11, 3),
y: 0,
// Like this:
marker: {
symbol: 'url(...)'
}
},
With a bar chart like this one, is is possible to change the width of the bars to represent another data attribute, say the weight of the fruits. The heavier the fruit is, the thicker the bar.
You play with the script here. I am open to other javascript plotting libraries that could do that as long as they are free.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
// I would like something like this (3.5, 6 etc is the width) :
// data: [[5, 3.4], [3, 6], [4, 3.4], [7, 2], [2, 5]]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
});
});
pointWidth is what you require to set the width of the bars. try
plotOptions: {
series: {
pointWidth: 15
}
}
This display bars with the width of 15px. Play around here. Just made an edit to the already existing code.
I use a set of area charts to simulate a variable-width-column/bar-chart. Say, each column/bar is represented by a rectangle area.
See my fiddle demo (http://jsfiddle.net/calfzhou/TUt2U/).
$(function () {
var rawData = [
{ name: 'A', x: 5.2, y: 5.6 },
{ name: 'B', x: 3.9, y: 10.1 },
{ name: 'C', x: 11.5, y: 1.2 },
{ name: 'D', x: 2.4, y: 17.8 },
{ name: 'E', x: 8.1, y: 8.4 }
];
function makeSeries(listOfData) {
var sumX = 0.0;
for (var i = 0; i < listOfData.length; i++) {
sumX += listOfData[i].x;
}
var gap = sumX / rawData.length * 0.2;
var allSeries = []
var x = 0.0;
for (var i = 0; i < listOfData.length; i++) {
var data = listOfData[i];
allSeries[i] = {
name: data.name,
data: [
[x, 0], [x, data.y],
{
x: x + data.x / 2.0,
y: data.y,
dataLabels: { enabled: true, format: data.x + ' x {y}' }
},
[x + data.x, data.y], [x + data.x, 0]
],
w: data.x,
h: data.y
};
x += data.x + gap;
}
return allSeries;
}
$('#container').highcharts({
chart: { type: 'area' },
xAxis: {
tickLength: 0,
labels: { enabled: false}
},
yAxis: {
title: { enabled: false}
},
plotOptions: {
area: {
marker: {
enabled: false,
states: {
hover: { enabled: false }
}
}
}
},
tooltip: {
followPointer: true,
useHTML: true,
headerFormat: '<span style="color: {series.color}">{series.name}</span>: ',
pointFormat: '<span>{series.options.w} x {series.options.h}</span>'
},
series: makeSeries(rawData)
});
});
Fusioncharts probably is the best option if you have a license for it to do the more optimal Marimekko charts…
I've done a little work trying to get a Marimekko charts solution in highcharts. It's not perfect, but approximates the first Marimekko charts example found here on the Fusion Charts page…
http://www.fusioncharts.com/resources/chart-tutorials/understanding-the-marimekko-chart/
The key is to use a dateTime axis, as that mode provides you more flexibility for the how you distribute points and line on the X axis which provides you the ability to have variably sized "bars" that you can construct on this axis. I use 0-1000 second space and outside the chart figure out the mappings to this scale to approximate percentage values to pace your vertical lines. Here ( http://jsfiddle.net/miken/598d9/2/ ) is a jsfiddle example that creates a variable width column chart.
$(function () {
var chart;
Highcharts.setOptions({
colors: [ '#75FFFF', '#55CCDD', '#60DD60' ]
});
$(document).ready(function() {
var CATEGORY = { // number out of 1000
0: '',
475: 'Desktops',
763: 'Laptops',
1000: 'Tablets'
};
var BucketSize = {
0: 475,
475: 475,
763: 288,
1000: 237
};
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area'
},
title: {
text: 'Contribution to Overall Sales by Brand & Category (in US$)<br>(2011-12)'
},
xAxis: {
min: 0,
max: 1000,
title: {
text: '<b>CATEGORY</b>'
},
tickInterval: 1,
minTickInterval: 1,
dateTimeLabelFormats: {
month: '%b'
},
labels: {
rotation: -60,
align: 'right',
formatter: function() {
if (CATEGORY[this.value] !== undefined) {
return '<b>' + CATEGORY[this.value] + ' (' +
this.value/10 + '%)</b>';
}
}
}
},
yAxis: {
max: 100,
gridLineWidth: 0,
title: {
text: '<b>% Share</b>'
},
labels: {
formatter: function() {
return this.value +'%'
}
}
},
tooltip: {
shared: true,
useHTML: true,
formatter: function () {
var result = 'CATEGORY: <b>' +
CATEGORY[this.x] + ' (' + Highcharts.numberFormat(BucketSize[this.x]/10,1) + '% sized bucket)</b><br>';
$.each(this.points, function(i, datum) {
if (datum.point.y !== 0) {
result += '<span style="color:' +
datum.series.color + '"><b>' +
datum.series.name + '</b></span>: ' +
'<b>$' + datum.point.y + 'K</b> (' +
Highcharts.numberFormat(
datum.point.percentage,2) +
'%)<br/>';
}
});
return (result);
}
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: 'black',
lineWidth: 1,
marker: {
enabled: false
},
step: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100,
borderWidth: 1,
title: {
text : 'Brand:'
}
},
series: [ {
name: 'HP',
data: [
[0,298],
[475,109],
[763,153],
[1000,153]
]
}, {
name: 'Dell',
data: [
[0,245],
[475,198],
[763,120],
[1000,120]
]
}, {
name: 'Sony',
data: [
[0,335],
[475,225],
[763,164],
[1000,164]
]
}]
},
function(chart){
// Render bottom line.
chart.renderer.path(['M', chart.plotLeft, chart.plotHeight + 66, 'L', chart.plotLeft+chart.plotWidth, chart.plotHeight + 66])
.attr({
'stroke-width': 3,
stroke: 'black',
zIndex:50
})
.add();
for (var category_idx in CATEGORY) {
chart.renderer.path(['M', (Math.round((category_idx / 1000) * chart.plotWidth)) + chart.plotLeft, 66, 'V', chart.plotTop + chart.plotHeight])
.attr({
'stroke-width': 1,
stroke: 'black',
zIndex:4
})
.add();
}
});
});
});
It adds an additional array to allow you to map category names to second tic values to give you a more "category" view that you might want. I've also added code at the bottom that adds vertical dividing lines between the different columns and the bottom line of the chart. It might need some tweaks for the size of your surrounding labels, etc. that I've hardcoded in pixels here as part of the math, but it should be doable.
Using a 'percent' type accent lets you have the y scale figure out the percentage totals from the raw data, whereas as noted you need to do your own math for the x axis. I'm relying more on a tooltip function to provide labels, etc than labels on the chart itself.
Another big improvement on this effort would be to find a way to make the tooltip hover area and labels to focus and be centered and encompass the bar itself instead of the right border of each bar that it is now. If someone wants to add that, feel free to here.
If I got it right you want every single bar to be of different width. I had same problem and struggled a lot to find a library offering this option. I came to the conclusion - there's none.
Anyways, I played with highcharts a little, got creative and came up with this:
You mentioned that you'd like your data to look something like this: data: [[5, 3.4], [3, 6], [4, 3.4]], with the first value being the height and the second being the width.
Let's do it using the highcharts' column graph.
Step 1:
To better differentiate the bars, input each bar as a new series. Since I generated my data dynamically, I had to assign new series dynamically:
const objects: any = [];
const extra = this.data.length - 1;
this.data.map((range) => {
const obj = {
type: 'column',
showInLegend: false,
data: [range[1]],
animation: true,
borderColor: 'black',
borderWidth: 1,
color: 'blue'
};
for (let i = 0; i < extra; i++) {
obj.data.push(null);
}
objects.push(obj);
});
this.chartOptions.series = objects;
That way your different series would look something like this:
series: [{
type: 'column',
data: [5, 3.4]
}, {
type: 'column',
data: [3, 6]
}, {
type: 'column',
data: [4, 3.4]
}]
Step 2:
Assign this as plot options for highcharts:
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0,
shadow: false
}
}
Step 3:
Now let's get creative - to have the same starting point for all bars, we need to move every single one to the graph's start:
setColumnsToZero() {
this.data.map((item, index) => {
document.querySelector('.highcharts-series-' + index).children[0].setAttribute('x', '0');
});
}
Step 4:
getDistribution() {
let total = 0;
// Array including all of the bar's data: [[5, 3.4], [3, 6], [4, 3.4]]
this.data.map(item => {
total = total + item[0];
});
// MARK: Get xAxis' total width
const totalWidth = document.querySelector('.highcharts-axis-line').getBoundingClientRect().width;
let pos = 0;
this.data.map((item, index) => {
const start = item[0];
const width = (start * totalWidth) / total;
document.querySelector('.highcharts-series-' + index).children[0].setAttribute('width', width.toString());
document.querySelector('.highcharts-series-' + index).children[0].setAttribute('x', pos.toString());
pos = pos + width;
this.getPointsPosition(index, totalWidth, total);
});
}
Step 4:
Let's get to the xAxis' points. In the first functions modify the already existing points, move the last point to the end of the axis and hide the others. In the second function we clone the last point, modify it to have either 6 or 3 total xAxis points and move each of them to the correct position
getPointsPosition(index, totalWidth, total) {
const col = document.querySelector('.highcharts-series-' + index).children[0];
const point = (document.querySelector('.highcharts-xaxis-labels').children[index] as HTMLElement);
const difference = col.getBoundingClientRect().right - point.getBoundingClientRect().right;
const half = point.getBoundingClientRect().width / 2;
if (index === this.data.length - 1) {
this.cloneNode(point, difference, totalWidth, total);
} else {
point.style.display = 'none';
}
point.style.transform = 'translateX(' + (+difference + +half) + 'px)';
point.innerHTML = total.toString();
}
cloneNode(ref: HTMLElement, difference, totalWidth, total) {
const width = document.documentElement.getBoundingClientRect().width;
const q = total / (width > 1000 && ? 6 : 3);
const w = totalWidth / (width > 1000 ? 6 : 3);
let val = total;
let valW = 0;
for (let i = 0; i < (width > 1000 ? 6 : 3); i++) {
val = val - q;
valW = valW + w;
const clone = (ref.cloneNode(true) as HTMLElement);
document.querySelector('.highcharts-xaxis-labels').appendChild(clone);
const half = clone.getBoundingClientRect().width / 2;
clone.style.transform = 'translateX(' + (-valW + difference + half) + 'px)';
const inner = Math.round(val * 100) / 100;
clone.innerHTML = inner.toString();
}
}
In the end we have a graph looking something like this (not the data from this given example, but for [[20, 0.005], [30, 0.013333333333333334], [20, 0.01], [30, 0.005555555555555555], [20, 0.006666666666666666]] with the first value being the width and the second being the height):
There might be some modifications to do to 100% fit your case. F.e. I had to adjust the xAxis' points a specific starting and end point - I spared this part.