score:0
there is not problem with option for x-axis.
i bet there is a problem with dataset.
dataset of x and y should be specified.
following snippet will help you.
var ctx2 = document.getelementbyid("mychart2");
var mychart = new chart(ctx2, {
type: "bar",
data: {
datasets: [
{
label: "us dates",
data: [
{
x: "04/01/2014",
y: 175,
},
{
x: "10/01/2014",
y: 175,
},
{
x: "04/01/2015",
y: 178,
},
{
x: "10/01/2015",
y: 178,
},
],
backgroundcolor: "rgba(255, 99, 132, 0.2)",
bordercolor: "rgba(255, 99, 132, 1)",
borderwidth: 2,
},
{
label: "uk dates",
data: [
{
x: "04/01/2014",
y: 143,
},
{
x: "10/1/2014",
y: 175,
},
{
x: "04/01/2015",
y: 165,
},
{
x: "10/1/2015",
y: 178,
},
],
backgroundcolor: "rgba(99, 255, 132, 0.2)",
bordercolor: "rgba(99, 255, 132, 1)",
borderwidth: 2,
},
],
},
options: {
responsive: true,
title: {
display: true,
text: "chart.js time scale",
},
scales: {
xaxes: [
{
type: "time",
position: "bottom",
time: {
displayformats: { day: "mm/yy" },
tooltipformat: "dd/mm/yy",
unit: "month",
},
},
],
yaxes: [
{
scalelabel: {
display: true,
labelstring: "value",
},
},
],
},
},
});
Source: stackoverflow.com
Related Query
- My charts doesn't work after inserting X-axis
- Code doesn't work after updating chart.js versioning
- everything i put in the options of the Line charts doesnt work
- How do I put this on Real-Time? I already put (async: True) but it doesnt work
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- Charts js and laravel: Render chart after passing in json data
- Charts.js scales yaxes ticks min max doesnt work
- ChartJs - Adding padding after Y- Axis
- How to align vertical axis area on two charts in chart.js
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- ChartJS - aligning axis labels after rotation
- JavaScript implementation doesnt work (Chart.js)
- Ng2 charts - Animation doesn't work on line chart onInit
- Update chart axis labels after hover - chart.js
- Leaflet polygon display charts after click
- ChartJS tooltip values aren't matching the data after updating multiple charts
- VueJS + Chartjs - Chart only renders after code change
- Chartjs Overlap click function doesnt work
- How to draw vertical axis in google charts
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Chart.js after ajax refresh there are two charts in the same container (new and old)
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- How to run Chart.js samples using source code
- Chartjs charts drawing with the same colour after update
- How to add axis titles in chart.js charts
- angular-charts.js doesnt work with ionic
- how to not repeat code while creating multiple charts in chart js
- I'm unsure of how to get vue js and charts js to work together. correctly
More Query from same tag
- Displaying ChartJS tooltip on mouseover of bar/line
- Align rotated text to left of canvas
- Chart.js configuration
- pie chart label undefined ionic 3
- ChartJS: How to add empty values?
- Chartjs cannot read property datasets of undefined
- Chart.js Line-Chart with different Labels for each Dataset
- Changing chart data dynamically with C# from SQL database
- How to add labels for only some of the data point?
- ASP.NET Core Razor Pages - Get List Data to Display on Chart.js Graph
- Chart.js glitches and reverts to previous dataset on hover
- Chart.js - add gradient instead of solid color - implementing solution
- Why Chart.js v2 time based data not aligning with X axis correctly?
- How can I append a calculated value to the end of a bar in Chart.JS?
- Javascript and Chart.js not taking user input assuming it is a variable scope issue
- JS import updated JSON file for use with ChartJS
- Configure Pie Chart Colors Using Chart.js and PHP
- SAPUI5 using chart.js
- Accessing data from the callback function of a bar chart using chart js
- Render labels only when the data is available for a particular label
- How to provide empty values for Chart.js data?
- chartjs-plugin-annotation box in Django app
- Data of same dataset don't have the same color in chartjs
- Generate PDF from HTML page made with Bootstrap and ChartJS in Laravel
- Chart.JS not working in Xpages, chart not defined errror
- Prevent label of another data from being toggled whenever a label from one data is toggled
- A chart Js error issue are occured in my Laravel other page?
- Problem in passing values using props in react.js while using chart.js
- In react hooks, how can i pass the filtered values to the chart?
- Chart js loading screen