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.
Related
I have searched through for the solution but I have found solution to pie charts only. For example this one : Chart.js v2: How to make tooltips always appear on pie chart?
I just want make the tooltip visible without hovering. I have tried registering new pluginService but its not working and its producing this error
Uncaught TypeError: Cannot read property 'call' of undefined
this is what I have so far
Chart.pluginService.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
})
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First 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: [65, 59, 80, 81, 56, 55, 40]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
showAllTooltips: true
}
});
appreciate any helps tq
When using the latest stable version of Chart.js (2.9.3), it works with the following changes.
Instead of Chart.pluginService.register, use Chart.plugin.register
Instead of change _options : chart.options write _options : chart.options.tooltips
Please have a look at your amended code below.
Chart.plugins.register({
beforeRender: function(chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips,
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function(dataset, i) {
chart.getDatasetMeta(i).data.forEach(function(sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
chart.options.tooltips.enabled = false; // turn off normal tooltips
}
},
afterDraw: function(chart, easing) {
if (chart.config.options.showAllTooltips) {
if (!chart.allTooltipsOnce) {
if (easing !== 1) {
return;
}
chart.allTooltipsOnce = true;
}
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
tooltip.initialize();
tooltip.update();
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
new Chart("chart", {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First 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: [65, 59, 80, 81, 56, 55, 40]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
showAllTooltips: true
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="100"></canvas>
I would like to change font size and border colors for this chart. Hence I don't know how to do it, I tried to put these options at different places but nothing seems to work. I can't get the logic of the binding between angular-chart options and Chart.js options, is there a common way to manipulate them?
Here's the directive:
<canvas class="chart chart-line" chart-y-axes="axes" chart-data="data" chart-labels="labels"
chart-series="series" chart-options="options" chart-legend="true" chart-colours="colours"></canvas>
Here are the scope definitions:
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.axes = ["y-axis-1", "y-axis-2"];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.colours = [{
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)'
}]
$scope.options = {
datasetFill: false,
showLines: true,
elements:
{
line:
{
fill: false,
tension: 0.0001
},
point:
{
radius: 0
}
},
scales:
{
yAxes: [
{
type:"linear",
id:$scope.axes[0],
gridLines:
{
display: false
}
},
{
type:"linear",
id:$scope.axes[1],
position: "right",
gridLines:
{
display: false
},
scaleLabel:
{
display: true
}
}]
},
};
Changing the colors through chart-colors just doesn't work.
Since you have 2 series, make sure you have 2 entries in $scope.colours i.e.
...
$scope.colours = [{
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'red',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)'
}, {
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'blue',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)'
}]
...
Fiddle - http://jsfiddle.net/cpdh1g19/ (the color for the first line will change after 2 seconds)
By the look of the options, you're using chart.js 2.0, you need to use the latest angular-chart.js.
Note the attribute is now chart-colors and the color properties have changed in chart.js 2.0.
I am currently fiddling around with some charts, and I would like for there to be a string of text to come up as you hover over certain data points.
So for example, currently my dataset looks like this:
var data = {
labels: ["January", "February:", "March", "April", "May", "June", "July"],
datasets: [{
label: "My first 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: [65, 59, 80, 81, 56, 55, 40]
}]
};
I would like for example, to hover over the February : 59 point and have it display "February : 59 - Some unique text"
Thank you
first add this in html
<canvas id="myChart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>
:js
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First 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: [65, 59, 80, 81, 56, 55, 40]
}]
};
var myLineChart = new Chart(ctx).Line(data, {
customTooltips: function (tooltip) {
var tooltipEl = $('#chartjs-tooltip');
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split(":");
var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html(innerHtml);
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
}
});
and some styling stuff
:css
#chartjs-tooltip {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
(Note that Chart.js already adds tooltip text automatically; the question above is a bit unclear. What the question is about is how to add custom text to the tooltip, rather than just the defaults that it picks - the x and y values of the given point.)
Use the callbacks field in options.tooltips. Note that the body of the tooltip is referred to as the "label".
tooltips: {
intersect: false, // makes it easier to select tooltips on mobile
callbacks: {
title: (toolTipItem, data) => {
let title = toolTipItem[0].x; // uses the x value of this point as the title
return title;
},
label: (toolTipItem, data) => {
let labels = data[toolTipItem.index!].labelText; // assumes your data has a `labelText` field.
return labels;
},
},
},
Note that some fields, like title, are passed an array of toolTipItem objects in their callback; others, like label, are passed a single object. Hence, properties of the toolTipItem object must be accessed differently for each.
Callback documentation: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
Properties you can access on the toolTipItem object - https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-item-interface
Some official examples: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback
Unofficial: How to customize the tooltip of a Chart.js 2.0 Doughnut Chart?
How to wrap long label lines?
One way or the other, split up your labels into an array, and return that; each line in the array will be on a separate line. If the lines are still too long, you'll need to use a function to detect long lines and split them into additional array items.
Im using the following code for showing my graph of chart.js library:
HTML Part:
<div style="width:60%">
<div>
<canvas id="canvas_all" height="450" width="600"></canvas>
</div>
and the Script:
var lineChartDataAll = {
labels : <?php echo json_encode($all_date_label) ?>,
datasets : [
{
label: "My First 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 : <?php echo json_encode($all_hum_data) ?>
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : <?php echo json_encode($all_temp_data) ?>
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
var ctx_all = document.getElementById("canvas_all").getContext("2d");
window.myLine = new Chart(ctx_all).Line(lineChartDataAll, {
responsive: true,
showXLabels: 10
});
}
Now, i have problems with this option: showXLabels: 10
Do i use this option in a correct way?
I want that there are only a view x (10) label on the x-axis ...thats the goal.
By now the graph is showing all x labels...
The option referenced in the (question) comments is from PR 521 that has not been merged into the main branch yet. This was later made into a PR 897, which too is yet to be merged.
So, if you want this feature, you should be using code from either of the above.
Here is a fiddle - http://jsfiddle.net/trhcafut/ that does just that. I just added the following block of code to the end (just scroll to the very end of the JS block), after Chart.Core and Chart.Line from the PR.
var lineChartData = {
labels : ["January", "February", "March", "April", "May", "June", "July"],
datasets : [
{
label: "My First 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 : [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [28, 48, 40, 19, 86, 27, 90]
}
]
}
var ctx_all = $("#canvas_all").get(0).getContext("2d");
window.myLine = new Chart(ctx_all).Line(lineChartData, {
showXLabels: 3
});
Note that you won't be getting any changes made to Chart.js after the branch if you do this.
I'm having a tough time figuring out how to get labels, legend and title showing up in my Chart JS Line Chart. I've copied the code directly from the example (reproduced below). However, the label "My First dataset" doesn't show up anywhere on the chart and so I can't tell which line is which. I've also tried adding a 'title' to my datasets, but with no luck. Anyone know what I'm missing?
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First 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: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]};
Thanks,
Saswat
in the option add this parameter
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"