How to add percent symbol with data inside column in highchart? - charts

I am using column highchart. Now I want % sign after my Data. Something like, if I have data value 7.18, I want to show it in 7.18% format. How can I do this? Please share with me if anyone has any idea.
My codes are below:
$('#cagr2').highcharts({
chart: {
type: 'column',
spacingBottom: -7,
spacingTop:20
},
title: {
text: ''
}, exporting: { enabled: false },
credits: {
enabled: false
},
xAxis: {
lineColor: 'transparent',
categories: ['']
},
yAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
enabled: true,
layout: 'horizontal',
align: 'center',
//x: -10,
verticalAlign: 'top',
y: -5,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#ffffff',
borderWidth: 1,
shadow: true
},
tooltip: {
headerFormat: '<b>{point.x}</b>',
pointFormat: '{series.name}: {point.y}',
valueSuffix: ' %'
},
plotOptions: {
series: {
animation: {
duration: 7000
}
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '18px'
}
}
}
},
series: [{
name: 'Rate of return',
data: [parseFloat(cagr)]
}]
});

All you need to do here is add the format or formatter attribute to your dataLabels.
Example using format:
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '18px'
},
format: '{y} %', // your label's value plus the percentage sign
valueDecimals: 2 // show your label's value up to two decimal places
}
}
Example using formatter:
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '18px'
},
formatter: function() {
// numberFormat takes your label's value and the decimal places to show
return Highcharts.numberFormat(this.y, 2) + '%';
},
}
}
Here's how this will look:
I hope this helps!

Related

How to make only the text label 'FontWeight: Bold' on Tooltip EChartJS

I need help here from you guys, Is there a way to make the text label in my tooltip BOLD ?? I mean only the label.
I try using the fontWeight: 'bold' but all text on my tooltip is bold.
i just want the label bold, not the data.
this is my script
var echartsConfig = function() {
if( $('#e_chart_07').length > 0 ){
var eChart_07 = echarts.init(document.getElementById('e_chart_07'));
var option07 = {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 15,
fontColor: 'black'
}
},
color: ['blue','purple','orange','red'],
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
borderRadius:10,
padding:10,
axisPointer:{
lineStyle:{
width:0,
}
},
textStyle: {
color: '#324148',
fontFamily: '"Poppins", sans-serif',
fontSize: 12,
// fontWeight: 'bold'
}
},
grid: {
top: '13%',
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : [<?php foreach($duta as $dba){
echo '"'.$dba->agj_month_name.' '.$dba->agj_year.'",';
}?>
],
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: 'Black'
}
}
}
],
yAxis : [
{
type : 'value',
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: 'Black'
}
},
splitLine: {
lineStyle: {
color: 'transparent',
}
}
}
],
series : [
{
name:'0-30 ',
type:'bar',
barMaxWidth: 30,
data:[<?php foreach($duta as $dba){
echo '"'.$dba->agj_030.'",';
}?>],
itemStyle: {
normal: {
barBorderRadius: [3, 3, 0, 0] ,
}
}
},
{
name:'31-60 ',
type:'bar',
barMaxWidth: 30,
data:[<?php foreach($duta as $dba){
echo '"'.$dba->agj_3160.'",';
}?>],
itemStyle: {
normal: {
barBorderRadius: [3, 3, 0, 0] ,
}
},
},
{
name:'61-90 ',
type:'bar',
barMaxWidth: 30,
data:[<?php foreach($duta as $dba){
echo '"'.$dba->agj_6190.'",';
}?>],
itemStyle: {
normal: {
barBorderRadius: [3, 3, 0, 0] ,
}
},
},
{
name:'>90 ',
type:'bar',
barMaxWidth: 30,
data:[<?php foreach($duta as $dba){
echo '"'.$dba->agj_more90.'",';
}?>],
itemStyle: {
normal: {
barBorderRadius: [3, 3, 0, 0] ,
}
},
}
]
};
eChart_07.setOption(option07);
eChart_07.resize();
}
<div id="e_chart_07" class="echart" style="height:294px;"></div>
you should use formatter for that. you can see the code below.
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
borderRadius:10,
padding:10,
axisPointer:{
lineStyle:{
width:0,
}
},
textStyle: {
color: '#324148',
fontFamily: '"Poppins", sans-serif',
fontSize: 12,
// fontWeight: 'bold'
},
formatter: (params) => {
let dataStr = `<div>${params[0].name}</div>`;
console.log(params[0]);
params.forEach((item) => {
let valueCal = ((params[1].value/params[0].value)*100).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",") == undefined ? "-" : ((params[1].value/params[0].value)*100).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
dataStr = `
<div><strong>Persentase</strong></div>
<div>
<i class="fa fa-circle" style="color:${item.color}"></i>
${params[1].seriesName} :
${valueCal}
</div>
`;
});
return dataStr;
},
},

How to change label color for line charts.js?

I try to chanage a color of line lables:
exmaple of label pic
The line has settings:
const linedataset = {
type: 'line',
label: 'label',
data: xavarage,
order: 1,
borderColor: 'rgb(225, 54, 54)',
backgroundColor: lineBackground,
};
And common settings are:
const chartoptions = {
hoverBackgroundColor,
backgroundColor,
responsive: true,
scales: {
x: {},
y: {
min: 0,
},
},
plugins: {
title: {
display: true,
text: this.selectedCategory?.full,
font: {
size: 20,
},
},
datalabels: {
anchor: 'end',
align: 'end',
},
},
};
I have tried to usse the following code:
options: {
legend: {
color: "#ccc"
}
}
But it does not work too. How to set color of label text (line graphic)?
Your chart uses chartjs-plugin-datalabels. Therefore, you need to define color inside datalabels as follows:
datalabels: {
color: '#ccc',
anchor: 'end',
align: 'end'
},

