How to skip labels on x-axes? - javascript

I've been trying for a long time now to figure out how to skip labels on the x-axes of this chart. So, for instance, display every third or fourth label. I've tried adding autoSkip and stepSize to the tick-configuration, but nothing changes. Is there a simple way to do this?
Edit:
visitorsLabels = ["januar", "desember", "november", "oktober", "september", "august", "juli", "juni", "mai", "april", "mars", "februar"]
var visitors_data = [2, 4, 2, 1, 2, 4, 2, 1, 2, 4, 2, 1];
var ctx1 = $("#chart-visitors");
var graph_visitors_preset = {
labels: visitorsLabels,
datasets: [
{
fill: true,
lineTension: 0.1,
backgroundColor: "#f9f9f9",
borderColor: "#72bce3",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: visitors_data,
spanGaps: true,
}
]
};
var chart_visitors = new Chart(ctx1, {
type: 'line',
data: graph_visitors_preset,
options: {
responsive: true,
legend: { display: false },
scales: {
xAxes: [{
ticks: {autoSkip: true, stepSize: 3, max: 5, min: 2},
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
}
}]
}
}
});

In the chart options, you can change an axe's ticks' callback to display the tick (the label) based on a value, or even change what it displays :
options: {
scales: {
xAxes: [{
ticks: {
callback: function(tick, index, array) {
return (index % 3) ? "" : tick;
}
}
}]
}
}
This option basically display one tick every three.
You can check a full script in this jsfiddle, and here is its result :

Related

Chart JS custom tooltip not showing

