How can i do single label for each series? something like in img.
The best option to create this labels is using renderer function:
function renderLabel(chart) {
chart.labelsGroup = chart.renderer.g("labelsGroup").attr({
zIndex: 100
}).add();
chart.series.forEach((series, i) => {
chart.labelGroup = chart.renderer.g("labelGroup").attr({
zIndex: 100
}).add(chart.labelsGroup);
chart.label = chart.renderer.label(
series.name,
chart.plotSizeX / 2 + chart.plotLeft - series.data[0].shapeArgs.r + (series.data[0].shapeArgs.r - series.data[0].shapeArgs.innerR) / 2,
(chart.plotHeight) / 2 + chart.plotTop)
.css({
color: '#FFFFFF',
zIndex: 999,
})
.attr({
align: 'center',
padding: 0,
zIndex: 999,
}).add(chart.labelGroup)
let height = chart.label.getBBox().height;
chart.labelGroup.translate(null, -height / 2)
})
}
and use render event to redraw it when the window size changes API
Check this example: DEMO
Related
KonvaJS is a excellent canvas plugin,it's easy to use ,a lot of demos,and detailed api document.
But i have a problem about Konva.Text, When I want to display fraction number like "7/8",it's show as a plain text <sup>7</sup>/<sub>8</sub> , how can i do?
As far as I know fabric has analogous method called setSuperscript and setSubscript, can our Konva.Text be achieved?
I suggest to draw it manually with three shapes:
function createFraction(sup, sub) {
const group = new Konva.Group();
group.add(new Konva.Text({
align: 'right',
width: 100,
x: -100,
text: sup
}));
group.add(new Konva.Text({
text: sub,
y: 13,
x: 2
}));
group.add(new Konva.Line({
stroke: 'black',
strokeWidth: 1,
points: [5, 4, -5, 20],
text: sub,
}));
return group;
}
const fraction = createFraction('7', '8');
fraction.position({ x: 50, y: 50});
layer.add(fraction);
https://jsbin.com/vahavimowa/edit?html,js,output
Looking at this example: http://www.highcharts.com/stock/demo/candlestick-and-volume
Is there a way that I can lay these two series side-by-side rather than stacked on top?
You can use axis.width and axis.left. You will not find them in axis official API, so you may encounter some issues with it, e.g. problem with a tooltip - issue on github.
The basic config for using two x axis next to each other:
xAxis: [{
width: 200,
left: 50
}, {
width: 200,
left: 300,
linkedTo: 0,
offset: 0
}],
Workaround for a tooltip position (shared tooltip does not seem to work correctly)
tooltip: {
shared: false,
shape: 'rect',
positioner: function(w, h, p) {
return {
x: p.plotX + this.chart.hoverSeries.xAxis.left - w / 2,
y: p.plotY
}
}
},
example: http://jsfiddle.net/fqc5np5g/
defs: {
patterns: [{
'id': 'budget-pattern',
'path': {
d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
stroke: 'rgba(255, 0, 0, 0.1)',
strokeWidth: 3
}
}]
},
Here the stroke is hardcoded with 'rgba(255, 0, 0, 0.1)' but I want to have different stroke for every column in highchart.
thank you
You can set series's colorByPoint to true.
plotOptions: {
series: {
colorByPoint: true
}
},
Reference: http://api.highcharts.com/highcharts/plotOptions.column.colorByPoint
OR Refer Highcharts Fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-colorbypoint-true/
I got a donut chart and want to display hours and minutes. Using highcharts pie chart with constant visible drilldown data this leads me to a big problem, please see the picture first:
The inner blue slice has the value 10.40, which stands for 10:40 as a time. The two outer slices have the values 5.50 and 4.50, which, summed up as hours and minutes, results in 10.40, but highcharts doesn't know it's a time format, so it sums that up as 10.00 which perfectly shows my problem.
I tried setting the yAxis type to datetime
type: 'datetime',
which does not change anything so far. I found other entries like Pass time values to Highcharts Column chart, which sadly left me clueless.
Did I miss something? Glad for any help.
An minimal example solution, using millisecond values to only display hours and minutes (JSFiddle):
var m = 1000 * 60;
var h = m * 60;
$('#container').highcharts({
chart: {
type: 'pie'
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%H:%M', new Date(this.y));
}
},
series: [{
name: 'Inner',
data: [
{ name: 'A', y: (10 * h) + (40 * m), color: 'blue' },
{ name: 'B', y: (3 * h), color: 'red' },
],
size: '60%'
}, {
name: 'Outer',
data: [
{ name: 'A1', y: (5 * h) + (50 * m), color: 'blue' },
{ name: 'A2', y: (4 * h) + (50 * m), color: 'blue' },
{ name: 'B1', y: (3 * h), color: 'red' },
],
size: '100%',
innerSize: '60%'
}]
});
Here we just operate with time going from 0 and out. The tooltip is used to format the values in a readable format.
See this more elaborate JSFiddle demonstration using some of the pie-donut demo code to color the slices like your example picture.
I have a bar chart where the data is coming from the database, so I don't know how many categories or series it will contain, but I still wish to display the different charts with the same standard look and feel (same bar width, space between bars, space between categories, etc.).
The chart width has to be 600px and each bar has to be 20px wide. The space between the bars has to be 5px and the space between the categories has to be 20px. The height should be calculated based on these values as I think that Highcharts doesnt do this by itself.
I tried to solve this by setting pointWidth to 20px, and then calculating the height. But I am unsure about the pointPadding and groupPadding values. It says that it's value is given in x-axis units. My x-axis only contains categories (i.e. fruits: lemon, orange, apple, etc.). What is the x-axis unit for such a category?
I have made an example fiddle where I am calculating the chart height based on the number of categories, number of series, pointWidth, pointPadding, groupPadding:
var pointWidthInPx = 20,
spaceBetweenBarsInPx = 5,
groupPaddingInPx = 5,
categories = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
series = [{
name: 'Year 1800',
data: [107, 55, 635, 203, 30]
}, {
name: 'Year 1900',
data: [133, 156, 550, 408, 45]
}, {
name: 'Year 2008',
data: [500, 604, 404, 632, 60]
}];
var totalPointWidthsInPx = pointWidthInPx * categories.length * series.length,
totalSpaceBetweenBarsInPx = spaceBetweenBarsInPx * categories.length * (series.length - 1),
totalGroupPaddingsInPx = (groupPaddingInPx * 2) * categories.length,
calculatedHeightInPx = totalPointWidthsInPx + totalSpaceBetweenBarsInPx + totalGroupPaddingsInPx;
var groupPadding = (groupPaddingInPx * categories.length) / calculatedHeightInPx;
http://jsfiddle.net/VpMtD/
Ufortunately, I can't seem to get the correct pixel value of the groupPadding or the pointPadding correctly.
Any help on how to solve this will be greatly appreciated.
You need to calculate height of the chart according to your needs. For example: http://jsfiddle.net/PhVDV/6/
function genChart(n) {
var pointWidth = 20;
var h = (pointWidth + 10) * 2 * n + 50 + 70;
// + 10- distance between bars
// * 2 - number of series
// +50+70 - margins top + bottom
// n - number of points
if ($('#container').highcharts()) {
$('#container').highcharts().destroy();
}
$('#container').highcharts({
chart: {
type: 'bar',
marginTop: 50,
marginBottom: 70,
height: h
},
plotOptions: {
bar: {
pointWidth: pointWidth,
groupPadding:0,
}
},
series: [{
data: randomData(n)
}, {
data: randomData(n)
}]
});
}
function randomData(n) {
var d = [];
while (n--) {
d.push(Math.random());
}
return d;
}
$("button").click(function () {
genChart(Math.round(Math.random() * 20) + 4);
});