score:5
Accepted answer
You can achieve your goal passing data as points, configuring xAxes
as linear and creating a custom tick format:
Data:
var chartData = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [
{
data: [{x: 1, y: 12}, {x: 2, y: 3}, {x: 3, y: 2}, {x: 4, y: 1}, {x: 5, y: 8}, {x: 6, y: 8}, {x: 7, y: 2}, {x: 8, y: 2}, {x: 9, y: 3}, {x: 10, y: 5}, {x: 11, y: 11}, {x: 12, y: 1}];
}
]
};
xAxes config:
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
max: 12,
min: 1,
stepSize: 1,
callback: function(value, index, values) {
return chartData.labels[index];
}
}
}]
Check the CodePen updated: https://codepen.io/beaver71/pen/XVZXOM
Source: stackoverflow.com
Related Query
- chartjs - Drawing vertical line on integer x axis value
- Map event position to y axis value in chartjs line chart
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- ChartJS - Y Axis line not drawing
- Chart.js — drawing an arbitrary vertical line
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- show label in tooltip but not in x axis for chartjs line chart
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- Obtain max value of y axis of line chart rendered with Chart.js
- How to render a vertical line on hover in chartjs
- How do I fix over limit y axis value in ChartJS
- ChartJS vertical line not removed on touchend
- Drawing line chart in chart.js placing dots only when value changes
- chartjs Line chart: scale respect value on x-axis
- Chartjs change horizontal axis value
- Chart.JS Vertical Line with Moment.JS Horizontal Axis
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- Chartjs: Need help on drawing a vertical line when hovering cursor
- ChartJS rotate label value vertical
- Specific grid line in X axis in ChartJs
- 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
- How to draw multiple line on y axis for same x axis in chartjs v2?
- display vertical axis label in line chart using chart.js
- Draw vertical line on horizontalBar at value 2.0
- chart.JS i want to put different color for each Y axis value grid line color
- ChartJS - Moving vertical line is display on top of tooltip
- Vertical line using Chart.js annotations plugin with linear scale on x axis
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- Vertical Line chart with ChartJS
More Query from same tag
- Thicker X-Axis with Charts.js
- charts are not being show with wicked_pdf
- chartjs-plugin-zoom not working with my React project
- ChartJS - line graph, position tooltip
- How can I cause a legend to appear to the right of the pie (Chart.JS)?
- How to get 2 doughnut charts in one chart (chartjs)
- How to hide the legend in chart.js in a react project?
- ChartJS: Limit label's length on an axis and show a tooltip on hover?
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- Charts not rendering properly in Angular
- Incorrect chart displayed using chart js
- Chart.js how to set cutoutPercentages for each dataset
- ChartJS separate charts per JSON object, and not when hovered over
- Change value from 0 to something on tooltip only
- Why ChartJS's Bar Chart does not render bar for a specific value?
- Dynamically update values of a chartjs2.0 chart
- Sort one array and keep other two arrays in sync
- Chart.Js pie chart click
- React - How can I pass API data from one component to another in a different js file?
- Is there a convenient way to print values to a JS chart from a CSV file without converting it?
- Cannot read property 'map' of undefined when looking at an array with no index
- Foreground chart by mouse
- Bootstrap 3 tabs & Chart.js - charts not loading on tabs
- Unable to clone a Chart.js chart in a pop up
- Remove Chart.js Gridline Overlap
- Difficult displaying data with linechart in chart.js
- Chart.js Line Chart x-Axes label rounding
- Email a chartjs graph in laravel
- Using two JSON objects to make Chart.JS Bar Chart Dynamic in Typescript / Angular
- ChartJS, Primeng, Gap first and end of line chart