score:0
Please try data:
[ {x: '2016-05-11 12:00:00', y: 'Mon', r: 15}, {x: '2016-05-11 20:00:00', y: 'Sat', r: 20}, {x: '2016-05-11 05:00:00', y: 'Wed', r: 5} ]
Instead of data:
[{x: 2,y: 0,r: 15},{x: 3,y: 1,r: 19}, {x: 5,y: 2,r: 15}, {x: 4, y: 3,r: 18}]
score:2
This is possible in ChartJS, and will work with the given code once a couple issues are fixed:
- The options config, containing the scales, is within another options object. This means the options in this second layer will not take effect.
Changing this
options: {
responsive: true,
title: {
display: true,
text:'Weekly activity'
},
options: {
scales: {
yAxes: [{
// will this create y-axis with days of week?
type: 'Category',
position: 'bottom',
ticks: {
ticks.min: "Mon",
ticks.max: "Thu"
}
}],
xAxes: [{
type: 'time',
time: {
displayFormats: {
minute: 'hh:mm a'
}
}
}]
}
}
}
to this (by removing the excess options
block)
options: {
responsive: true,
title: {
display: true,
text:'Weekly activity'
},
scales: {
yAxes: [{
// will this create y-axis with days of week?
type: 'Category',
position: 'bottom',
ticks: {
ticks.min: "Mon",
ticks.max: "Thu"
}
}],
xAxes: [{
type: 'time',
time: {
displayFormats: {
minute: 'hh:mm a'
}
}
}]
}
}
remedies this issue.
The scale type of the x-axis is
Category
, which is not a recognized ChartJS scale type only because of the capital letter. Renaming the type to its lowercase partner,category
, allows it to be recognized by ChartJS.The tick options are set incorrectly, and are also invalid property names, which stops ChartJS from functioning.
Documentation says the tick values tick.min & tick.max must be in the Labels array.
As of now, ticks.min
and ticks.max
are optional for category scales. However, if you would like to continue to use ticks.min
and ticks.max
, you could do this:
Change
ticks: {
ticks.min: "Mon",
ticks.max: "Thu"
}
to
ticks: {
min: "Mon",
max: "Thu"
}
Although it was not as clear as it could have been in the official documentation, this is what is meant when the options ticks.min
and ticks.max
are specified - instead of having the previous ticks.ticks.min
, we can now access our settings at ticks.min
.
- The labels set for the
category
axis currently affect all axes instead of only the y (category) axis. We can fix this by settingyLabels
instead oflabels
, as shown in the documentation.
Change
labels: ["Mon", "Tue", "wed", "Thu"],
to
yLabels: ["Mon", "Tue", "wed", "Thu"],
- Having both the x and y axes on the bottom produces a garbled chart. This can be remedied by moving the y-axis back to the left.
Change
type: 'category',
position: 'bottom',
ticks: {
to
type: 'category',
position: 'left',
ticks: {
It now looks something like this:
We now have a working bubble chart! The y-axis shows days of the week, and the x-axis shows a time value formatted in 'hh:mm a'. Here is the sample completed codepen: http://codepen.io/albinodrought/pen/VmNwoj
In response to the reasoning for this way of graphing,
(only because Chart.js allows timescale only on the x axis)
There also seems to be workarounds for plotting timescale values on the y-axis: ChartJS issue #2791
Mainly, setting the y-value of your datapoints to a time-formattable value (epoch), and then changing the callback of your y-axis to format those values. See the ChartJS docs for setting tick callbacks.
Source: stackoverflow.com
Related Query
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- Chart.js bar chart with time on X axis and category on Y axis is not rendered
- ChartJs line chart time cartesian axis number of ticks and wierd offset
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chartjs time cartesian axis adapter and date library setup
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Display Time In Y Axis - Bubble Chart
- How to set a time scale to a ChartJS chart from JSON?
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- 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
- ChartJS Tooltips with time axis and multiple datasets
- ChartJS Bar chart with time scale - Bars overlap with each other
- ChartJs - width scale of chart area and label area
- Creating a real time line chart using chartjs and firebase realtime db
- In Chart.js set chart title, name of x axis and y axis?
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How to prevent first/last bars from being cut off in a chart with time scale
- chartjs : how to set custom scale in bar chart
- chartjs datalabels change font and color of text displaying inside pie chart
- show label in tooltip but not in x axis for chartjs line chart
- Chart JS - set start of week for x axis time series
- time series stream, removing am/pm on x axis and 24 hour format
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js Dynamically Updating Chart with X Axis Time
- chartjs - top and bottom padding of a chart area
- Chartjs 2: Multi level/hierarchical category axis in chartjs
- How to hide the y axis and x axis line and label in my bar chart for chart.js
More Query from same tag
- create different labels for different data chart js
- I cant get Legend to work for my chartjs donut chart
- Strange "padding" at chart area after updating chart.js (2.8.0 -> 3.4.1)
- Export chart and table both to pdf
- Chart.js 2.x - How to get handle of only clicked datapoint?
- Why is chartjs treating these arrays differently?
- Chart.js Update to X Axis Not Updating
- How to make Laravel Charts
- How to remove excess lines on X axis using chartjs?
- ChartJS pie chart with simple parsing options doesn't render, only works when set as bar/line chart
- Chart.js : Is there a way to name each bubble in chart?
- Django and Chart.js Not Rendering Graph Correctly
- How to put arguments in a jchart.Chart class
- HTML in Chart.js labels
- ChartJs how can I move bar into new group?
- How to make dynamic chart with the next view? What libraries allows to customise exactly this like in my design?
- chart.js v2: Align time scale labels with the center of the bars
- Angular ChartJs colors option not working
- Chart.js stacked bar chart in opposite direction
- Chart.js sciptable options: accessing the values of the data object?
- charts js, doughnut chart not rendering tooptips correctly
- How can I display the percentage symbol inside the chartjs?
- how to pass function variable from one file to another in react
- Chart Js - Globally set bar chart color based on value
- How to specify hover color angular-chart.js
- re-creating an animated graph in javascript with charts.js
- How to Sum values from different objects in Django?
- How to expand the "Y" scale of the data in chart.js?
- chart.js break line in a label with a tooltip callback
- How do you set pie chart colors in angular-chart.js