How to use gradient and single color at the same time in Apex Chart?

How to add gradient (mixed with two colors) for one bar chart column and on top of that stack another column with (single color)?
Currently, I am trying to figure it out how to implement gradient and single color pattern in ApexChart.js. As for now, I can only use one at the same time...
JavaScript:
var colors = ["#A865AA", "#222130",];
var dataColors = $("#monthlycost-ApexChart").data('colors');
if (dataColors) {
colors = dataColors.split(",");
}
var options = {
chart: {
height: 260,
type: 'bar',
stacked: true,
stackType: '10%',
toolbar: {
show: false
},
},
stroke: {
curve: 'smooth',
width: 1
},
grid: {
column: {
colors: ['transparent', '#e5e5e5'],
},
},
plotOptions: {
bar: {
columnWidth: '20%',
endingShape: 'rounded',
}
},
dataLabels: {
enabled: false
},
series: [{
name: 'Cost',
data: [5.7, 5.7, 5.4, 5.4, 5.2, 7.8, 5.6, 5.4, 5.7, 0, 0, 0]
}, {
data: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12]
}],
xaxis: {
labels: {
show: true,
style: {
fontSize: '10px'
},
padding: {
top: 0,
bottom: 20
},
},
offsetY: -10,
position: 'bottom',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
lines: {
show: false
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
padding: {
top: -5,
bottom: 0
},
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
lines: {
show: false
},
title: {
text: '£0,000',
style: {
fontWeight: 400,
fontSize: '9px',
}
},
tickAmount: 5,
forceNiceScale: false,
decimalsInFloat: 0,
max: 10,
},
fill: {
type: "gradient",
/* gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
type: 'vertical',
opacityTo: 0.9,
colorStops: [
{
offset: 40,
color: "#EF9432",
opacity: 1
},
{
offset: 100,
color: "#A865AA",
opacity: 1
}
]
}*/
},
legend: {
show: false,
},
colors: colors,
grid: {
row: {
show: false,
},
borderColor: '',
padding: {
bottom: 5,
top: 1
}
}
}
Need to get this
Currently have
You should use distributed property
plotOptions: {
bar: {
distributed: true
}
}

Highcharts areaspline, charts crosshair

Hi all i have this chart
http://i.prntscr.com/U1ho1cqRTVq-ifoMquWKAw.png
and i need to get in result
http://i.prntscr.com/Lj_PqmNWSxiIBJmK3tS44Q.png
I think solution of this task in crosshair< but i start use highcharts one week ago. Can u help me or give some links that help solve problem.
Because i refactored a lots of code all day and had not find solution of task.
My settings
chart: {
type: 'areaspline',
backgroundColor: 'transparent',
height: '500px',
spacingRight: -1,
spacingLeft: -1
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
x: {
min: 0,
max: 0
},
allowDecimalse: false,
gridLineWidth: 1,
gridLineColor: '#393546',
labels: {
y: -20,
},
tickWidth: 0,
lineColor: "#fff",
zIndex: 0,
**crosshair:** {
color: 'rgba(73,168,222,0.5)',
zIndex: 0
}
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
visible: false,
title: {
text: ''
},
labels: {
enabled: false
}
},
plotOptions: {
areaspline: {
marker: {
enabled: false,
states: {
hover: {
symbol: 'circle',
fillColor: '#fff',
lineColor: '#2196f3',
lineWidth: 2,
radius: 7,
enabled: true,
}
},
},
}
},
series: [
{
data: [
],
name: 'V/IRTUS',
showInLegend: false,
color: '#2196f3',
}
],
credits: {
enabled: false
}
};
data [] i get from api and categories too and min max option

How to display Tips in Group Line Chart in Extjs 4?

I am using EXTJS 4.0 and I want to display tips when user move to on my line Charts i already created Group Line Chart and as well as create Rich Tips also but now my problem is when I create tips for every series and run in browser I got blank tips for three line Chart out of four but fourth line chart display the correct Rich tips. My sample code is:
Code For Panel and Line charts:
var ChequesDetailsChartsMonthWiseWin = Ext.create('Ext.panel.Panel', {
width: 800,
height: 600,
hidden: false,
id:'ChequesDetailsChartsMonthWiseWinId',
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: ChequesDetailsLineChartsMonthwiseStore,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Honorarium','Program Expenses','Assets Amount','Human Resource'],
title: 'Amounts (In Rs)',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['month'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Honorarium',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Honorarium');
this.setTitle("Information for " + 'Honorarium - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Program Expenses',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Program Expenses');
this.setTitle("Information for " + 'Program Expenses - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Assets Amount',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Assets Amount');
this.setTitle("Information for " + 'Assets Amount - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Human Resource',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Human Resource');
this.setTitle("Information for " + 'Human Resource - Month :' +storeItem.get('month') );
}
} // tips ends here
}]
}
});
And Sample Preview is :
Line Chart :
Line Chart :
Please provide me solution of how to display tips in all charts or where I am doing wrong.