how we can put text inside circle in highchart networkgraph? - javascript

Folks, I am using highcahrt api in react js. I want the inside text should horizontally and vertically align with the circle. I Tried This Code But nothing happen.. heightchart show the circles as a svg.. is it possible its become div? then i can arrange the text..
text look very bad now see the result
dataLabels: {
enabled: true,
inside: true,
// format: '{point.name}',
useHTML: true, // false,
align: 'center',
textAlign: "center",
// verticalAlign: 'center',
formatter: (item) => {
const name = title.replaceAll("/","/<br />");
return name;
},
filter: {
property: 'radius',
operator: '>',
value: 35, // 25,// 35
},
style: {
color: 'white',
align: 'center',
textOutline: 'none',
fontWeight: 'bold',
fontSize: '10px', // '10px',
whiteSpace: 'wrap',
width: "50px",
height: "100px",
padding: "2px",
textAlign: "center",
wordBreak: "break-word",
},
y: 20
},

Related

pdfmake content overflow bug

As seen in the image on the pdf, when the content does not fit, it moves to the next page, how can we prevent this?
When the values ​​in the 232nd record are moved, an empty space is created on the next page, I want to prevent this.
{
pageBreak: 'before',
text: 'Park Bilgileri',
fontSize: 15,
bold: true,
margin: [0, 0, 0, 0],
},
{
table: {
headerRows: 1,
widths: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
body: [
[
{
text: 'Park No',
style: 'tableHeader',
alignment: 'center',
bold: true,
fontSize: 11,
},
{
text: 'Plaka',
style: 'tableHeader',
bold: true,
alignment: 'center',
fontSize: 11,
},
{
text: 'Giriş Tarih & Saat',
style: 'tableHeader',
alignment: 'center',
bold: true,
fontSize: 11,
},
{
text: 'Çıkış Tarih & Saat',
style: 'tableHeader',
alignment: 'center',
bold: true,
fontSize: 11,
},
{
text: 'İçeride Geçirdiği Süre(Saat:Dakika:Saniye)',
style: 'tableHeader',
alignment: 'center',
bold: true,
fontSize: 11,
},
{
text: 'Ücret',
style: 'tableHeader',
bold: true,
alignment: 'center',
fontSize: 11,
},
{
text: 'Durum',
style: 'tableHeader',
bold: true,
alignment: 'center',
fontSize: 11,
},
{
text: 'Kullanıcı',
style: 'tableHeader',
bold: true,
alignment: 'center',
fontSize: 11,
},
{
text: 'Ödenme Tarihi',
style: 'tableHeader',
bold: true,
alignment: 'center',
fontSize: 11,
},
],
...parkingData,
],
},
},
const parkingData = resultData.returnedObj.parkings.map((p) => {
return [
{
text: (pid += 1),
},
{
text: p.plate_no,
},
{
text: dateNow(p.starts_at),
},
{
text: dateNow(p.ends_at),
},
{
text: diffTimeConvert(p.ends_at - p.starts_at),
},
{
text: p.price,
},
{
text: p.info,
},
{
text: p.exit_from_id ? p.exit_from_id.toString().slice(-5) : 'Otomatik',
},
{
text: p.isDebtPay && p.debtPayTime ? dateNow(p.debtPayTime) : '',
},
];
});
This is the code I wrote, how can I solve this problem? I think it might be a solution to transfer the whole line that doesn't fit on the page to the next page, but I don't know how to implement it.

React Data Table Component - Header row not showing full text

