score:9
you can check the length of your labels (or data) arrays and add dummy non-renderable points to the left and right by using empty string labels and null value, like so
var chartdata = {
labels: ['', "a", ''],
datasets: [
{
fillcolor: "rgba(255, 52, 21, 0.2)",
pointcolor: "#da3e2f",
strokecolor: "#da3e2f",
data: [null, 20, null]
},
{
fillcolor: "rgba(52, 21, 255, 0.2)",
strokecolor: "#1c57a8",
pointcolor: "#1c57a8",
data: [null, 30, null]
},
]
}
fiddle - https://jsfiddle.net/pf24vg16/
score:0
wanted to add to the above answer and say that i got a similar effect on a time series scatter plot using this:
if (values.length === 1) {
const arrcopy = object.assign({}, values);
values.unshift({x: arrcopy[0].x - 86400000, y: null});
values.push({x: arrcopy[0].x + 2 * 86400000, y: null});
}
that only handles for a single point, however. to add in functionality for multiple points, i did the following:
const whether = (array) => {
const len = array.length;
let issame = false;
for (let i = 1; i < len; i++) {
if (array[0].x - array[i].x >= 43200000) {
issame = false;
break;
} else {
issame = true;
}
}
return issame;
}
if (values.length === 1 || whether(arr[0])) {
const arrcopy = object.assign({}, values);
values.unshift({x: arrcopy[0].x - 86400000, y: null});
values.push({x: arrcopy[0].x + 2 * 86400000, y: null});
}
you might notice i'm just subtracting/adding a day in milliseconds into the x values. to be honest, i was just having the worst of times with moment.js and gave up haha. hope this helps someone else!
note: my code has a tolerance of 43200000, or 12 hours, on the time. you could use moment.js to compare days if you have better luck with it than i did tonight :)
score:0
for your specific problem, try to modify the options->scales->xaxes option like so:
options: {
title: {
display: true,
text: 'mytitle1'
},
scales: {
xaxes: [{
type: 'linear',
ticks: {
suggestedmin: 0,
suggestedmax: (11.12*2),
stepsize: 1 //interval between ticks
}
}],
more info at: chart js: ignoring x values and putting point data on first available labels
score:22
instead of hardcoding the labels and values with blank parameters, use the offset
property.
const options = {
scales: {
x: {
offset: true
}
}
}
documentation: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#common-options-to-all-cartesian-axes
Source: stackoverflow.com
Related Query
- Chartjs linechart with only one point - how to center
- ChartJS - Line chart issue with only 1 point
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- Chartjs Radar chart - How to dynamically highlight one of the gridlines at a specific point
- Chartjs chart with only one axis
- How to Change the Y axis of an Primefaces 7.0 ChartJS Linechart with Java?
- chart.js - how to draw and manage line when only one label present in chart js Linechart
- How to display a progress over time in one horizontally stacked bar with chartjs
- ChartJS with React: Only one value showing on time chart
- Auto center ticks and values on graph when there's only one with chart.js
- how to change size of point in ChartJS
- ChartJs 2.0 How do I obtain point information being clicked upon?
- line chart with {x, y} point data displays only 2 values
- How to fix chart Legends width-height with overflow scroll in ChartJS
- How to display Line Chart dataset point labels with Chart.js?
- How to display value of only one datapoint in line chart
- How to change the color of legend in chartjs and be able to add one more legend?
- How to add an empty data point to a linechart on Chart.js?
- Draw two plots using chartjs over one another with transparency
- How to display only one label in a multi line char?
- How to customize Title position with ChartJS
- Chart.js LineChart how to show only part of dataset and support horizontal scrolling
- how to get React chartjs to resize back down with window
- How to work out Chartjs using TypeScript with Chartjs.definitelyTyped from github
- How to add ChartJS code in Html2Pdf to view image
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- How to Change the Label Strike-Through with light gray on a ChartJS Doughnut?
- How to remove bars for those bars with zero value in Chartjs bar chart?
- How can I change color of only one column in Barchart using Chart.js
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
More Query from same tag
- ChartJS Tooltip Customization
- JavaScript doughnut chart with centered hover label
- change date format in tooltip of chart.js
- How to use segment property to color line / border color based on value in chart js?
- ChartJS - Time graph from JSON
- Using data from model in Chart.js MVC c#
- Chart.js not being displayed inside Jquery Dialog
- Chart.js: Is it possible to get the label of a dataset in a stacked bargraph on clicking it?
- Chart js - Get bar width after render
- Return 0 as data for months with no data
- How to create a chart.js scatter chart with data from two lists
- Remove/Hide (display:none) the graphical chart in small-mobile view - JS chart
- How to show percentage (%) using chartjs-plugin-labels ( Pie chart ) in angular 2/8
- Is there an option in chart.js to hide values in the graph legend
- Extend chart.js in PHP heredoc causes parse error
- How to generate PDF with Chart.js
- Could not find elementById on mat-card-content
- How can I change color of only one column in Barchart using Chart.js
- Isn't draws vertical line on hover when I move cursor fast
- angular-chart.js bar chart with 100% opacity color
- How to filter chart.js by month
- How to customize chart using chartJs?
- ChartJS set default options only to specific Canvas, not globally
- ChartJS automatically scaled chart has undefined min and max
- Usage of ChartJS v3 with TypeScript and Webpack
- Chart.js v3 Fade Animation in delay
- Chartjs adding icon to tooltip and label
- How to convert a bar legend to line legend in chart.js 2.7.2?
- Mulitple canvas-images (by Chart.js) with toDataURL()
- Setting axis scales in ChartsJS