I have made two charts in chart.js for a school project, one bar and one line and would like to put a title on each chart but it doesn't work, the bars only disappear. Where do i put the title in the code? I would like the titles to be above the two charts.
Here's a jsfiddle of the code to show more details: https://jsfiddle.net/b4d5y01z/1/
let lineConfig = {
type: 'line',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: 'Miljoner ton',
data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
backgroundColor:"rgba(0,255,0,0.4)",
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
barConfig = {
type: 'bar',
data: {
labels: ['Palmolja', "Sojaolja", 'Solrosolja', 'Rapsolja', 'Jordnöt','Annat'],
datasets: [{
label: "Miljoner ton",
data: [32, 22.4, 8, 13.1, 2.2, 19.7],
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
activeType = 'bar', // we'll start with a bar chart.
myChart;
function init(config) {
// create a new chart with the supplied config.
myChart = new Chart(document.getElementById('chart'), config);
}
Replace options with following
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
},
title: {
display: true,
text: 'Custom Chart Title'
}
},
Demo https://jsfiddle.net/wkt0bfxp/
Try This:
let lineConfig = {
type: 'line',
data: {
labels: ['q', 'w', 'e', 'r', 't', 'y'],
datasets: [{
data: [6, 5, 4, 3, 2, 1]
}]
},
options: {
title:{
display: true,
text: "My Second Chart"
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
barConfig = {
type: 'bar',
data: {
labels: ['a', 's', 'd', 'f', 'g', 'h'],
datasets: [{
data: [10, 20, 30, 40, 50, 60]
}]
},
options: {
title:{
display: true,
text: "My First Chart"
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
Try using charty.live,which gives the developers, the leverage to create charts without single line of code.
Related
We need a chart with the ability to click on bar in this chart
and on click display element (div) and display data on this div using HTML and jquery
var xyValues = [
{x:50, y:7},
{x:60, y:8},
{x:70, y:8},
{x:80, y:9},
{x:90, y:9},
{x:100, y:9},
{x:110, y:10},
{x:120, y:11},
{x:130, y:14},
{x:140, y:14},
{x:150, y:15}
];
new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgb(0,0,255)",
data: xyValues
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
min: 40,
max: 160
}
}],
yAxes: [{
ticks: {
min: 6,
max: 16
}
}],
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>
I think you could add onClick option in the chart options.
The option accepts a function as value.
Here is the doc: https://www.chartjs.org/docs/2.9.4/general/interactions/events.html
options: {
onClick(event, clickedElemeents) {
.... your logic
},
legend: {display: false},
scales: {
xAxes: [{ticks: {min: 40, max:160}}],
yAxes: [{ticks: {min: 6, max:16}}],
}
}
I have a created a bar chart by chart js , Below is my code
version : 2.9.4
var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [3, 5, 8, 9, 5];
var barColors = ["#E85900", "#E85900","#E85900","#E85900","#E85900"];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
axis: 'y',
backgroundColor: barColors,
data: yValues,
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{
barThickness: 65, // number (pixels) or 'flex'
}],
yAxes: [{
ticks: {
stepSize: 1,
beginAtZero:true,
suggestedMax: 9
}
}]
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}
}
});
Output that I got like below in pdf, I am using wkhtmltopdf. But it's fine in html page.
Problem is bar size displaying less then Y axis value. Here bar value 3 is showing under the Y axis value 3. My expectation is it will equal to 3.
I had the similar issue while converting html to pdf in IronPdf. I have managed to resolve it by setting animation option to false. So in your case it would be:
var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [3, 5, 8, 9, 5];
var barColors = ["#E85900", "#E85900","#E85900","#E85900","#E85900"];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
axis: 'y',
backgroundColor: barColors,
data: yValues,
}]
},
options: {
animation: false,
legend: {display: false},
scales: {
xAxes: [{
barThickness: 65, // number (pixels) or 'flex'
}],
yAxes: [{
ticks: {
stepSize: 1,
beginAtZero:true,
suggestedMax: 9
}
}]
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}
}
});
i am a little bit confused, because i dont find any solution to make some points at the y-axis bold.
I want to change the style of the 'sum labels' to bold.
var mc1 = new Chart(document.getElementById("mychart"), {
type: 'horizontalBar',
data: {
labels: ["sum(A+B)",
"A",
"B",
"sum(C+D)",
"C",
"D"
],
datasets: [{
backgroundColor: '#0066b3',
label: '# von 5',
data: [5, 3, 2, 7.5, 3, 4.5]
}]
},
options: {
scales: {
xAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 5,
beginAtZero: true
}
}],
yAxes: [{
ticks: {
barThickness: 30,
beginAtZero: true
}
}]
},
legend: {
display: false
},
responsive: true,
text: 'Mychart'
}
});
mc1.options.scales.yAxes[0].ticks.minor.fontWight = 'bold';
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="mychart"></canvas>
JSFiddle demo.
This is by default not possible in V2, in the upcomming release of V3 of the lib you can achieve this with the scriptable fontStyle option like in this example:
var options = {
type: 'bar',
data: {
labels: ["sum(A+B)",
"A",
"B",
"sum(C+D)",
"C",
"D"
],
datasets: [{
backgroundColor: '#0066b3',
label: '# von 5',
data: [5, 3, 2, 7.5, 3, 4.5]
}]
},
options: {
indexAxis: 'y',
scales: {
y: {
ticks: {
font: {
style: (tick) => (tick?.tick?.label.includes('sum') ? 'bold' : 'normal')
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.13/chart.js" integrity="sha512-JS/WtaFglOYbXbMt9s52TO0QEzWljfCG2dFTC6aW9bJdP40kC37uoV+EzI06/LgpfX65oTnS1jUXxscH2xlG1Q==" crossorigin="anonymous"></script>
</body>
I'm trying to create a percentile chart, ie a chart with some lines corresponding to each percentile. Given a user input, I want to show their mark in the chart with a dot.
So basically, my question is: Is it possible to place a dot in a multiple line chart? If so, how do I do it?
var lineChart = new Chart(myChart2, {
type: 'line',
data: {
labels: ['6', '7', '8', '9', '10', '11'],
datasets: [ {
label: "50th",
data: [20, 22, 28, 26, 25, 26],
borderColor: '#166ab5',
fill: false
}, {
label: "90th",
data: [72, 74, 68, 75, 74, 78],
borderColor: '#00FF00',
fill: false
}, {
label: "10th",
data: [2, 2, 5, 4, 6, 5],
borderColor: '#FF0000',
fill: false
}]
},
options: {
title: {
text: "Percentile",
display: true
},
legend: {
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '26',
borderColor: 'tomato',
borderWidth: 1
}],
drawTime: "afterDraw" // (default)
}
}
});
I'm testing some charts libs and now I'm using Chartjs and I want to create A bar chart and on this chart I want to make each bar has your on x position value and a legend to it.
Something like this: https://codepen.io/mmoskorz/pen/maPExb, but in this case the chart left space for the other bars.
var ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['1', '2', '3'],
datasets: [{
label: 'Candidate A Votes',
backgroundColor: "#000080",
data: [90,0,0]
}, {
label: 'Candidate B Votes2',
backgroundColor: "#d3d3d3",
data: [0,70,0]
}, {
label: 'Candidate C Votes3',
backgroundColor: "#add8e6",
data: [0,0,45]
}]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Only one X position doesn't satisfy my problem: https://codepen.io/mmoskorz/pen/aPNmNx
var ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['1'],
datasets: [{
label: 'Candidate A Votes',
backgroundColor: "#000080",
data: [90]
}, {
label: 'Candidate B Votes2',
backgroundColor: "#d3d3d3",
data: [70]
}, {
label: 'Candidate C Votes3',
backgroundColor: "#add8e6",
data: [45]
}]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
I tried to put values to x and y, but not work as well: https://codepen.io/mmoskorz/pen/OrNRXp
var ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Candidate A Votes',
backgroundColor: "#000080",
data: [{x:90, y:1}]
}, {
label: 'Candidate B Votes2',
backgroundColor: "#d3d3d3",
data: [{x:70, y:2}]
}, {
label: 'Candidate C Votes3',
backgroundColor: "#add8e6",
data: [{x:45, y:3}]
}]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});