I have a line graph and I want to alter it's tooltip. I want it, on hover, to show the follow (as an example):
Question: This is question 1
Your answers: 3
Average answers: 7
Your average: 5
Average: 7
The data in the tooltip is fine and works. See this fiddle here
What I'm trying to do is to add to the tooltip so that it can display the question in it too.
What I've tried:
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset=data.datasets[tooltipItem.datasetIndex];
return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i];
}
}
}
var q1 = "This is question 1";
var q2 = "This is question 2";
var q3 = "This is question 3";
var q4 = "This is question 4";
var q5 = "This is question 5";
var questions = [q1, q2, q3, q4, q5];
var questionsArrayLength = questions.length;
for (var i = 0; i < questionsArrayLength; i++) {
console.log(questions[i]);
}
var canvas = document.getElementById('chart');
canvas.height = 500;
var data = {
labels: ["Q1", "Q2", "Q3", "Q4", "Q5"],
datasets: [{
label: "Your answers",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "rgba(75,192,192,1)",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
decimals: false,
pointHitRadius: 10,
data: [1,3,4,5,3],
stack: 4
},
{
label: "Average answers",
fill: false,
lineTension: 0.1,
borderColor: "rgba(79,104,241,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "rgba(79,104,241,1)",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(79,104,241,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
decimals: false,
pointHitRadius: 10,
data: [2, 7, 5, 10, 3],
stack: 5
},
{
label: "Your average",
pointStyle: 'line',
fill: false,
borderColor: "#ffffff",
borderCapStyle: 'round',
borderDash: [0.5, 5],
borderDashOffset: 1,
lineTension: 0.1,
data: [5, 5, 5, 5, 5],
},
{
label: "Average",
pointStyle: 'line',
fill: false,
borderColor: "#ffffff",
borderCapStyle: 'round',
borderDash: [5, 8],
borderDashOffset: 0.6,
lineTension: 0.1,
data: [7, 7, 7, 7, 7],
},
]
};
var options = {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset=data.datasets[tooltipItem.datasetIndex];
return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i];
}
}
},
plugins: {
filler: {
propagate: true
}
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index'
},
showLines: true,
scales: {
yAxes: [{
gridLines: {
color: 'rgb(255, 255, 255)',
z: 2
},
scaleLabel: {
display: true,
labelString: 'Scores'
},
stacked: false,
ticks: {
beginAtZero: 0,
suggestedMin: 1,
suggestedMax: 10,
stepSize: 2,
userCallback: function(label, index, labels) {
// when the floored value is the same as the value we have a whole number
if (Math.floor(label) === label) {
return label;
}
},
}
}],
xAxes: [{
gridLines: {
color: 'rgb(255, 255, 255)',
z: 2
},
scaleLabel: {
display: true,
labelString: 'Questions'
},
}]
},
annotation: {
annotations: [
{
drawTime: "beforeDatasetsDraw",
type: "box",
id: "n",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 0,
yMax: 3.7,
backgroundColor: "rgba(26,26,26,0.6)",
borderColor: "rgba(26,26,26,0.6)",
borderWidth: 1,
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 3.7,
yMax: 7,
backgroundColor: 'rgba(88,88,88,0.6)',
borderColor: 'rgba(88,88,88,0.6)',
borderWidth: 1,
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 7,
yMax: 10,
backgroundColor: 'rgba(31,42,97,0.6)',
borderColor: 'rgba(88,88,88,0.6)',
borderWidth: 0
}
]
}
};
var myLineChart = Chart.Line(document.getElementById('chart'), {
data: data,
options: options
});
.wrap { background-color:#000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.js"></script>
<div class="wrap">
<canvas id="chart"></canvas>
</div>
You have to define a callback function to change the tooltip title as follows.
tooltips: {
mode: 'index',
callbacks: {
title: tooltipItem => 'Question: ' + questions[tooltipItem[0].index]
}
}
Please check the amended JSFiddle

How to remove title color box in Chart.js

I am using chart js ( https://www.chartjs.org/ ) for charts. I checked all option in document but did not find how to hide title color box. Please see attached image
Adding the following should hide the legend (I hope by title color box you mean legend):
legend:
{
display: false
}
var canvas = document.getElementById('myChart');
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 0, 56, 55, 40],
}]
};
function adddata() {
myLineChart.data.datasets[0].data[7] = 60;
myLineChart.data.labels[7] = "Newly Added";
myLineChart.update();
}
var option = {
showLines: true,
legend: {
display: false
}
};
var myLineChart = Chart.Line(canvas, {
data: data,
options: option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
<input type="button" value="Add Data" onclick="adddata()">
Extending Peadar's answer with the options and plugins sections:
type: 'bar',
data: data,
options: {
plugins: {
legend: {
display: false,
} } }
That box is the legend. You can turn it off via the legend flag: https://www.chartjs.org/docs/latest/configuration/legend.html
var myChart = new Chart(ctx, {
type: 'bar',
legend: {
display: false
}
var chart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
plugins: {
legend: {
display: false
}
}
}
For vue-chartjs, I added this in the options object
options: {
legend: {
display: false
}
}

Add icon and custom tooltip - y-axis - chartjs

I am building a chart using chart.js. I want to add a fontawesome icon in the label of y-axis.
I tried to add - labelString: 'Range<i class="fa fa-question-circle" aria-hidden="true"></i>', but it doesn't seem to work. On hover of this icon, I want to also add a tooltip.
How can I add this icon?
Here is the code:
var canvas = document.getElementById('myChart');
var data = {
labels: ["Jan", "1", "2", "3", "4", "5", "Feb"],
datasets: [
{
label: "data",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 0, 56, 55, 40],
}
]
};
function adddata(){
myLineChart.data.datasets[0].data[7] = 60;
myLineChart.data.labels[7] = "Newly Added";
myLineChart.update();
}
var option = {
showLines: true,
legend: {
display: false
},
title: {
display: false,
},
scales: {
yAxes: [ {
scaleLabel: {
display: true, labelString: 'Range'
},
gridLines: {
drawTicks: false, display: true
}
}],
xAxes: [ {
scaleLabel: {
display: true, labelString: 'Last 30 days'
},
ticks: {
min: 0, max: 15, stepSize: 5
}
}]
}
};
var myLineChart = Chart.Line(canvas,{
data:data,
options:option
});
Here is my chart: https://jsfiddle.net/9mg8c6zL/1/

How to hide tooltips with their respective dataset

I'm using charts.js. For my current need, I managed to find a way to configure tooltips to be always visible regardless of the hover event. My problem is that the tooltip visibility does not follow the dataset behaviour. On charts.js, you can click on a dataset in order to remove it from the graph. My graph does that, but the tooltips are still there visible, floating within the graph with no dataset to represent. Is there a way to hide then with the dataset data when the label is clicked ?
Here is an example of the current state of what i said. https://jsfiddle.net/CaioSantAnna/ddejheg0/ .
HTML
<canvas id="linha"></canvas>
Javascript
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));
});
});
// 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;
}
}
});
ctx = document.getElementById("linha");
var linha = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
responsive: true,
animation: true,
},
{
label: "Second dataset",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,0,0,0.4)",
borderColor: "rgba(0,0,0,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(0,0,0,1)",
pointHoverBorderColor: "rgba(0,0,0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [13, 78, 60, 75, 90, 10, 27],
spanGaps: false,
responsive: true,
animation: true,
}
]
},
options: {
tooltips: {
callbacks: {
title: function (tooltipItem, data) { return "" },
label: function (tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
var label = data.labels[tooltipItem.index];
return value;
}
}
},showAllTooltips: true
}
});
To reproduce the problem, just click in one of the labels on the top of the graph.
Thanks in advance.
Just to close the question, I ended up changing to amcharts(https://www.amcharts.com/). It has features like the one i was trying to achieve with chart.js and is free to use under a linkware license.
Thanks again.

Chart JS Line insert Picture

Simple Setup:
I have a RoR Application and a ChartJS Line Diagramm.
I want to add a Picture at a specific place but also text.
In the progress of the RoR Application answers of users will show up after time. Later the answer of two people will be shown, who is closer to the Average.
In my case I only need to know how a Picture could rendered inside.
Picture What it should look like
Here is my actual Code:
var points = [];
var data = {
datasets: [{
label: 'Antworten',
data: points,
radius: 6,
borderColor: "#000000",
borderWidth: 2,
backgroundColor: "#FF0000"
},
{
label: "",
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,0,1)",
borderColor: "rgba(0,0,0,1)",
borderCapStyle: 'butt',
borderDash: [0],
borderDashOffset: 0.0,
showLine: true,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "rgba(1,0,0,1)",
pointBorderWidth: 8,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(0,0,0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointStyle: "circle",
pointHitRadius: 10,
data: [{
x: 0,
y: 0
},{
x: 100,
y: 0
}],
borderColor: "#000000",
borderWidth: 5,
backgroundColor: "#FF0000"
}
]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, {
type: 'line',
data,
options: {
legend: {
display: false
},
showLines: false,
scales: {
xAxes: [{
type: 'linear',
gridLines: {
display: false
},
position: 'bottom',
ticks: {
max: 100,
min: 0,
stepSize: 10
}
}],
yAxes: [{
display: false,
ticks: {
max: 1,
min: 0,
stepSize: 1
}
}]
}
}
});
};
Found an Answer:
Here my solution
var user_a = new Image();
user_a.src = 'http://i.imgur.com/fwhrCBs.png';
var data = {
datasets: [
{
label: 'Spieler 1',
data: user_a_answer,
radius: 1,
borderColor: "#000000",
borderWidth: 2,
pointStyle: user_a,
}]

Categories