Using chart.js 2.0.0-beta2.
Using this syntax to instantiate a bar chart, taken from the documentation, works great:
var ctx = document.getElementById('barChart').getContext('2d');
var myBarChart = new Chart(ctx).Bar(barChartData);
Am trying instead the following since I want eventually to use logarithmic axes (and a lot of other options), which seems to require this style:
var ctx = document.getElementById('barChart').getContext('2d');
var myBarChart = new Chart(ctx, {
type: 'Bar',
data: barChartData
});
That doesn't seem to work, no chart drawn, no JS error in the console.
Thanks for any help. Also thanks to the people working on chart.js.
What is in barChartData?
It should look something like this (from the documentation):
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My Second dataset",
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "rgba(220,220,220,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(220,220,220,0.2)",
hoverBorderColor: "rgba(220,220,220,1)",
data: [28, 48, 40, 19, 86, 27, 90]
},
// Additional data sets go here.
],
};
http://nnnick.github.io/Chart.js/docs-v2/#bar-chart-example-usage
Edit -
Change
type: 'Bar',
to
type: 'bar',
Edit #2 -
You can confirm your using the correct version of Chart.JS by pulling 2.0 beta 2 from here:
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.min.js
Related
Good evening,
There's any way to alternate the chart's backgroud color for each dataSet of a result?
That's how I wish it.
enter image description here
Alternate background may be created with the use of chartjs-plugin-annotation.
Please have a look at the code snippet below that has been derived from the example code provided by the contributors of chartjs-plugin-annotation.
This code works with Chart.js 2.6.0 and it still produces a script error that may be ignored. Unfortunately I couldn't make it work with the newest version of Chart.js (currently 2.9.3) yet and I don't have time now to further investigate.
const labels = ["January", "February", "March", "April", "May", "June", "July"];
const annotations = [];
for (let i = 0; i < labels.length; i++) {
if (i % 2 == 0) {
annotations.push({
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: labels[i],
xMax: labels[i + 1],
backgroundColor: "rgba(128, 128, 128, 0.5)",
borderColor: "rgb(128, 128, 128)",
borderWidth: 1
});
}
};
new Chart('chart', {
type: "bar",
data: {
labels: labels,
datasets: [{
label: "Dataset 1",
backgroundColor: 'red',
data: [95, 70, 55, -88, -64, 34, -55],
categoryPercentage: 1,
barPercentage: 0.8
},
{
label: "Dataset 2",
backgroundColor: 'green',
data: [81, 58, 30, -91, -74, 20, -40],
categoryPercentage: 1,
barPercentage: 0.9
}
]
},
options: {
responsive: true,
tooltips: {
mode: "index",
intersect: true
},
annotation: {
annotations: annotations
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="chart" height="90"></canvas>
we can use annotation plugin to do this
import annotationPlugin from "chartjs-plugin-annotation";
import {Chart} from 'chart.js';
Chart.register(annotationPlugin);
this code will add a box to our chart
{
type: 'box', #type of draw
drawTime: 'beforeDraw', #this will decide background or foreground
yMin: 5, #value min on y axis
yMax: 10, #value max on y axis
borderColor: 'rgb(242, 244, 248, 0.9)', #border color of the box
borderWidth: 1, #boarder width for box
backgroundColor: '#F2F4F8', #colour of the box
}
Out of this code
refer to this post here on how to do this: https://medium.com/#omi10859/alternative-background-lines-in-chartjs-a626ce4d3bcb
Is it possible to have a space after and before every data point?
Like in this image:
There exists a series of dataset properties that can be used to style the points. You could use the following ones to achieve what you're looking for.
pointBackgroundColor
pointRadius
pointBorderColor
pointBorderWidth
Please have a look at the following code snippet.
new Chart(document.getElementById("myChart"), {
type: "line",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: "rgb(75, 192, 192)",
lineTension: 0.1,
pointBackgroundColor: "rgb(75, 192, 192)",
pointRadius: 8,
pointBorderColor: 'white',
pointBorderWidth: 8
}]
},
options: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>
If you want the points to also look the same when the mouse pointer hovers
over them, you'll have to define the following properties with identical values.
pointHoverBackgroundColor
pointHoverRadius
pointHoverBorderColor
pointHoverBorderWidth
I'm using Chart.js to display some data using a bar chart.
My question is whether there is a way to extract the text of the tooltip and show it on a different div, so whenever I hover the bar chart I get the label and the value hovered in another place of the page.
I managed to alert the label or the value using the alert(label) function. but when I use the $('#mydiv').text(label) function, It does not work.
Here is my code :
<canvas id="widgetChart4"></canvas>
<id id="myDiv"></id>
<script>
var ctx = document.getElementById( "widgetChart4" );
ctx.height=50;
ctx.width=250;
var myChart = new Chart( ctx, {
type: 'bar',
data:
{
labels: [ "January", "February", "March", "April", "May", "June",
"July" ],
datasets: [
{
label: false,
data: [ 16, 32, 18, 26, 42, 33, 44 ]
}
]
},
options:
{
responsive: true,
tooltips:
{
callbacks:
{
label: function(tooltipItem, data) {
//this is working
alert( data['datasets'][0]['data'][tooltipItem['index']]);
//this is not working
$("#myDiv").text(data['datasets'][0]['data']
[tooltipItem['index']]);
return data['datasets'][0]['data'][tooltipItem['index']];
},
}
}
}
});
</script>
I managed to alert the label or the value using the alert(label)
function. but when I use the $('#mydiv').text(label) function, It does
not work.
I ran your code and it works perfectly so one possible reason why it's not working on your side is that you didn't import jQuery in your code.
var ctx = document.getElementById("widgetChart4");
ctx.height = 50;
ctx.width = 250;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June",
"July"
],
datasets: [{
label: false,
data: [16, 32, 18, 26, 42, 33, 44]
}]
},
options: {
responsive: true,
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
$('#myDiv').html(data['datasets'][0]['data']
[tooltipItem['index']]);
return data['datasets'][0]['data'][tooltipItem['index']];
},
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="widgetChart4"></canvas>
<div id="myDiv"></div>
I want to hide legends in Chart.js in label and tooltips.
I am using v2.5.0
I am trying this way but its not hiding legend in tooltips
<canvas id="myChart" width="400" height="250"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
window.onload = function(e){
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June1", "July"],
datasets: [
{
fill: false,
lineTension: 0.3,
pointRadius: 15,
pointHitRadius: 15,
pointHoverRadius: 15,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
}
]
};
var options={
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return tooltipItem.yLabel;
}
}
}
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
}
</script>
jsfiddle
I have also tried in global values like this
Chart.defaults.global.legend= false;
But legends are still shown in tooltips, Please see and suggest any possible way to do this.
Thanks
I found the solution by adding displayColors:false in tooltips option like this
tooltips: {
displayColors:false,
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
}
Now the legend are not shown, I hope it helps someone with similar issue.
I am using chart.js .Bar() charts.
However, on some conditions there may be no data in the system. Short of creating empty (dummy) datasets, can I somehow make chartjs draw an empty plot?
Edit: I edited the post to show horizontal lines of an empty graph as #zazu asked for it
In this sample, I set up a Chart.js line graph, providing a first dataset with data (in order to scale the grid vertical axis and make the horizontal lines visible), and a second one with empty data. This results in an empty graph, but with the full grid visible:
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
// invisible dataset
{
label: "",
fillColor: "rgba(220,220,220,0.0)",
strokeColor: "rgba(220,220,220,0)",
pointColor: "rgba(220,220,220,0)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
// change this data values according to the vertical scale
// you are looking for
data: [65, 59, 80, 81, 56, 55, 40]
},
// your real chart here
{
label: "My dataset",
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: []
}
]
};
var options = {
animation: false,
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
showTooltips: false
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
JSFiddle here.