Hi!. How could I do as in example image which i pinned? I want to make donut in center and two legends column under the chart.
Here is my code which i write - but it make very ugly legends by default. I want save this legend style but move them to bottom.
I watched many youtube video how to do it but i dont understand how.
var token_allocations_ctx = d("token_allocations_canvas");
var token_allocations_chart = new Chart(token_allocations_ctx, {
type: 'doughnut',
data: {
labels: token_allocations_labels,
datasets: [{
label: 'Allocations',
data: token_allocations_data,
backgroundColor: [
'#8b03f7'
],
borderWidth: 0,
hoverBorderWidth: 0,
borderAlign: 'center',
hoverOffset: 15,
}]
},
options: {
animation: {
animateScale: false
},
cutout: "80%",
borderRadius: 30,
responsive: true,
radius: 100,
layout: {
padding: 18
},
plugins: {
legend: {
position: "right",
align: "right",
labels: {
usePointStyle: true,
boxWidth: 100
}
},
tooltip: {
// displayColors: false,
usePointStyle: true,
boxWidth: 10,
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
console.log(context)
label += token_allocations_labels_procent[context.dataIndex]
}
return label;
},
title: function(context) {
return context.label;
},
}
},
},
}
});
With help of my previous question, I'm able to set equal heights for all the sections to the funnel. How can I add some extra texts to the edges(right) of every section. I did not find any documentation for this. My expected funnel chart as follows:
Highcharts.chart('container', {
chart: {
type: 'funnel'
},
title: {
text: 'Sales funnel'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
softConnector: true,
inside: true,
},
neckHeight: "0%",
neckWidth: "80%",
width: '15%',
reversed: true,
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', 846]
]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
plotOptions: {
series: {
dataLabels: {
inside: true
},
center: ['50%', '50%'],
width: '100%'
}
}
}
}]
}
});
jsfiddle Example: https://jsfiddle.net/kiranuk/xhfbyj64/
Thanks for the help.
For adding extra text on the chart use Highcharts. SVGRenderer
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Sample code:
chart: {
type: 'funnel',
events: {
render: function() {
let chart = this,
point1 = chart.series[0].points[4],
x = point1.dlBox.x + point1.dlBox.bottomWidth + chart.plotLeft + 1,
y = point1.dlBox.y + chart.plotTop - point1.dlBox.height;
if (!chart.myCustomText) {
chart.myCustomText = chart.renderer
.text('1% <br> Did')
.css({
fontSize: '10px',
zIndex: '3px'
})
.add();
}
//pdate text coordinates
chart.myCustomText.attr({
x: x,
y: y
})
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/kLyt6ngs/
I created the same apexchart with 2 different datasets. Chart 1 looks great with horizontal lines. But chart 2 has just 1 horizontal line.
The only difference between chart 1 and chart 2 is the dataset. How can I always display 5 horizontal lines across the chart?
Chart 1: https://codepen.io/dedefeefdef/pen/GRrzoNj
Dataset 1:
[[1619173193036,49407.535435718644],[1619176091510,49549.26563563993],[1619179037350,50138.28330288627],[1619182201670,49797.38039516057],[1619185113178,49034.01097606104],[1619188127394,49524.184512772634],[1619191189295,49576.50939492852],[1619194162163,50205.73169158809],[1619197144978,50073.48029019594],[1619200103693,50115.77589945983],[1619203154512,50596.642200351744],[1619206164399,50777.75836621535],[1619209161605,51428.66818308527],[1619212172077,50846.83181180289],[1619215102695,50443.96733946523],[1619218180736,50740.97575842062],[1619221165616,50847.88134692881],[1619224199653,50448.69953560474],[1619227160254,49943.27825537499],[1619230041721,49712.238215643156],[1619233139782,50144.43808207704],[1619236181862,50468.26366127149],[1619239136429,50360.42255156926],[1619242087409,50377.45754274844],[1619245135556,50531.35036881819],[1619248237594,50062.40313986315],[1619251214964,49907.96886371824],[1619254186363,50141.20384968558],[1619259102000,49412.67996377031]]
Chart 2 : https://codepen.io/dedefeefdef/pen/VwPgeKL
Dataset 2:
[[1619173150399,1.0940878381417847],[1619176129124,1.1070033240375783],[1619179360960,1.1335610023715914],[1619182375797,1.0987262566796245],[1619185499396,1.0694830118537217],[1619188437886,1.1112241146594293],[1619191471163,1.0877301924115799],[1619194426800,1.1078699893603736],[1619197429216,1.1017656067359929],[1619200387208,1.0989519988768361],[1619203420737,1.1129932263760143],[1619206362548,1.11105234071539],[1619209395648,1.1440514951415397],[1619212482497,1.1314118311313806],[1619215435039,1.1124574692062728],[1619218357604,1.1229133868529708],[1619221458977,1.1517979836016765],[1619224442891,1.1252054746610685],[1619227453005,1.1180402148239843],[1619230457650,1.1053157940491964],[1619233312657,1.1298614827999067],[1619236396985,1.1397639443740273],[1619239424178,1.1359274669865476],[1619242469061,1.140215819313516],[1619245387650,1.144685119290531],[1619248338390,1.1276405657214676],[1619251357302,1.1279390040404729],[1619254396800,1.1362663708234912],[1619259112000,1.1049392779824312]]
It is showing on both charts, only that on the second it is only showing one. This is because the tick amount of the y-axis is calculated automatically depending on the data, but you can set it using tickAmount:
yaxis: {
tickAmount: 5
}
let InfoinfoDisplay_color = "rgba(1, 100, 148, 0.95)";
let InfoHovercolor = "rgba(1, 100, 148, 0.95)";
var chartData = [
[1619172418188, 1.0476013869111795],
[1619175587292, 1.1198232589571675],
[1619178853930, 1.157646111247407],
[1619181915314, 1.1093982047739799],
[1619184749901, 1.0798464813053623],
[1619187818296, 1.1086855020268924],
[1619190782881, 1.096000360488148],
[1619193860463, 1.10672232619161],
[1619196767038, 1.0988803848560535],
[1619199743916, 1.0981656379540496],
[1619202862866, 1.093804129207881],
[1619205891702, 1.1077756492342723],
[1619208843234, 1.1481203368627158],
[1619211742488, 1.1172375471919378],
[1619214829414, 1.110618846651946],
[1619217810168, 1.1233988199629148],
[1619220788002, 1.1413939139175715],
[1619223899525, 1.1399773736160672],
[1619226882428, 1.1191436618449704],
[1619229755380, 1.12186472542115],
[1619232856982, 1.128074522521124],
[1619235801347, 1.1467409723241526],
[1619238745617, 1.1333216765168754],
[1619241860850, 1.141486724409456],
[1619244733747, 1.1459909043812324],
[1619247714927, 1.1413474565269073],
[1619250869567, 1.127054245243459],
[1619253888057, 1.1406556175192146],
[1619258468000, 1.1208390731103737]
];
var chartDisplay = new ApexCharts(document.querySelector("#coinDetailChart"), {
chart: {
type: 'area',
stacked: false,
height: 350,
zoom: {
type: 'x',
enabled: true,
autoScaleYaxis: true
},
toolbar: {
autoSelected: 'zoom'
},
},
dataLabels: {
enabled: false
},
markers: {
size: 0,
},
title: {
text: '<%=data[0].name%> Price Movement',
align: 'left',
style: {
color: 'white'
},
},
series: [{
name: "$ ",
data: chartData
}],
colors: [InfoinfoDisplay_color],
opacity: 1,
type: 'solid',
fill: {
colors: [InfoinfoDisplay_color],
type: 'gradient',
gradient: {
type: "vertical",
opacityFrom: 1,
opacityTo: 1,
gradientToColors: [InfoHovercolor],
stops: [25, 100]
}
},
yaxis: {
labels: {
style: {
colors: 'white',
},
show: true,
offsetX: 0,
offsetY: 0,
rotate: 0,
formatter: function(val) {
return (val.toFixed(3));
},
},
tickAmount: 5
},
xaxis: {
type: 'datetime',
crosshairs: {
width: 1
},
labels: {
style: {
colors: 'white',
},
},
},
});
chartDisplay.render();
* {
background: black
}
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="coinDetailChart"></div>
</body>
I am having a problem with chart.js and a doughnut type chart. I want to apply some offset/margin or other solution for the margin between chart and labels. Please view the below image for the issue.
var chart1;
var config1 = {
type: 'doughnut',
data: {
labels: ["NPD Brief", "Gate 1", "Gate 2", "Gate 3"],
datasets: [{
data: [2, 3, 5, 4], // Specify the data values array
borderColor: ['#ffffff', '#ffffff', '#ffffff', '#ffffff'], // Add custom color border
backgroundColor: ['#2453ed', '#5b7ef2', '#91a9f6', '#c8d4fa'], // Add custom color background (Points and Fill)
borderWidth: 2 // Specify bar border width
}]
},
options: {
responsive: true,
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
legend: {
display: false,
position: 'left',
},
plugins: {
labels: [{
render: 'label',
position: 'outside',
//arc: true,
}, {
render: 'value',
fontColor: '#ffffff',
}]
},
title: {
display: true,
//text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};
I need to display the labels on X axis from the JSON data that I am pulling from my API.
but I think we can only give static labels for the axis ?
Can anyone please let me know how to give dymanic labels?
Here is my code:
var obj = data[$("#host").val()].iscsi_lif.result.sectoutput.sect;
var my_data_list = [];
var readsize = [];
for(var key in obj) {
var avg_latency = parseInt(obj[key].avg_latency);
var rsize = parseInt(obj['read_size_hist.<=128KB']);
my_data_list.push('Average Latency', parseInt(avg_latency));
readsize.push('Read Size',parseInt(rsize));
}
$('#graphcontainer2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Reads Sizing'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Read Size'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Read Size: <b>{point.y:.1f}%</b>'
},
series: [{
name: 'Read Size',
data: my_data_list,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
To use category xAxis type, point formats should include x-value as string, or name property. For example, expected input data format is:
series: [{
data: [ ['Me', 10], ['Myself', 20], ['I', 100] ]
}]
Will create three categories on xAxis: Me | Myself | I
So in your code should be something like this:
my_data_list.push([myLabel, parseInt(avg_latency)]);
Where myLabel is category string.
Instead type:category , use categories in xAxis (if you are not using highstock ,using highcharts)
chart.xAxis[0].setCategories(categories);
See working fiddle here