Related
["06月10日","06月13日","06月14日","06月15日","06月16日","06月17日","06月20日","06月21日","06月22日","06月23日","06月24日","06月27日","06月28日","06月29日","06月30日","07月01日","07月04日","07月05日","07月06日","07月07日","07月08日","07月11日","07月12日","07月13日","07月14日","07月15日","07月19日","07月20日","07月21日","07月22日","07月25日","07月26日","07月27日","07月28日","07月29日","08月01日","08月02日","08月03日","08月04日","08月05日","08月08日","08月09日","08月10日","08月12日","08月15日","08月16日","08月17日"]
above are all the labels that I want to show on the graph but it hiding all the odd index values from the graph only showing even index values on the graph from the above list.
see the graph it missing some labels.
if you see the order all the even number index values are displayed and odd are hidden..
This is all my chart code...
const data = {
labels: dates,
datasets: [{
type: 'line',
label: 'Line graph',
data: line,
fill: false,
borderColor: '#ff5252',
backgroundColor: '#ff5252',
yAxisID: 'y-axis-a',
lineTension: 0.1,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointRadius: 5,
pointHitRadius: 10,
},{
type: 'bar',
label: 'Bar graph',
data: diff,
borderColor: colors,
backgroundColor: colors,
borderWidth: 2,
pointRadius: 5,
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
fill: true,
showLabelBackdrop:true,
},]
};
const config = {
type:"scatter",
data: data,
options: {
legend: {
display: false
},
responsive: false,
scales: {
y: {
display:false,
beginAtZero: true,
ticks: {
color: "#ffffff",
font: {
size: 14,
},
},
},
},
plugins: {
labels: {
ticks:{
font: {
size: 22
},
color: "#ffffff",
}
},
title: {
display: true,
text: title,
padding: {
top: 10,
bottom: 30,
},
font: {
size: 22,
},
color: "#ffffff"
}
}
}
};
const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');
const myChart = new Chart(ctx, config)
I have also tried..
x:{ticks:{autoSkip:false}}
when I do this it changes my label to numbers..
when you are using the type:"scatter",
Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 pointslink for charts scatter charts
when you are not defining the values with x and y then used the x-axis and y-axis as linear and then you can manipulate the x-axes for both line and bar..if you will not provide the chart_type in config it will take axes as linear
you can
xAxisID: 'x-axis-bar',
xAxisID: 'x-axis-line',
and then hide the 1 x-axis and autoSkip=False it will show your all values.
I am attaching the all code below..
const data = {
labels: dates,
datasets: [{
type: 'line',
label: 'Line graph',
data: line,
fill: false,
borderColor: '#ff5252',
backgroundColor: '#ff5252',
yAxisID: 'y-axis-a',
xAxisID: 'x-axis-line',
lineTension: 0.5,
order:1,
},{
type: 'bar',
label: 'Bar graph',
data: diff,
borderColor: colors,
backgroundColor: colors,
borderWidth: 2,
pointRadius: 5,
xAxisID: 'x-axis-bar',
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
fill: true,
showLabelBackdrop:true,
order:2
},]
};
const config = {
data: data,
options: {
responsive: false,
scales: {
y: {
display:false,
beginAtZero: true,
ticks: {
color: "#ffffff",
font: {
size: 14,
},
},
},
'x-axis-bar':{
ticks:{
autoSkip:false,
stepSize:1.0,
}
},
'x-axis-line':{
display:false
}
},
plugins: {
labels: {
ticks:{
font: {
size: 22
},
color: "#ffffff",
}
},
title: {
display: true,
text: title,
padding: {
top: 10,
bottom: 30,
},
font: {
size: 22,
},
color: "#ffffff"
}
}
}
};
const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');
const myChart = new Chart(ctx, config)
I was able to create a great radar chart with Chart js. My only problem is that the datasets attribute hoverBackgroundColor is not making any affect.
Here's my code:
chosen = [[5.2,0,1,9,11],[5.1,2,4,9,7],[5.1,2,2,9,8]]
playerNames= ['Henderson','Baldock','Stevens']
function createRadarComparison(chosen, playerNames) {
var ctx = document.getElementById('myChart').getContext('2d');
var borderColors = ['#ff82827d', '#82ff917d', '#fdff827d','#b882ff7d']
var colors = ['#ff828252', '#82ff8c52', '#fdff8252', '#b882ff52' ];
datasetdata = []
for (var i = 0; i < chosen.length; i++) {
datasetdata[i] = {
label: playerNames[i],
data: chosen[i],
backgroundColor: colors[i],
hoverBackgroundColor: colors[i],
borderColor: borderColors[i],
pointBorderColor: "#fff",
pointBackgroundColor: borderColors[i],
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
}
}
var config = {
type: 'radar',
data: {
labels: ['Price', 'Goals', 'Assits', 'Clean Sheets', 'Bonus'],
datasets: datasetdata
},
options: {
legend: {
position: 'top',
labels: {
"fontSize": 10,
}
},
scale: {
ticks: {
beginAtZero: true,
display: false
}
},
maintainAspectRatio: false,
}
};
var myChart = new Chart(ctx, config);
}
Here's the image of the chart
I am expecting the color of the whole dataset area to change on hover, but nothing changes. Appreciate your help
i add animation to show label value data on value points in line chart js. but when i click the legend to hide a line, the label not disappear. to be honest, i really don't have any clue to fix it.
the chart now
the chart after hide some line with legend
var ctxTotal = $("#grap_trajec_divisi");
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function (tooltipItems, data) {
var dataM = tooltipItems.yLabel;
formatM(dataM);
var multistringText = [data_M];
multistringText.push(tooltipItems.yLabel);
multistringText.push(data.datasets[tooltipItems.datasetIndex].label);
return multistringText;
}
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
labelString: 'Value'
},
ticks: {
callback: function (value, index, values) {
var dataYaxis = value;
formatM(dataYaxis);
return data_M;
}
},
}]
},
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = '.7rem "Calibri",sans-serif';
ctx.fillStyle = '#555';
ctx.textAlign = "center";
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
formatM(data);
ctx.fillText(data_M, bar._model.x, bar._model.y - 5);
});
});
}
}
//title: {
// display: true,
// text: 'Chart.js Line Chart - proyeksi'
//}
};
var chartData = {
labels: arr,
datasets: [{
label: "RKAP",
data: value_LT,
fill: false,
borderColor: "rgb(89,159,240)",
pointBorderColor: "rgb(89,159,240)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Target",
data: value_LT2,
fill: false,
borderColor: "rgb(186,179,61)",
pointBorderColor: "rgb(186,179,61)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Actual",
data: value_LO,
fill: false,
borderColor: "rgb(78,199,138)",
pointBorderColor: "rgb(78,199,138)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Proyeksi",
data: value_LP,
fill: false,
borderColor: "rgb(241,151,89)",
pointBorderColor: "rgb(241,151,89)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}],
};
var config = {
type: 'line',
options: chartOptions,
data: chartData
};
if (window.chartTrajecDivisi != undefined) {
window.chartTrajecDivisi.destroy();
}
window.chartTrajecDivisi = new Chart(ctxTotal, config);
i want to hide the label when line hide by clicking the label, so the label and the line is hide / show together.
I think this works.
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
formatM(data);
ctx.fillText(data_M, bar._model.x, bar._model.y - 5);
});
}
});
i found the answer for this. just remove the animation, and used plugin datalabel chart js.
I have the given code below for displaying a radar chart using Chart.js. When I display it as PDF on my screen it appears blurry. I've been trying to scale using webkitBackingStorePixelRatio and devicePixelRatio on Chrome, but I'm a little bit stuck.
--HTML--
<div class="chart">
<canvas id="myChart"></canvas>
</div>
--Javascript--
<script>
var ctx1 = document.getElementById("myChart");
var myRadarChart1 = new Chart(ctx1, {
type: 'radar',
data: {
labels: {{ competenceCleTitle|json_encode|raw }},
datasets: [
{
backgroundColor: "#F79646",
borderColor: "#f59c1a",
pointBackgroundColor: "#f59c1a",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#f59c1a",
pointRadius: 0,
data: {{ competenceCleNiveau|json_encode|raw }}
}
]
},
options: {
legend: {
display: false
},
responsive: true,
scale: {
reverse: false,
ticks: {
display: false,
maxTicksLimit: 8,
stepSize: 1,
beginAtZero: true,
max: 5
}
}
}
});
</script>
I have drawn a line chart using chart.js. For the labels and datasets i am getting values from the database. I am new to chart.js and its very powerful library, yet i am unable to completely understand it. I want to draw multiples horizontal lines. Like where if mean of dataset, standard deviation and min and max. I have tried the question here in stackoverflow but these are giving errors or may be i am not able to understand the working. This is my chart.js code
function display_graph(id, label, data) {
var ctx = document.getElementById(id);
var data = {
labels: data.labels,
datasets: [
{
label: label,
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderWidth: 1,
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: data.assay_value,
spanGaps: false
}
]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: label,
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
var Blanks_Chart=null;
Blanks_Chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});}
You could use the chart.js annotation plugin to easily draw lines on your chart without having to mess with rendering pixels in your canvas manually (the old approach that is giving you errors). Note, the plugin is created/supported by the same team as chart.js and is mentioned in the chart.js docs.
Here is an example codepen demonstrating creating a line on a chart.
Once you add the plugin, you simply just set annotation properties in your chart config. Here is an example.
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February"],
datasets: [{
label: 'Dataset 1',
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: [2, 10]
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Draw Line On Chart'
},
tooltips: {
mode: 'index',
intersect: true
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 5,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 4,
label: {
enabled: false,
content: 'Test label'
}
}]
}
}
});
if you want to draw threshold line,easiest way is that using mixed line chart.
Note: Make an array filled with threshold value and the length should be same as your dataset.
var datasets = [1, 2, 3];
var ctx = document.getElementById('chart').getContext('2d');
var thresholdValue = 2;
var thresholdHighArray = new Array(datasets.length).fill(thresholdValue);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [
{datasets}, thresholdHighArray]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Readings'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Reading ( °C )'
}
}]
},
annotation: {
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
borderColor: "red",
label: {
content: "",
enabled: true,
position: "top"
}
}
]
}
});
};
If you are using the NPM package chartjs-plugin-annotation.js, the important thing - which you may forget, is to register the plugin.
So first of all you installed the npm packages (here for React):
npm i react-chartjs-2 (depends on your framework)
npm i chartjs-plugin-annotation (always required)
See Vue.js or Angular for their framework depending packages.
Option 1: Global plugin registration
import { Line } from 'react-chartjs-2';
import Chart from 'chart.js';
import * as ChartAnnotation from 'chartjs-plugin-annotation';
Chart.plugins.register([ChartAnnotation]); // Global
// ...
render() {
return (
<Line data={chartData} options={chartOpts} />
)
}
Option 2: Per chart plugin registration
import { Line } from 'react-chartjs-2';
import * as ChartAnnotation from 'chartjs-plugin-annotation';
// ...
render() {
return (
{/* per chart */}
<Line data={chartData} options={chartOpts} plugins={[ChartAnnotation]} />
)
}
chartData is equivalent to the data: { section and chartOpts to options: { from jordanwillis answer. See this github post for further information.
There are many other plugins available for chart.js.
Here's an example of getting it working in a Rails view if you're using it with the Chartkick gem:
<%=
line_chart profit_per_day_chart_path(staff), xtitle: 'Day', ytitle: 'Profit',
library: {
annotation: {
annotations: [
{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 20,
label: {
content: 'My Horizontal Line',
enabled: true
}
}
]
}
}
%>
Ensure that you've registered the chartjs-plugin-annotation.js plugin with Chart.js first:
import ChartAnnotationsPlugin from 'chartjs-plugin-annotation';
Chart.plugins.register(ChartAnnotationsPlugin);