I'm trying to create a line chart with chart.js but when I try to style my chart.
Everything from options is ignored.
Here is my code:
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
let ChartOptions = {
responsive: true,
layout: { padding: { top: 12, left: 12, bottom: 12 } },
title: {
display: true,
text: 'Chart.js Line Chart - Cubic interpolation mode'
},
scales: {
xAxes: [{ gridLines: { color: '#22364e', borderDash: [9, 7] } }],
yAxes: [{ gridLines: { display: false } }]
},
plugins: { datalabels: { display: false } },
legend: { display: false },
elements: {
point: { radius: 5 },
line: { tension: 0.4, fill: false },
},
//tooltips: {},
hover: { mode: 'nearest', animationDuration: 400 },
};
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Fri", "Sun", "Wed", "Thu", "Fri"],
datasets: [
{
fill: false,
borderColor: '#6ebffe',
pointBackgroundColor: '#6ebffe',
pointBorderColor: '#8cff00',
data: [320, 325, 300, 350, 340],
}
],
options: ChartOptions
}
});
</script>
I tried to copy the code from https://www.chartjs.org/samples/latest/charts/line/interpolation-modes.html but it's the same. I can't add options to my chart.
Even the title is not showing. This is not a cache problem because I run it with chrome devtools open and tried with a different browser.
the options are in the wrong place,
they should be placed after the data object
data: {
},
options: ChartOptions
you had them as part of the data object...
data: {
options: ChartOptions
},
see following working snippet...
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
let ChartOptions = {
responsive: true,
layout: { padding: { top: 12, left: 12, bottom: 12 } },
title: {
display: true,
text: 'Chart.js Line Chart - Cubic interpolation mode'
},
scales: {
xAxes: [{ gridLines: { color: '#22364e', borderDash: [9, 7] } }],
yAxes: [{ gridLines: { display: false } }]
},
plugins: { datalabels: { display: false } },
legend: { display: false },
elements: {
point: { radius: 5 },
line: { tension: 0.4, fill: false },
},
//tooltips: {},
hover: { mode: 'nearest', animationDuration: 400 },
};
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Fri", "Sun", "Wed", "Thu", "Fri"],
datasets: [
{
fill: false,
borderColor: '#6ebffe',
pointBackgroundColor: '#6ebffe',
pointBorderColor: '#8cff00',
data: [320, 325, 300, 350, 340],
}
]
},
options: ChartOptions
});
</script>
Related
I have doughnut chart using chartsjs, and also I used multi layer with cutoutPercentage.
The First Layer (Black color) is the Total and the second layer (Red Color) complete is the running value.
type: 'doughnut',
data: {
datasets: [
{
data: Total,
fill: true,
backgroundColor:'rbg(242, 133, 0)',
borderWidth: 3,
weight:1,
},{
data: complete,
fill: true,
backgroundColor:'rgb(255,36,0)',
borderWidth: 3,
weight:1,
}
]
},
options: {
responsive: true,
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltip: {
enabled: false
},
cutoutPercentage: 70,
},
This is what I need,2nd layer is running until reach the total.
In case you need a generic solution, you can use the Plugin Core API and define a beforeInit hook that modifies the chart configuration to fit your needs.
Please take a look at below runnable code and see how it could be done.
new Chart('runningValue', {
type: 'doughnut',
plugins: [{
beforeInit: chart => {
chart.data.datasets = [{
data: [chart.data.total],
backgroundColor: chart.data.totalColor,
borderWidth: 3
},
{
data: [chart.data.complete, chart.data.total - chart.data.complete],
backgroundColor: [chart.data.completeColor, '#fff'],
borderWidth: 3
}
]
}
}],
data: {
total: 50,
complete: 35,
totalColor: 'rbg(242, 133, 0)',
completeColor: 'rgb(255,36,0)'
},
options: {
rotation: -90,
circumference: 180,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
cutout: '70%'
}
});
canvas {
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="runningValue"></canvas>
Simply define two values and two background colors on the second dataset as shown in the runnable code below.
const total = 50;
const complete = 35;
new Chart('runningValue', {
type: 'doughnut',
data: {
datasets: [{
data: [total],
backgroundColor: 'rbg(242, 133, 0)',
borderWidth: 3
},
{
data: [complete, total - complete],
backgroundColor: ['rgb(255,36,0)', '#fff'],
borderWidth: 3
}
]
},
options: {
rotation: -90,
circumference: 180,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
cutout: '70%'
}
});
canvas {
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="runningValue"></canvas>
I am testing out HighCharts and ChartJS to see which to use. For Highcharts, I was able to find a hack to create a bar chart that had double grouping on the x-axis.
This is what I want to look like:
I am new to both charting JS options and wonder if there is a way to do this in ChartJS.
I have the datasets something like this:
xAxis: {
categories: [{
name: "Total",
categories: ["2004", "2008", "2012"]
}, {
name: "Lower than 2.50",
categories: ["2004", "2008", "2012"]
}]
},
yAxis: {
min: 0,
title: {
text: 'Percent (%)'
}
},
series: [{
name: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4]
}, {
name: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6]
}]
Essentially I need a nest series on the x-axis and I am open to plugins or code from Github to do this.
You can make use of the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code, I use the afterDraw hook to draw the category labels and the delimiter lines.
new Chart('myChart', {
type: 'bar',
plugins: [{
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let xAxis = chart.scales['x-axis-0'];
let xCenter = (xAxis.left + xAxis.right) / 2;
let yBottom = chart.scales['y-axis-0'].bottom;
ctx.textAlign = 'center';
ctx.font = '12px Arial';
ctx.fillText(chart.data.categories[0], (xAxis.left + xCenter) / 2, yBottom + 40);
ctx.fillText(chart.data.categories[1], (xCenter + xAxis.right) / 2, yBottom + 40);
ctx.strokeStyle = 'lightgray';
[xAxis.left, xCenter, xAxis.right].forEach(x => {
ctx.beginPath();
ctx.moveTo(x, yBottom);
ctx.lineTo(x, yBottom + 40);
ctx.stroke();
});
ctx.restore();
}
}],
data: {
labels: ['2004', '2008', '2012', '2016', '2004', '2008', '2012', '2016'],
categories: ['Total', 'Lower than 2.50'],
datasets: [{
label: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4, 51.2, 51.8],
backgroundColor: 'rgba(124, 181, 236, 0.9)',
borderColor: 'rgb(124, 181, 236)',
borderWidth: 1
},
{
label: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6, 53.7, 54.6],
backgroundColor: 'rgba(67, 67, 72, 0.9)',
borderColor: 'rgb(67, 67, 72)',
borderWidth: 1
}
]
},
options: {
legend: {
position: 'bottom',
labels: {
padding: 30,
usePointStyle: true
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 80,
stepSize: 20
},
scaleLabel: {
display: true,
labelString: 'Percent (%)'
}
}],
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
You have to define a second x-axis and play around with the many ticks and gridLines options.
Please take a look at below runnable code and see how it could be done. This is obviously only a draft and needs to optimized and made more generic.
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['2004', '2008', '2012', '2004', '2008', '2012'],
datasets: [{
label: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4],
backgroundColor: 'rgba(124, 181, 236, 0.9)',
borderColor: 'rgb(124, 181, 236)',
borderWidth: 1
},
{
label: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6],
backgroundColor: 'rgba(67, 67, 72, 0.9)',
borderColor: 'rgb(67, 67, 72)',
borderWidth: 1
}
]
},
options: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 80,
stepSize: 20
},
scaleLabel: {
display: true,
labelString: 'Percent (%)'
}
}],
xAxes: [{
gridLines: {
drawOnChartArea: false
}
},
{
offset: true,
ticks: {
autoSkip: false,
maxRotation: 0,
padding: -15,
callback: (v, i) => {
if (i == 1) {
return 'Total';
} else if (i == 4) {
return 'Lower than 2.50';
} else {
return '';
}
}
},
gridLines: {
drawOnChartArea: false,
offsetGridLines: true,
tickMarkLength: 20,
color: ['white', 'white', 'white', 'lightgray', 'white', 'white', 'lightgray']
}
}
]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
I'm trying to get chartjs to show a specific label next to each point, for example in this script it should display "TRALALA" in the label as well as mouse hover, but instead it shows the coordinates.
How to have the specific label instead ?
https://jsfiddle.net/z0eLygwx/
thanks
var valuedata = [{
x: 3,
y: 5
}];
var valuelabel = ['TRALALA'];
var chartData = {
labels: valuelabel,
datasets: [{
label: 'Distance',
borderColor: '#2196f3', // Add custom color border
backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
data: valuedata,
pointRadius: 10,
pointHoverRadius: 12
}]
};
var myBarChart = new Chart(document.getElementById("myChart1"), {
type: 'scatter',
data: {
labels: valuelabel,
datasets: [{
label: 'Distance',
borderColor: '#2196f3', // Add custom color border
backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
data: valuedata,
pointRadius: 10,
pointHoverRadius: 12
}]
},
options: {
legend: {
display: true
},
title: {
display: true,
text: 'Distance of JDPT kanji compared to the equivalent JLPT level'
},
scales: {
yAxes: [{
type: 'logarithmic',
display: true,
scaleLabel: {
display: true,
labelString: 'Count',
fontSize: 16
}
}],
xAxes: [{
type: 'linear',
position: 'bottom',
display: true,
scaleLabel: {
display: true,
labelString: 'Distance',
fontSize: 16
},
gridLines: {
display: true
}
}]
},
plugins: {
datalabels: {
color: '#d6621e',
align: 'right',
offset: 16,
font: {
weight: 'bold'
}
}
}
}
});
myBarChart.update();
Ok I got it with
formatter: function(value, context) {
context.chart.data.labels[context.dataIndex];
}
For example
var myBarChart = new Chart(document.getElementById("bar-chart"), {
type: 'line',
data: {
labels: ['a', 'b'],
datasets: [{
data: [10, 20]
}]
},
options: {
plugins: {
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
}
}
}
}
});
I am trying to create a chart with chart.js and i am using this plugin for showing some labels. But when most value on top, it not showing. Check first value (5), it not showing. Is any way to show it?
I tried padding for <canvas> but not work.
var ver = document.getElementById("chart").getContext('2d');
var chart = new Chart(ver, {
type: 'bar',
data: {
labels: ['Val1', 'Val2', 'Val3', 'Val4'],
datasets: [{
label: "Value",
borderColor: "#fff",
backgroundColor: "rgba(248,66,113,.85)",
hoverBackgroundColor: "#f84271",
data: [5,3,1,2]
}]
},
options: {
legend: {
display: false,
},
tooltips: {
backgroundColor: 'rgba(47, 49, 66, 0.8)',
titleFontSize: 13,
titleFontColor: '#fff',
caretSize: 0,
cornerRadius: 4,
xPadding: 10,
displayColors: false,
yPadding: 10
},
animation: {
"duration": "1000"
},
scales: {
xAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}],
yAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}]
},
plugins: {
labels: {
render: 'value',
}
},
}
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="chart"></canvas>
Also fiddle here: https://jsfiddle.net/9o84ucny/
https://www.chartjs.org/docs/latest/configuration/layout.html
Use the layout property to options object:
layout: {
padding: {
top: 20
}
}
chart var should be like that:
var chart = new Chart(ver, {
type: 'bar',
data: {
labels: ['Val1', 'Val2', 'Val3', 'Val4'],
datasets: [{
label: "Value",
borderColor: "#fff",
backgroundColor: "rgba(248,66,113,.85)",
hoverBackgroundColor: "#f84271",
data: [5,10,1,2]
}]
},
options: {
layout: {
padding: {
top: 20
}
},
legend: {
display: false,
},
tooltips: {
backgroundColor: 'rgba(47, 49, 66, 0.8)',
titleFontSize: 13,
titleFontColor: '#fff',
caretSize: 0,
cornerRadius: 4,
xPadding: 10,
displayColors: false,
yPadding: 10
},
animation: {
"duration": "1000"
},
scales: {
xAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}],
yAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}]
},
plugins: {
labels: {
render: 'value',
}
},
}
});
It also show clear when you use title display true put this inside option
options: {
plugins: {
labels: {
render: 'value',
}
},
title: {
display: true,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value) { if (value % 1 === 0) { return value; } }
}
}]
}
}
Does Chart.js (documentation) have option for datasets to set name (title) of chart (e.g. Temperature in my City), name of x axis (e.g. Days) and name of y axis (e.g. Temperature). Or I should solve this with css?
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [data]
}
]
}
Realy thanks for help.
In Chart.js version 2.0, it is possible to set labels for axes:
options = {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}
See Labelling documentation for more details.
For Chart.js version 3
options = {
scales: {
y: {
title: {
display: true,
text: 'Your Title'
}
}
}
}
If you have already set labels for your axis like how #andyhasit and #Marcus mentioned, and would like to change it at a later time, then you can try this:
chart.options.scales.yAxes[ 0 ].scaleLabel.labelString = "New Label";
Full config for reference:
var chartConfig = {
type: 'line',
data: {
datasets: [ {
label: 'DefaultLabel',
backgroundColor: '#ff0000',
borderColor: '#ff0000',
fill: false,
data: [],
} ]
},
options: {
responsive: true,
scales: {
xAxes: [ {
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
} ],
yAxes: [ {
display: true,
scaleLabel: {
display: true,
labelString: 'value'
}
} ]
}
}
};
For Readers in 2021:
Version
"chart.js": "^3.3.2",
Real World Working Sample:
const optionsTemplate = (yAxisTitle, xAxisTitle) => {
return {
scales: {
yAxes: {
title: {
display: true,
text: yAxisTitle,
font: {
size: 15
}
},
ticks: {
precision: 0
}
},
xAxes: {
title: {
display: true,
text: xAxisTitle,
font: {
size: 15
}
}
}
},
plugins: {
legend: {
display: false,
}
}
}
}
In chart JS 3.5.x, it seems to me the title of axes shall be set as follows (example for x axis, title = 'seconds'):
options: {
scales: {x: { title: { display: true, text: 'seconds' }}}
}
see: https://www.chartjs.org/docs/latest/axes/labelling.html
just use this:
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["1","2","3","4","5","6","7","8","9","10","11",],
datasets: [{
label: 'YOUR LABEL',
backgroundColor: [
"#566573",
"#99a3a4",
"#dc7633",
"#f5b041",
"#f7dc6f",
"#82e0aa",
"#73c6b6",
"#5dade2",
"#a569bd",
"#ec7063",
"#a5754a"
],
data: [12, 19, 3, 17, 28, 24, 7, 2,4,14,6],
},]
},
//HERE COMES THE AXIS Y LABEL
options : {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}
});
</script>
If you are using chart JS v4 try this.
options = {
scales: {
y: {
title: {
display: true,
text: 'Test'
}
},
x: {
title: {
display: true,
text: 'Test'
}
}
},
plugins: {
legend: {
display: false,
},
}
}
<Scatter
data={data}
// style={{ width: "50%", height: "50%" }}
options={{
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: "Probability",
},
},
],
xAxes: [
{
scaleLabel: {
display: true,
labelString: "Hours",
},
},
],
},
}}
/>
See example with name of x axis and y axis left and right.
public barChartOptions: ChartOptions = {
title: {
display: true,
text: 'Custom Chart Title',
},
responsive: true,
legend: {
position: 'right',
},
scales: {
yAxes: [
{
position: 'right',
scaleLabel: {
display: true,
labelString: 'Frequency Rate - right',
},
},
{
position: 'left',
scaleLabel: {
display: true,
labelString: 'Frequency Rate - left',
},
},
],
xAxes: [
{
display: true,
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Titulo do eixo X',
fontStyle: 'italic',
fontSize: 12,
fontColor: '#030',
},
},
],
},
};