I'm making a chart with chart.js and I'm trying to figure out how I can change the label/legend styling.
I want to remove the rectangle part and instead use a circle. I've read that you can make your custom legend (using legendCallback), but for the life of me I cannot figure out how to do it. This is how my chart looks now - image.
This is my HTML:
<div class="container">
<canvas id="myChart"></canvas>
</div>
And this is my JS:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Link One',
data: [1, 2, 3, 2, 1, 1.5, 1],
backgroundColor: [
'#D3E4F3'
],
borderColor: [
'#D3E4F3',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#333',
}
}
}
});
I'm new to JS in general, so please be as specific as possible with your answers. Thank you so much!
No need to use legendCallback function. You can set usePointStyle = true to turn that rectangle into a circle.
Chart.defaults.global.legend.labels.usePointStyle = true;
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Link One',
data: [1, 2, 3, 2, 1, 1.5, 1],
backgroundColor: [
'#D3E4F3'
],
borderColor: [
'#D3E4F3',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#333'
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="container">
<canvas id="myChart"></canvas>
</div>
for angular4-chart.js you could use the options attribute like so:
options = {
legend:{
display: true,
labels: {
usePointStyle: true,
}
}
}
Step 1:
Change options to this:
options: {
legend: {
display: false,
}
}
Step 2:
Append to your canvas this code (just after canvas):
<div id='chartjsLegend' class='chartjsLegend'></div> //Or prepend to show the legend at top, if you append then it will show to bottom.
Step 3:
Generate this legend instead of default with this (just after mychart):
document.getElementById('chartjsLegend').innerHTML = myChart.generateLegend();
Step 4:
Make css so it generates as circle:
.chartjsLegend li span {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
border-radius: 25px;
}
Step 5:
Change css with what ever you feel like should be better.
Time for some chimichangas now.
Use usePointStyle:true
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Link One',
data: [1, 2, 3, 2, 1, 1.5, 1],
backgroundColor: [
'#D3E4F3'
],
borderColor: [
'#D3E4F3',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#333',
usePointStyle:true
}
}
}
});
Additional information on #GRUNT 's answer
I assign usePointStyle inside legend.labels not what #GRUNT did Chart.defaults.global.legend.labels.usePointStyle = true;
This is useful when you are using react
legend: {
labels: {
usePointStyle: true,
},
}
more info here
Display point style on legend in chart.js
add this in your options
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 9,
fontColor: '#474747',
fontFamily: '6px Montserrat',
},
},
for example :
this.testChart = new Chart('testPie', {
type: 'doughnut',
data: {
labels: [ 'Success','Failure','Aborted'],
datasets: [
{
data: [],
backgroundColor: [ '#45D78F', '#F58220','#FFD403'],
},
],
},
options: {
maintainAspectRatio: false,
cutoutPercentage: 50, // for thikness of doughnut
title: {
display: false,
text: 'Runs',
fontSize: 14,
fontFamily: 'Roboto',
fontColor: '#474747',
},
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 9,
fontColor: '#474747',
fontFamily: '6px Montserrat',
},
},
},
});
Related
I cannot figure out how to change the text color to white. I would like to change it for the x,y axis and the label at the top of the chart. I have looked at other posts on stack overflow and I feel like those posts are outdated and are for older versions of chart.js.
ChartJS Version: 3.3.2
CODE:
<canvas id="myChart" width="1000px" height="1000px"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
<?php
echo "labels: [";
for ($i = 1; $i < $monthdays; $i++) {
echo "'" . $i . "'" . ",";
}
echo "],";
?>
//labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
color: 'rgb(255,255,255)',
label: 'net volume of sales',
data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 5, 5, 5, 5, 5],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
/*backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],*/
borderWidth: 1
}]
},
options: {
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
},
beginAtZero: true
}
}
}
});
</script>
This is in 3.3.2. Answer based on one provided by Juergen Fink in this thread stackoverflow.com/questions/37292423/chart-js-label-color
new Chart(document.getElementById("myChart"), {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
plugins: {
legend: {
labels: {
color: "white",
font: {
size: 18
}
}
}
},
title: {
display: true,
text: 'Predicted world population (millions) in 2050',
},
scales: {
y: {
ticks: {
color: "white",
font: {
size: 15,
},
stepSize: 1,
beginAtZero: true
}
},
x: {
ticks: {
color: "white",
font: {
size: 14
},
stepSize: 1,
beginAtZero: true
}
}
}
}
});
canvas {
background: grey;
}
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.3.2/dist/chart.min.js"></script>
I was using a different chart on my site which was causing some issues so we migrated to chartjs. Everything works fine but I have one requirement which I cannot find in chartjs.
In the site I am working on, the user gives an assessment and it shows the graph based on the assessment results.
So in the assessment, there is a question "Are you feeling exacerbation?" If the user selects yes then in the graph it shows an image above that bar like below image.
In the picture you can see "E" above the two bars.
I want to achieve the same in chartjs. Is it possible? If not then can you guys suggest a way to notify the user that they have selected "exacerbation".
Thank you
You can place images on top of individual bars using chartjs-plugin-labels.
Please have a look at the following runnable code snippet:
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'My Dataset',
data: [25, 59, 80, 76],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
borderWidth: 1
}]
},
options: {
plugins: {
labels: {
render: 'image',
textMargin: 10,
images: [
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null
]
}
},
layout: {
padding: {
top: 30
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="6"></canvas>
I have a chart.js chart in my app. This is how it looks without negative values:
With negative values:
As you can see I have dual axisY. They work as needed if there are no negative values. But if there are some, right AxisY starts in the incorrect position.
How to make it starts in the same place as left AxisY?
Here is my code:
private buildOptions(): any {
return {
responsive: true,
title: {
display: false,
text: ''
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
position: "left",
id: "y-axis-0",
fontColor: '#fff'
}, {
position: "right",
id: "y-axis-1",
fontColor: '#fff'
}]
},
legend: {
display: true,
labels: {
fontColor: '#fff'
}
}
};
}
Thank you.
Have you tried setting the same min value for both axes?
You can use ticks for specifying it:
ticks: {
min: -5
}
Here's an example snippet I made for you:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, -5, 3, 5, 2, -3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
position: "left",
id: "y-axis-0",
fontColor: '#fff',
ticks: {
min: -5
}
}, {
position: "right",
id: "y-axis-1",
fontColor: '#fff',
ticks: {
min: -5
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:50%;">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
I'm implementing Chart.js into my AngularJS app, and I'm loading the chart data from server API into $scope.chartData that is an array of numbers.
I need to access this variable from Chart.js, and using the script example on their website, I'm not sure how to access the variable. Trying something like:
home.html:
<!-- A bunch of HTML, then -->
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Balance',
data: {{chartData}}, //this is where I need to access the variable
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
What would be the best way (not a work around) to accomplish loading this data into the chart script?
You should use the library angular-chart.js inorder to use with angularjs.
You can assign the data part to the options config.
DEMO
angular.module("app", ["chart.js"])
.controller("ChartCtrl", function($scope) {
$scope.labelsPercent = ['Equipment 1', 'Equipment 2', 'Equipment 3', 'Equipment 4'];
$scope.chartOptionsPercent = {
title: {
display: true,
text: "Downtime Percentage of Equipment",
fontSize: 20
},
legend: {
text: "Hello"
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
position: 'left',
ticks: {
min: 0,
max: 100
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Name of Equipment'
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Percentage of Downtime (%)'
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
$scope.dataPercent = [5, 6, 7, 12];
});
<!DOCTYPE html>
<html>
<head>
<title>radar Chart</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ChartCtrl" style="width:360px">
<canvas class="chart chart-bar" chart-click="onClick" chart-data="dataPercent" chart-labels="labelsPercent" chart-options="chartOptionsPercent" ></canvas>
</div>
</body>
</html>
I tried every possible way, every form-answer but anything works inmy code. I want yAxes begin at zero and max value is 100 but all my chart begin with other values (see pic). What can I do?
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
key is to pass options in the Chart constructor instead of part of data
new Chart(ctx, {
type: 'bar',
data: {{ chart_data|safe }},
options: {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
above works for me!
#Nikolas,
Here is the fiddle where the parameters you set works well.
https://jsfiddle.net/shemdani/zkb215up/2/
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [32, 59, 36, 25, 68, 71],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
var ctx = document.getElementById("myChart");
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options:options
});
Please check and see what you are doing wrong. I used the basic data from charjs documentation.
Working for version 3.2.0:
var options = {
// plugins, responsive etc...
scales: {
y: {
min: 0
}
},
//tooltips specifications...
}
The y-axis will start at 0:
I tried different solutions and adding barThickness: 25 in options worked for me.