so I am using an npm package called react-data-table-component. A problem that I am having with this is that I can't adjust the width enough to display the full header text, as you can see here:
Here is the custom styling that I am using with this data table:
const CustomStyle = {
noData: {
style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
},
},
rows: {
style: {
zIndex: 2,
minHeight: '30px !important', // override the row height
fontSize: '14px',
whiteSpace: 'pre',
},
},
table: {
style: {
zIndex: 1,
},
},
headRow: {
style: {
minHeight: '40px',
borderTopWidth: '1px',
borderTopStyle: 'solid',
borderBottomWidth: '2px',
},
},
headCells: {
style: {
fontSize: '16px',
justifyContent: 'left',
wordWrap: 'breakWord',
},
},
subHeader: {
style: {
minHeight: '40px',
},
},
pagination: {
style: {
minHeight: '40px',
},
pageButtonsStyle: {
borderRadius: '50%',
height: '40px',
width: '40px',
padding: '8px',
margin: 'px',
cursor: 'pointer',
},
},
};
Here is the width setting that I am using for each column:
const columns = [
{
name: 'Action',
selector: row => row['CASE_ID'],
width: '6%',
maxWidth: 'auto',
cell: row => {
return (
<div>
<Row>
<Col className="ml-3">
<Link to={{ pathname: "/wlmonitoring/user-case-wl", caseID: row.CASE_ID, cifID: row.NO_CIF }}>
<img alt="" src={editIcon} className="edit-icon" />
</Link>
</Col>
</Row>
</div>
);
},
},
{
name: 'Case ID',
selector: row => row['CASE_ID'],
width: '7%',
maxWidth: 'auto',
cell: row => {
return (
"WMC" + row.CASE_ID
)
}
},
{
name: 'Created Date',
selector: row => row['AUDIT_DATE_CREATED'],
width: '10%',
maxWidth: 'auto',
sortable: true,
cell: row => {
return (
moment(row.AUDIT_DATE_CREATED).format(dateFormat)
)
}
},
Currently I am using percentage to define the width, but I tried setting the exact width in pixel, but that would cause the last header to protrude out of the table like so:
If anyone can help me figure out what the exact issue is I would really appreciate it.
The accepted answer didn't work for me. What did was placing the title inside a div, that way the component will not try to shorten in.
Eg from:
{
name: 'Case ID',
...
}
To:
{
name: <div>Case ID</div>,
...
}
Just add this style to your App.css or App.scss and do hard refresh ctrl+shift+R
.lnndaO {
white-space: pre-line !important;
}

How to take element out of Donut Chart when clicked?

I want to remove an element out of a Donout Chart from ApexCharts JavaScript version. What I have is a Chart with multiple elements and when I click a "slice" of the Donout that "slice" expands. I want to change this so when I click that element the chart removes that elements and changes the proportion. My chart looks like this:
var options = {
chart: {
type: 'donut',
width: '100%',
height: 400,
events: {
dataPointSelection: function(event, chartContext, config) {
console.log(event);
console.log(chartContext);
console.log(config);
}
}
},
title: {
text: 'Distribution of people',
align: 'center',
style: {
fontSize: '20px',
}
},
series: data['people'],
labels: datos['name_people'],
dataLabels: {
enabled: true,
enabledOnSeries: undefined,
textAnchor: 'middle',
distributed: false,
offsetX: 0,
offsetY: 0,
style: {
fontSize: '20px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 'bold',
colors: undefined
},
background: {
enabled: true,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.9,
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.45
}
},
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.45
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I usually use Array.prototype.splice to remove a data point and label.
Than I call .updateOptions to update the chart
chart: {
type: 'donut',
events: {
dataPointSelection: function(event, chartContext, config) {
// remove the data point
data.splice(config.dataPointIndex,1);
// remove the label
labels.splice(config.dataPointIndex,1);
// we can't use .updateSeries because labels are seperated in piecharts
chartContext.updateOptions({
series: data,
labels: labels
}, true)
}
},
Here's a Codepen that demonstrates this

some of dataLabels not showing in stacked column Highchart

I built a stacked column chart using Highcharts, but there is a problem with dataLabels. Some of the data labels cannot be displayed.
I have created a JSFiddle: http://jsfiddle.net/samsularifin/7gf787vL/1/
This my Javascript code:
$(function () {
$('#ctrend').highcharts({
chart: {
type:'column',
margin: 75,
options3d: {
enabled: false,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: 'Month to Month Rev',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
subtitle: {
text: 'LEVEL',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
plotOptions: {
column: {
depth: 25
}
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb','Mar', 'Apr','May','Jun','Jul']
},
yAxis: {
title: {
text: '(In Bio)'
},
stackLabels: {
useHTML: true,
x: 0,
y:-28,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif',
color:'#722c84',
//textShadow: "1px 1px #000"
},
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.total, 0);
},
}
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0.1,
dataLabels: {
enabled: true,
//crop: false,
//overflow: 'none',
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
}
},
series: {
dataLabels: {
crop: false
}
}
},
tooltip: {
formatter: function() {
return 'The value for <b>' + this.x + '</b> is <b>' + Highcharts.numberFormat(this.y,2) + '</b>, in '+ this.series.name;
}
},
series: [{
name: 'Voice',
data: [4.77,4.08,4.76,4.66,4.78,4.93,5.07],
index:3,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
},
{
name: 'SMS',
data: [4.07,3.45,4.20,4.28,4.41,4.68,5.23],
index:2,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Other',
data: [0.52,0.49,0.61,0.62,0.62,0.64,0.70],
index:0,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Data',
data:[1.55,1.39,1.72,1.68,1.86,2.15,2.27],
index:1,
shadow : true,
dataLabels: {
enabled: true,
crop: false,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
Need help!
Highcharts thinks that these data labels are too close to show them all.
You can remedy this by allowing overlap, using this code (JSFiddle):
plotOptions: {
series: {
dataLabels: {
allowOverlap: true
// ...
}
}
}
Or making it less likely to occur by reducing the padding (JSFiddle):
plotOptions: {
series: {
dataLabels: {
padding: 0
// ...
}
}
}

highcharts- php/mysql data fetch

i have echoed the data from database in another file.. now i am fetching data . I am new to jquery and highchart.. plz help
my data format passed is :
[
{"name":"a","data":0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]},
{"name":"b","data":[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]}
]
my code for highchart is :
var chartOptions = {
chart: {
renderTo: 'container',
zoomType: 'x',
defaultSeriesType: 'line',
backgroundColor: null,
plotBackgroundColor: null,
borderRadius:20,
plotShadow: false,
events: {
load: function() {
// event.exporting.buttons.infoButton.symbolX=5;
// event.exporting.buttons.infoButton.symbolY=2;
// info_img=0;
// this.renderer.rect(5, 5, 60, 25, 15).attr({ fill: issue_col[1], zIndex: 0 }).add();
}
},
style: {
zIndex: 1
},
marginRight:30
},
title: {
text: 'hello',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none'
}
},
xAxis: {
type:'datetime',
title: {
text: null
}
},
yAxis: {
title: {
text: 'nothing is coming',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none'
}
},
min: 0.0,
},
credits: {
enabled: true,
position: {
align: 'center',
x: 10,
verticalAlign: 'bottom',
y: -3
},
href: "http://www.interscapetech.com",
style: {
cursor: 'pointer',
color: '#909090',
fontSize: '9px'
},
text: "(c)1997- Interscape Technologies Inc. All rights reserved."
},
/*labels:{
items: [{
html: "TM",
style: {
fontSize:'8px',
left: '330px',
top: '140px'
}
}],
style: {
color: 'grey'
}
},*/
lang:{
downloadButtonTitle:'Download Chart',
printButtonTitle :'Print Chart',
infoButtonTitle:'Chart Information',
switchButtonTitle:'Click to Enlarge'
// switchButtonTitle:'Switch to Bar Chart'
},
navigation:{
buttonOptions:{
align:'right',
verticalAlign:'middle',
height:15,
symbolFill: '#4572A7',
hoverSymbolFill: '#768F3E',
hoverBorderColor:'#92A8CD',
borderColor:'#3D96AE',
backgroundColor:'white',
borderRadius:5,
borderWidth:2,
width:20,
symbolX:10,
symbolY:8,
symbolSize:10
}
},
subtitle: {
text: '',
align:'left',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none',
color: 'white'
},
x:3, //-165 if center
y:12
},
plotOptions: {
line: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
zindex:1
},
series:[{
zindex:1
}]
}
,
tooltip: {
formatter: function() {
var ctime= Highcharts.dateFormat('%m/%d/%Y %H:%M:%S',this.x);
var s = '<b>'+ ctime +'</b>';
$.each(this.points, function(i, point) {
var result=Math.round(point.y*10)/10;
s += '<br/>'+ point.series.name +': '+result;
});
return s;
},
shared: true,
backgroundColor: '#FCFFC5'
},
legend: {
itemStyle: {
fontFamily: 'Arial',
fontSize: '12px',
textShadow: 'none'
},
enabled: true
// symbolPadding: 10
},
series: []
};
$(document).ready(function()
{
var url='highchars_test2.php';
alert('helo');
$.getJSON(url, function(seriesData){
$(seriesData).each(function(i, pdata){
console.log();
if(i==(seriesData.length-1) || i==(seriesData.length-2))
{}
else
{
alert(pdata['data']);
chartOptions.series.push(pdata);
}
});
chart = new Highcharts.Chart(chartOptions);
});
});
cannot create the chart.. plz help..
in series a data is not formatted properly ( opening bracket missing)
I added that and its working
check this out http://jsfiddle.net/q6LVV/
Seems like in series a, the opening square bracket is missing before the data array.

Categories