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'
}
}
}
},
Related
`https://jsfiddle.net/BlackLabel/agq6ebjd/1/`
In the above link, how can I get the data labels A, B, C with are inside the bars, out of the bars and below the x-Axis?Expected Result to have the label below the bars shown like screenshot
Thanks in advance.
You can disable data labels and use x-axis labels instead. Just add name property to the data points and set xAxis.type as 'category'.
plotOptions: {
series: {
dataLabels: {
enabled: false
},
...
}
},
xAxis: {
type: 'category',
...
}
Live demo: https://jsfiddle.net/BlackLabel/drgkt598/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
In Charts.js, i am trying to create a bar chart with a single data set and each column being differently coloured.
The desired result would look like this:
However, when i try to create something like this, at best, i get the following
The following code is the chart config object used to initialise the chart:
var config_canvas_alerts = {
type: 'bar',
data: {
datasets: [{
data: [
value0,value1,value2,value3,
],
backgroundColor: [
"#F7464A","#46BFBD","#FDB45C","#949FB1",
],
}],
labels: [
"Move - Match " + value0,
"Move - Unmatch " + value1,
"Permit - Match " + value2,
"Permit - UnMatch" + value3,
]
},
options: {
responsive: true,
legend: {
position: 'right',
onClick: function (e, p) {
alert(p.text);
},
},
title: {
display: true,
text: '#Model.mgt_dash_alert.graph_title',
position: 'top',
fontStyle: 'normal',
fontSize: 14,
padding: 10
}
}
};
I have tried to restructure the data so that each data value becomes its own dataset object with accompanying value, background colour and label but that didnt work out well either.
The only way i was able to achieve this (and hence how i generated the first screenshot) was by dynamically changing the graph from a pie chart to a bar chart after initialisation. The legend seemed to work well.
Changing dynamically from pie to bar chart is not ideal. Any suggestions here?
Is it any way to hide some labels from the legend in chart js?
I know, that I can hide all legend, using this option:
legend: {
display: false
}
but I need to hide just a part of labels in the legend.
I've found an answer. It is possible to generate new labels, using generateLabels function such like this:
legend: {
labels: {
generateLabels: function(chart) {
return [
{
text: 'text',
fillStyle: 'red'
}
]
}
}
}
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/
In Excel i was able to draw this chart from data
Chart Image
I want to convert this chart to highcharts. Data is in Google spreadsheet and I am using data module to get data directly from Google spreadsheet and show over chart. Here is code doing it.
$('#solar_chart_one').highcharts({
chart: { type: 'column' },
data: {
googleSpreadsheetKey: '0Alz3h5kIx8cWdFNHbmxqbXRILV9kbkd4V0oyX0ZyMWc'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
title: {
text: 'Power Bill Saving Options'
}
});
Here is JsFiddle for this code
Any help on how to make it look alike?
I would use the callback function and set the series you want to be a line to be a line like so:
function (chart) {
chart.series[2].update({
type: 'line',
color: 'blue'
});
}
I changed it to also be a blue line.