We Keep Coding

How to format ag-grid Pie chart labels

I'm able to create and configure the series of a Pie chart using the following code:
createPieChart() {
this.options.series = [{
type: 'pie',
labelKey: 'os',
angleKey: 'share',
label: { enabled: true },
}]
this.options.legend = { enabled: false }
},
The labels appear like so, which means that if the label is too long it overflows both onto the chart itself and over the sides of the div it's being contained within:
I am aiming to make it so that if the label has more than 5 characters then it would only show 3 characters and the following symbols: ...
So for example, the label 'Symbian qwerfrwf wfegewdfv fewdf feewdf' for the blue section of the pie chart above would only show 'Sym...'
I know how to do this for column and bar charts where we use a formatter
label: {
formatter: (params) => {
if (params.value.length > 5) {
return params.value.substr(0, 3) + '...';
}
return params.value;
},
}
However, for a pie chart there doesn't seem to be a formatter available in the documentation (API Reference) (https://www.ag-grid.com/javascript-charts-pie-series/)
How can I achieve the style I want for pie chart labels?

legend: {
enabled: true,
item:{
label:{
formatter:(params)=>{
console.log('id',params.id)
console.log('itemId',params.itemId)
console.log('value',params.value)
return 'my legend goes here'
}
}
}
},

How can I get two stacked chart.js charts to be different types?

I have to chart.js charts that are stacked, and should be on the same x axis. How can I get the top one to be a bar chart, but the bottom one to be a line chart? I'm not sure of another way to declare 'type' other than at the top, where it affects all of the charts.
Here is an example stackbitz to the charts I'm building
https://stackblitz.com/edit/angular-chartjs-multiple-charts?file=src%2Fapp%2Fapp.component.ts
Thanks so much!

You have two individual charts, hence you should define a distinct Chart.ChartConfiguration for each. Provided that Chart.ChartOptions are the same for both charts, this could look as follows:
const chartOptions: Chart.ChartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: { display: false },
scales: {
xAxes: [{ display: false }],
yAxes: [{ display: false }],
}
}
const chartConfigs: Chart.ChartConfiguration[] = [{
type: 'bar',
options: chartOptions
},{
type: 'line',
options: chartOptions
}];
And inside ngAfterViewInit, you use chartConfigs[index] to pick the appropriate chart configuration.
ngAfterViewInit() {
this.charts = this.chartElementRefs.map((chartElementRef, index) => {
const config = Object.assign({}, chartConfigs[index], { data: this.chartData[index] });
return new Chart(chartElementRef.nativeElement, config);
});
}
Please have a look at your amended StackBlitz

How to display several labels in Highchart.js?

I have basic Waterfall chart (HighChart.js) basic Waterfall chart image example
How display two labels on each column? Besides, first label must be at top of column and another label must be on bottom of column. So it should be exactly like on image.
Now I have two ideas:
First label is rendered on first chart, second value will be rendered on additional hidden chart (link to example: [http://jsfiddle.net/gk14kh3q/1/][3])
$(function () {
$('#container').highcharts({
chart: {
type: 'waterfall'
},
title: {
text: 'Highcharts Waterfall'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'USD'
}
},
legend: {
enabled: false
},
series: [{
dataLabels: {
enabled: true,
// here need align label
}
}, {
dataLabels: {
enabled: true,
// here need align label
}
}]
});
});
Combine two label in one by using formatting function and useHTML property. And after that set position to labels by using css or external js
May be some others practices exist? I'll be very pleased for help. Even discussion can be usefull. Thank you!
P.S. How I could insert icons to chart like on provided image?

You can use chart.renderer.label for adding new dataLabels for your column points. You can also use chart.renderer.image for adding arrows to your chart:
var addLabels = function(chart) {
$('.custom').remove();
var series = chart.series[0],
url;
Highcharts.each(series.data, function(p, i) {
if (i) {
chart.renderer.label(p.secondLabel, p.plotX + chart.plotLeft, p.yBottom + chart.plotTop).attr({
'text-anchor': 'middle'
}).addClass('custom').add();
if (p.y > 0) {
url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Arrow_up.svg/1000px-Arrow_up.svg.png';
} else {
url = 'https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png'
}
chart.renderer.image(url, p.plotX + chart.plotLeft, chart.plotTop + chart.plotHeight - 15, 8, 13).addClass('custom').add()
}
});
};
Here you can find an example how it can work:
http://jsfiddle.net/zc2fb8vt/

Highcharts : get labels both on column and above

I'd like to have labels both on columns and above, like in this picture:
Unfortunatly, using dataLabels, I only managed to get the labels above:
plotOptions: {
column: {
dataLabels: {
enabled:true,
formatter: function() { this.point.percentage; }
}
}
}
Ans I get this result:
How can I get both labels?

Change Highcharts sparklines marker colours

How can I colour the markers in a Highcharts Sparkline? Below has no effect, the markers all stay in their default blue colour.
var $sparkline = $('.sparkline'),
colors = ['red','green','blue','green','red'],
data = [10,20,30,40,50];
$sparkline.highcharts('SparkLine', {
series: [{
data: data
}],
plotOptions: {
series: {
marker: {
fillColor: {
formatter: function () {
return colors[this.x];
}
}
}
}
},
chart: {}
});

I don't know if there's a way to target that particular aspect of the chart, but the blue colour used is the default, first colour in the chart's main colors array (#7cb5ec). This is configured via the colors property (http://api.highcharts.com/highcharts#colors):
$sparkline.highcharts('SparkLine', {
colors: [ ... ],
series: [{
data: data
}],
...
});
To change it to red as an example, you'd simply place '#f00' as the first item in the array:
$sparkline.highcharts('SparkLine', {
colors: [ '#f00' ],
...
});
JSFiddle demo.