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>
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}}],
}
}
All my labels are on the top of the bars. I can see this
this image
but I want that would be like this
this image
padding doesn't work for xAxes, but works for yAxes
legend: {display: false},
scales: {
xAxes: [{
position: 'top',
stacked: true,
ticks: {
stepSize: 1,
min: 0,
autoSkip: false,
fontColor: '#3f7ba2',
fontStyle: 600,
fontFamily: 'Italic',
},
gridLines: {
color: '#dedfe7',
tickMarkLength: 0,
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
fontColor: '#62aae8',
padding: 5
},
gridLines: {
color: '#dedfe7' //b5cce2
}
}],
}
This is an issue that only persists in chart.js version 2.6.0 and lower. As you can read in the release notes under the bug fixes it says that in PR 4403 ticks.padding option now applies to vertical and horizontal scales.
So to solve your issue you will need to update to a version of chart.js higher or equal to 2.7.0
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
xAxes: [{
position: 'top',
ticks: {
padding: 100
}
}],
}
}
}
const 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/2.7.0/Chart.js"></script>
</body>
This is using charts.js. This code only makes the line graph but the title, x axis and y axis does not show. I want to add title, and the names for those 2 axis onto the graph. what is wrong and how do you fix it? I also want to make the y axis to start from 0 and up.
async function chartDisplay() {
await getData1();
await getData2();
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xLabels,
datasets: [{
data: ratingDataI,
label: "data1",
borderColor: "#3E95CD",
fill: false
},
{
data: ratingDataA,
label: "data2",
borderColor: "#3E95CD",
fill: false
}
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'label',
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
x: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Dates'
}
}],
y: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
});
}
the x and y should not be arrays but objects, also the scaleLabel prop is called title now. For all the changes please read the migration guide (https://www.chartjs.org/docs/master/getting-started/v3-migration.html)
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'yAxis'
}
},
x: {
title: {
display: true,
text: 'xAxis'
}
}
}
}
}
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.4.1/chart.js"></script>
</body>
I have a chartjs line chart requirement where the client is asking to show labels on x axis only if it has a data point. please find his mockup below.
the x-axis is time and here is what I am getting.
how can I achieve this?
here is my config.
options={{
scales: {
xAxes: [
{
distribution: 'linear',
type: "time",
time: {
min: range_min.toDateString(),
max: range_max.toDateString(),
unit: "day",
stepSize: "1",
},
id: 'xAxis',
ticks: {
autoSkip: true,
callback: function (value, index, values) {
return formatDate(new Date(value))
},
}
},
],
},
pan: {
enabled: true,
mode: "x",
speed: 1,
threshold: 1,
},
zoom: {
enabled: true,
drag: true,
sensitivity: 0.5,
mode: "x",
},
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'xAxis',
value: 1582229218219,
endValue: 1582229218219,
borderColor: 'rgb(75, 0, 0)',
borderWidth: 4
}]
},
onClick: (event, item) => {
console.log(item)
}
}}
yes this is possible, you can achieve this by using the tick callback like so:
const data = [{
x: 'Red',
y: 10
}, {
x: 'Yellow',
y: 5
}, {
x: 'Orange',
y: 3
}]
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data,
borderWidth: 1,
backgroundColor: 'red',
borderColor: 'red',
fill: false
}]
},
options: {
scales: {
xAxes: [{
ticks: {
callback: (val, y, z, t) => (
data.map(el => el.x).indexOf(val) >= 0 ? val : null
)
}
}]
}
}
}
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/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
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.