How can I show the values in the chart using chart.js?
UPDATE: I am using the options below but I couldn't find any answer.
options: {
scale: {
angleLines: {
lineWidth: 0.5,
color: 'rgba(128, 128, 128, 0.2)'
},
pointLabels: {
fontSize: 14,
fontStyle: '300',
fontColor: 'rgba(204, 204, 204, 1)',
fontFamily: "'Lato', sans-serif"
},
ticks: {
beginAtZero: true,
maxTicksLimit: 4,
min: 0,
max: 4,
display: false
}
}
}
Sample pen https://codepen.io/melvik/pen/ZEGaexy
expected result
Thanks in advance
chartjs-plugin-datalabels & chart.js radar.
datalabels Datalabels Formatter
https://chartjs-plugin-datalabels.netlify.com/guide/formatting.html#data-transformation
1/2. Basic example - return "hello world"
2/2. "practical example" - return value:
formatter: function(value, context) {
return context.chart.data.labels[context.value];
}
tooltip: false
Set tooltip to false (We use a visible value instead)
tooltips: false,
Basic snippet example:
// Change default options for ALL charts
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
opacity: 1,
textAlign: 'left',
color: 'white',
borderColor: '#11469e',
borderWidth: 2,
borderRadius: 100,
font: {
weight: 'bold',
size: 12,
lineHeight: 1 /* align v center */
},
padding: {
top: 5
},
/* hover styling */
backgroundColor: function(context) {
return context.hovered ? context.dataset.borderColor : 'white';
},
color: function(context) {
return context.hovered ? 'white' : context.dataset.borderColor;
},
listeners: {
enter: function(context) {
context.hovered = true;
return true;
},
leave: function(context) {
context.hovered = false;
return true;
}
}
});
var data = {
labels: ["Ball Skills", "Shooting", "Physical", "Defence", "Passing"],
datasets: [{
label: "De maria",
backgroundColor: "rgba(38,120,255,0.2)",
borderColor: "rgba(38,120,255, 1)",
data: [90, 86, 76, 65, 82]
}]
};
var options = {
responsive: true,
tooltips: false,
title: {
text: 'chartjs-plugin-datalabels - basic example',
display: true,
position: `bottom`,
},
plugins: {
/* ######### https://chartjs-plugin-datalabels.netlify.com/ #########*/
datalabels: {
/* formatter */
formatter: function(value, context) {
return context.chart.data.labels[context.value];
}
}
},
/* scale: https://www.chartjs.org/docs/latest/axes/radial/linear.html#axis-range-settings */
scale: {
angleLines: {
display: true
},
pointLabels:{
/* https://www.chartjs.org/docs/latest/axes/radial/linear.html#point-label-options */
fontSize: 15,
fontColor: 'black',
fontStyle: 'bold',
callback: function(value, index, values) {
return value;
}
},
ticks: {
/* https://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration */
/* suggestedMax and suggestedMin settings only change the data values that are used to scale the axis */
suggestedMin: 0,
suggestedMax: 100,
stepSize: 25, /* 25 - 50 - 75 - 100 */
maxTicksLimit: 11, /* Or use maximum number of ticks and gridlines to show */
display: false, // remove label text only,
}
},
legend: {
labels: {
padding: 10,
fontSize: 14,
lineHeight: 30,
},
},
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'radar',
data: data,
options: options
});
<canvas id="chart" width="500" height="350"></canvas>
<br>
<br>
chartjs-plugin-datalabels
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0/dist/chartjs-plugin-datalabels.min.js"></script>
codepen: https://codepen.io/ezra_siton/pen/bGdYaLd
Ok I found my answer after spending another +2 hours research by using this package
chartjs-plugin-datalabels
Related
Using apexchart
const data = [45, 52, 78, 45, 69, 23, 30, 45, 52, 88]
const dataXCategories = ["10.12", "11.12", "12.12", "13.12", "14.12", "15.12", "16.12", "17.12", "18.12", "19.12"]
new ApexCharts(chart, {
chart: {
height: 165,
type: "area",
toolbar: {
show: false
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: 2,
dashArray: 0,
},
colors: ["#00f"],
dataLabels: {
enabled: false
},
series: [{
name: "Series 1",
data: data
}],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: .7,
opacityTo: .9,
stops: [0, 90, 100]
}
},
xaxis: {
categories: dataXCategories,
labels: {
show: true,
format: 'dd/MM',
style: {
fontSize: "11px",
fontWeight: 400,
fontFamily: "Inter",
colors: ["#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999"],
}
},
crosshairs: {
show: true,
opacity: 1,
position: 'front',
stroke: {
color: '#4A3AFF',
width: 2,
dashArray: 0
}
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 4,
labels: {
show: true,
offsetX: -12,
style: {
fontSize: "11px",
fontWeight: 400,
fontFamily: "Inter",
colors: ["#999"],
},
formatter: function(value) {
return `${value}%`;
}
},
},
grid: {
show: true,
borderColor: '#EDEDED',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: .5
},
column: {
colors: undefined,
opacity: .5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
markers: {
colors: '#4A3AFF',
hover: {
size: undefined,
sizeOffset: 7
}
}
}).render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>
Now the blue line is equal to the height of the graph
Please tell me how to make the line start from the marker to the bottom line x
I will be glad for any help
I do not think you can do this with simple configuration. However, since ApexCharts is based on SVG, you can manipulate the DOM yourself quite easily.
As I said previously in other answers, because I have already used this technique several times, what I am going to show you is more experimental than official.
It works, though.
In your case, the idea is to put some code in the mouseMove event callback. The use of a MutationObserver is recommended to watch for changes in the DOM. When a marker (which is a circle) is hovered, its r, cx and cy attributes are updated. In particular, cy is the most interesting because it gives us the vertical position of the active marker. r is also useful to adjust the offset of crosshairs.
Here is the main part of the code:
chart: {
// ...
events: {
mouseMove: () => {
let crosshairs = document.querySelector('.apexcharts-xcrosshairs'),
marker = document.querySelector('.apexcharts-marker');
let settings = { attributes: true },
observer = new MutationObserver(() => {
crosshairs.setAttribute('y1', `${marker.cy.baseVal.value + marker.r.baseVal.value + 1}`);
});
observer.observe(marker, settings);
}
}
},
Here is the full code:
const data = [45, 52, 78, 45, 69, 23, 30, 45, 52, 88];
const dataXCategories = ["10.12", "11.12", "12.12", "13.12", "14.12", "15.12", "16.12", "17.12", "18.12", "19.12"];
new ApexCharts(chart, {
chart: {
height: 165,
type: 'area',
toolbar: {
show: false
},
events: {
mouseMove: () => {
let crosshairs = document.querySelector('.apexcharts-xcrosshairs'),
marker = document.querySelector('.apexcharts-marker');
let settings = { attributes: true },
observer = new MutationObserver(() => {
crosshairs.setAttribute('y1', `${marker.cy.baseVal.value + marker.r.baseVal.value + 1}`);
});
observer.observe(marker, settings);
}
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: 2,
dashArray: 0,
},
colors: ['#00f'],
dataLabels: {
enabled: false
},
series: [{
name: 'Series 1',
data: data
}],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: .7,
opacityTo: .9,
stops: [0, 90, 100]
}
},
xaxis: {
categories: dataXCategories,
labels: {
show: true,
format: 'dd/MM',
style: {
fontSize: '11px',
fontWeight: 400,
fontFamily: 'Inter',
colors: ['#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999']
}
},
crosshairs: {
show: true,
opacity: 1,
position: 'front',
stroke: {
color: '#4A3AFF',
width: 2,
dashArray: 0
}
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 4,
labels: {
show: true,
offsetX: -12,
style: {
fontSize: '11px',
fontWeight: 400,
fontFamily: 'Inter',
colors: ['#999']
},
formatter: value => `${value}%`
},
},
grid: {
show: true,
borderColor: '#EDEDED',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: .5
},
column: {
colors: undefined,
opacity: .5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
markers: {
colors: '#4A3AFF',
hover: {
size: undefined,
sizeOffset: 7
}
}
}).render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>
I would like to increase the size and change color of the font in a chart label, but it's not the legend label. It is the name in the side of each data of the radar chart.
I tried doing this:
options={{
legend: {
labels: {
fontColor: 'rgba(255,255,255,1)',
fontSize: 16,
fontStyle: "bold"
}
},
But it only changes the name of the 'Undefined' label.
Thank you for any help.
options: {
scale: {
pointLabels: {
fontSize: 16
}
}
}
To someone come from Chart.js v 3.7.1 or + the configuration is a bit changed the below code won't work anymore.
options: {
scale: {
pointLabels: {
fontSize: 16
}
}
}
Use this one
options: {
scales: {
r: {
pointLabels: {
font: {
size: 16
}
}
}
}
}
Here is a configured radar grid.
Label size is set via: options.scale.pointLabels.fontSize
Label color is set via: options.scale.pointLabels.fontColor
Legend font color is set via: options.legend.labels.fontColor
The docs are pretty good, you should check them out:
https://www.chartjs.org/docs/latest/charts/radar.html
https://www.chartjs.org/docs/latest/axes/styling.html
var skillCanvas = document.getElementById('skillChart');
var skillData = {
labels: ["Teamwork", "Organization", "Adaptability", "Curiousity", "Self-taught"],
datasets: [{
label: "Student A",
backgroundColor: 'rgba(17, 192, 145, 0.2)',
data: [90, 80, 92, 88, 75]
}]
};
var skillChart = new Chart(skillCanvas, {
type: 'radar',
data: skillData,
options: {
legend: {
labels: {
fontColor: '#11c091'
}
},
scale: {
gridLines: {
color: '#AAA'
},
ticks: {
beginAtZero: false,
max: 100,
min: 20,
stepSize: 10,
fontColor: '#fff',
backdropColor: '#444'
},
pointLabels: {
fontSize: 16,
fontColor: '#11c091'
}
}
}
});
body {
background: #444;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet" />
<canvas id="skillChart" width="400" height="200"></canvas>
My chart.js
var ctx_1 = document.getElementById('https_http').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
labels: ['HTTPS Pages','HTTP Pages'],
datasets: [{
data: [ {{ $array_https_http[0] }}, {{ $array_https_http[1] }}],
backgroundColor: [
'rgb(81, 170, 120)',
'rgb(198, 222, 208)'
]
}]
},
options: {
showAllTooltips: true,
tooltips: {
enabled: true,
displayColors: false,
yPadding: 20,
xPadding: 30,
caretSize: 10,
backgroundColor: 'rgba(240, 240, 240, 1)',
bodyFontSize: 16,
bodyFontColor: 'rgb(50, 50, 50)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
cornerRadius: 0,
yAlign: 'bottom',
xAlign: 'center',
position: 'custom',
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return tooltipItem.yLabel + " : " + tooltipItem.xLabel ;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
responsive: false,
legend: { display: false },
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
},
gridLines: {
display: false
},
}],
xAxes: [{
ticks: {
stepSize:100
}
}],
}
}
});
My tooltips code
Chart.Tooltip.positioners.custom = function(elements, position) {
if (!elements.length)
return false;
var em = elements[0]._model;
return {
x: em.x-((em.x-em.base)/2),
y: em.y+em.height/4
}
}
My output
My expected output
Is there anyone can help me how to put those value after the bar like the second picture. I just want to display the value to know even its zero. My custom tooltips was to show a different hover rather than default. All your help are appreciated and thank you in advance.
You can use the chartjs.datalabel plugin for achieving the need. I have created a fiddle for you -> http://jsfiddle.net/Labkrpf4/
Hope it helps!
var ctx_1 = document.getElementById('https_http').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
labels: ['HTTPS Pages', 'HTTP Pages'],
datasets: [{
data: [0, 430],
backgroundColor: [
'rgb(81, 170, 120)',
'rgb(198, 222, 208)'
]
}]
},
options: {
showAllTooltips: true,
tooltips: {
enabled: true,
displayColors: false,
yPadding: 20,
xPadding: 30,
caretSize: 10,
backgroundColor: 'rgba(240, 240, 240, 1)',
bodyFontSize: 16,
bodyFontColor: 'rgb(50, 50, 50)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
cornerRadius: 0,
yAlign: 'bottom',
xAlign: 'center',
position: 'custom',
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return tooltipItem.yLabel + " : " + tooltipItem.xLabel;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
responsive: false,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
gridLines: {
display: false
},
}],
xAxes: [{
ticks: {
stepSize: 100
}
}],
},
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: Math.round
}
}
}
});
I am unable to find answer on how to extend both grid lines and graph line to the edge of the canvas and make it fill with background color, while keeping the padding and value ratio (pictures better show what I mean)
Currently, I have canvas as seen here:
and I want to achieve result as sampled here:
My current code:
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["PON", "WT", "ŚR", "CZW", "PT", "SB"],
datasets: [{
data: [56, 35, 35, 60, 20, 50],
borderColor: [
'rgba(255,255,255)'
],
borderWidth: 2,
backgroundColor: 'rgba(0,0,0,0.1)',
pointRadius: 5,
pointBorderColor: 'rgb(255,255,255)',
pointBackgroundColor: 'rgba(112,185,200,1.00)'
}]
},
options: {
layout: {
padding: {
top: 15,
bottom: 35,
left: 155
}
},
elements: {
line: {
tension: 0
}
},
legend: {
display: false
},
tooltip: {
enabled: false
},
scales: {
color: 'rgb(255,255,255)',
yAxes: [{
position: 'right',
labelFontColor: "red",
ticks: {
beginAtZero: false,
fontColor: '#eee',
fontFamily: "Poppins",
padding: 20
},
gridLines: {
color: 'rgba(255,255,255,0.25)',
drawBorder: false,
}
}],
xAxes: [{
position: 'top',
color: 'rgb(255,255,255)',
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
fontColor: '#eee',
fontFamily: "Poppins",
padding: 20
}
}]
}
}
});
</script>
I am trying to create a chart that looks/functions like this with ZingChart.
I have tweaked a bar chart every way I can think of but I'm still not coming close.
Is this chart possible with ZingChart?
The following chart is mimicked from the cutout you have attached. If you have any questions about what I did, I can surely go into detail.
Note: For best viewing results look at the chart in the full page view.
var myConfig = {
type:'mixed',
title: {
text: 'Rank by MPH',
},
scaleX: {
offset: 0, // force line to start at scale
offsetEnd: 10, // force last bar away from end of the scale
maxItems: 2, // force display of first and last labels
tick: {
visible:false,
},
item: {
fontColor: '#000',
fontSize: 14,
rules: [ // adjust last label
{
rule: '%i == 16',
text: '129',
}
]
},
lineWidth:2,
lineColor: '#000',
},
scaleY: {
minValue: 0,
maxValue: 100,
step: 50,
format: '%v%',
markers: [
{ // diagonal line
type: 'line',
range: [0,100],
lineWidth: 3,
lineColor: '#000',
}
],
tick: {
visible:false,
},
item: {
fontColor: '#000',
fontSize: 14
},
guide: {
visible: false,
},
lineWidth:2,
lineColor: '#000',
},
labels: [
{ // hook label to line marker to display rank
hook: 'node:plot=1,index=1',
backgroundColor: '#000',
fontColor: '#fff',
text: 'Rank 11 / 16',
calloutWidth: 20,
callout: true,
calloutPosition: 'bottom',
padding: 15,
borderRadius: 10,
fontSize: 15,
offsetY: -50,
},
{ // hook label to scale to display mph
hook: 'scale:index=11',
text: '100 mph',
fontSize: 15,
offsetY: 15,
},
],
series: [
{
type: 'bar',
barWidth:20,
barSpacing:1,
borderRadius:'10 10 0 0',
backgroundColor: '#c0c0c0',
tooltip: {
backgroundColor: '#000',
text: 'Rank %i / 16',
calloutWidth: 20,
callout: true,
calloutPosition: 'bottom',
padding: 15,
borderRadius: 10,
fontSize: 15,
placement: 'node:top',
offsetY: -20,
},
rules: [
{ // make one bar purple
rule: '%i == 11',
backgroundColor: 'purple',
}
],
values: [null,5,9,12,19,25,30,34,39,45,49,54,58,65,69,74,79],
},
{
type: 'line',
lineColor: 'purple',
lineStyle: 'dotted',
valueBox: {
text: '%v%',
placement: 'left',
offsetX: -18,
fontSize: 12,
rules: [
{ // hide the valuebox at the node on the line
rule: '%i == 1',
visible: false,
}
],
},
marker: {
borderColor: 'purple',
borderWidth: 2,
backgroundColor: '#fff',
size: 9,
rules: [
{ // hide first marker of the line
rule: '%i == 0',
visible:false,
}
],
},
values: [[0,69], [11,69]], // array of arrays to better plot the line
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%',
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>