We Keep Coding

Skip dates with no values in chart js

I would like to exclude the dates on the x-axis that has no values. Below is the image of my chart.
What my chart currently looks like
Here is also my current code for the options in chart js
var options = {
responsive: true,
maintainAspectRatio: false,
elements: {
line: {
fill: false
}
},
style: {
strokewidth: 10
},
title: {
display: true,
position: 'top',
fontSize: 18,
padding: 20
},
scales: {
xAxes:[{
ticks: {
z: 0,
autoskip: false,
callback: function(value, index, values){
return new moment(value).format('L');
}
},
type: 'time',
time: {
unit: 'week'
},
scaleLabel: { display: true,
labelString: 'Date'}
}],
yAxes: [{
ticks: { beginAtZero:true ,
min: 0,
max: 5 } ,
scaleLabel: { display: true,
labelString: 'Skill Rating'}
}]
}
};
I hope you guys can help me. Thanks!

When you pass your series/data to your chart, filter it
let data = [...];
data = data.filter(v => v[0] && v[1]);

Setting ag grid standalone chart min x axis value doesnt work

Im trying to explicitly set the min value for the x axis but for some reason the chart still uses 0 instead of the value im providing.
standAloneChartOptions = {
container: document.getElementById('myChart'),
autoSize: true,
data: someData,
series: [
{
xKey: 'foo',
yKey: 'bar',
yName: 'Bar',
stroke: '#03a9f4',
marker: {
fill: '#03a9f4',
stroke: '#0276ab',
},
tooltipEnabled: false,
}
],
axes: [
{
type: 'number',
position: 'top',
title: {
enabled: true,
text: 'Foo'
},
min: 50,
max: 1000,
tick: {
count: 20
}
},
{
type: 'number',
position: 'left',
},
],
legend: {
position: 'bottom',
},
};
the max value is set accordingly so im confused as to what im doing wrong, would much appreciate the help, thanks!

Chartjs fixed range on X axis and custom labels

I'm trying to create a scatter plot with Chartjs.
I want to have few datasets centered around one X value, and three Y values.
When I can't set the custom X labels for my dataset, and also can't set a fixed range for X axes.
This is how I generate the data:
function generateData(n, xCenter, yCenter) {
var data = [];
var spread = 0.2
for (var i = 0; i < n; i++) {
data.push({
x: (Math.random() - 0.5)*spread + xCenter,
y: (Math.random() - 0.5)*spread + yCenter
})
}
return data
}
var scatterChartData = {
datasets: [
{
label: 'My First dataset',
backgroundColor: "#0000FF",
data: generateData(100, 1, 2)
},
{
label: 'My Second dataset',
backgroundColor: "#00FF00",
data: generateData(50, 1, 3)
},
{
label: 'My Second dataset',
backgroundColor: "#00FF00",
data: generateData(50, 1, 4)
},
]
}
Here are the scatter options:
var scatterOptions = {
tooltips: {
enabled: true
},
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false,
ticks: {
min: 0,
max: 10,
stepSize: 0.01
}
}
}],
yAxes: [{
gridLines: {
display: true,
ticks: {
stepSize: 0.01,
suggestedMin: 0.5,
suggestedMax: 5
}
}
}]
}
}
And this is the plot:
var myChart = new Chart(ctx, {
showTooltips: false,
type: 'scatter',
data: scatterChartData,
options: scatterOptions
});

Changing fontFamily on ChartJS bar chart

I've partially implemented ChartJS in a project, but I can't figure out how to change the font that's displayed on the X and Y axes of a bar chart.
I've read the ChartJS documentation, searched for examples on GitHub, etc. I'm not sure what I'm doing wrong, but I rest assured knowing the solution will involve a line of code and will be a startlingly stupid oversight on my part.
This code draws the chart I want, but with the default font:
var barChartLanguage = Chart.Bar(myCanvas, {
data: dataLanguages,
options: options,
defaults: defaults
});
I tried changing the font in the defaults without success:
var defaults = {
global: {
// example font
defaultFontFamily: "'Raleway'"
}
};
And I tried changing it on the axis with options:
var options = {
animation: {
duration: 2000
},
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, // minimum will be 0, unless there is a lower value.
// OR //
beginAtZero: true, // minimum value will be 0.
suggestedMax: 10
},
gridLines: {
display: false
},
pointLabels: {
fontFamily: "'Raleway'"
}
}],
xAxes: [{
gridLines: {
display: false
}
}],
},
};

Add ticks.fontFamily to xAxes so it will look like this:
xAxes: [{
gridLines: {
display: false
},
ticks: {
fontFamily: "Verdana",
}
}],
Documentation: http://www.chartjs.org/docs/#scales
Example on jsfiddle: http://jsfiddle.net/4asLpwd5/

From version 3.x, onwards the syntax was changed.
Chart.js migration guide: 3.x Migration Guide
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
responsive: true,
plugins: {
legend: {
display: false,
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
font: {
family: 'Raleway', // Your font family
size: 14,
},
},
},
y: {
beginAtZero: true,
ticks: {
font: {
family: 'Raleway', // Your font family
size: 14,
},
// Include a dollar sign in the ticks
callback: function (value, index, values) {
return '$' + value;
},
},
}
}
}
});

how to change the position of HighCharts.js scatterplot marker position

Please refer to JSFIDDLE
I want the value of var x1 (i.e, var x1 = 10;) should be change the moment i change the range slider which is::
document.getElementById("range").innerHTML
Please suggest.

Here is a simple solution for your question:
http://jsfiddle.net/La9s2cp4/5/
var chart;
function createChart(){
// Set up the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
}
}
},
title: {
text: 'Draggable box'
},
subtitle: {
text: 'Click and drag the plot area to rotate in space'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10,
showFirstLabel: false
},
legend: {
enabled: false
},
series: [{
name: 'Reading',
marker: {
radius: xdata
},
colorByPoint: true,
data: [dataG.data1, dataG.data2, dataG.data3]
}]
});
}