score:0
in chartjs documentation, under "grid line configuration" there is the drawonchartarea option:
name: drawonchartarea
type: boolean
description: if true, draw lines on the chart area inside the axis lines. this is useful when there are multiple axes and you need to control which grid lines are drawn
{
type: 'line',
data: data,
options: {
...
scales: {
xaxes: [{
gridlines: {
drawonchartarea: true
}
]}
}
}
}
score:0
a little late, but hopefully helps someone.
my issue was trying to force a chart with type: 'bubble'
and an x axis with type: 'linear'
to place the labels in the center of the grid lines. the "centering the label" functionality comes standard for an axis with type: 'category'
, like on bar charts. you can get linear point placement with category style labels by having two xaxes
defined and not displaying the linear one.
in this example, points are plotted across a full 365 days, with x axis ticks for each quarter and the quarter label centered within its section of the plot.
data: {
xlabels: ['q1', 'q2', 'q3', 'q4'],
...
},
options: {
scales: {
xaxes: [
{
id: 'xaxis1',
type: 'linear',
display: false,
ticks: {
min: 0,
max: 365,
stepsize: 365 / 4
}
},
{
id: 'xaxis2',
type: 'category',
gridlines: {
offsetgridlines: true
},
scalelabel: {
display: true,
labelstring: 'day of year'
}
}
],
...
}
}
i've used this for chart.js 2.x.
score:1
offsetgridlines (boolean) if true, labels are shifted to be between grid lines.
type: 'line',
data: data,
options: {
...
scales: {
xaxes: [{
gridlines: {
offsetgridlines: true
}
]}
}
}
score:1
test this:
labeloffset:-5 //adjust number
Source: stackoverflow.com
Related Query
- How to align Chart.JS line chart labels to the center
- Chart js. How to align text by the center of the tooltip?
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
- Chart.js how to show cursor pointer for labels & legends in line chart
- How to display Line Chart dataset point labels with Chart.js?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- How to display the labels in doughnut chart using ng2 charts?
- chart.js v2: Align time scale labels with the center of the bars
- Chart js: how can I align the legend and the title
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- chart.js: How do I make the radar chart axis labels bigger?
- How to change the chart line or area colors according to the user need?
- How to change background color of labels in line chart from chart.js?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- how to align count text center in horizontal bar in the Chart.js?
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- How do you make a progressive line chart with time as the X axis?
- How to show the chartjs bar chart data values labels as text?
- How to add labels on top of the chart bar with Chart.js 2
- How to display labels outside the pie chart border?
- How to get rid of the line on top of every point on a line chart (Chart.js)
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
More Query from same tag
- Chart.js - changing tick / label positions for x axis time series
- Plotting jqplot points to a chart.js chart
- TypeError: Cannot read property 'defaults' of undefined when using the react wrapper of chartjs
- How to expand the slice of donut chart in chartjs?
- Have the current zoom information in chart.js with zoom plugin
- ChartJS v2: Scale value at click coordinates (time scale)
- Chart.js canvas and chart width gets overwritten when redrawn
- Graph is not displayed
- Converting JSON data into Chart.js array from strings
- Radar chart - show values near vertices in chart.js
- Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined
- Long text in x-axis is cut in bar graphs ng2-charts
- Chartjs is not showing charts in my Django project
- How could be the best way of implementing a 3D fft chart?
- How to make Chart.js with dynamic months on x-axis
- How to rename properties in objects that are in an array. What is the right way to solve the task?
- Is it possible to add more attributes to segement in a Doughnut chart of Chart JS?
- Use chartjs-plugin-annotation 0.5.7 in Chartjs 2.9.x with React
- Chart.js plot live data
- Angular-Chart.js it doesn't display the chart
- chartjs line graph destroy function is not clearing the old chart instances
- Chart.js Stacked Group Bar model after updating version Chart.js 2.9.4 -> Chart.js 3.5.0
- Show 'No data' in Pie when there is no data using VueJS and ChartJS?
- ChartJS radar-chart hover text
- Set different color for each bars using ChartJS in Angular 4
- Mouse over on line chart data active other data-set in Chart.js
- Is there a way to represent date hole in chartjs time series?
- Always display ChartJS custom tooltips
- How to display small numbers in chart js tooltip?
- Chart.js Radar Labels Coordinates