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
- Why is my data on chartjs not starting from the data that it should
- Parse a JSON object to ChartJS
- How to apply gradient color in chart.js?
- Chart.js - tooltips issue with multiple charts
- Who knows why I can't plot my chart properly?
- How to change colors in react charts
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- How to get rid of the white square outline or border in the tooltip for chartjs?
- angular-chart.js custom color based on chart label values
- how to show only each 15th x-labels in line chart chart.js in angular 6?
- Showing a duration of time within a Chart.js chart
- How to include chart js annotations in ember?
- How do I display a different chartjs tooltip title?
- Chart.js bubble chart pointStyle not working
- Change List<Object> into List<List<int>> using LINQ
- Remove the vertical line in the chart js line chart
- Chart.js sciptable options: accessing the values of the data object?
- How to get Chart js labels in scientific notation
- How to include many datapoints to plot in chart.js
- Svelte , pass data to chartjs from API
- How to shade a portion of the background of ChartJS bubble chart?
- Chartjs bar-chart does not render when values are equal
- chart js Labels and Grouping labels
- How to create multiple series on dx-Chartjs
- why does my chart.js barograph order by whole numbers and then floats?
- angular chartjs not showing data properly
- ChartJS AJAX Javascript
- ChartJS passing data dynamically, then passing data into variables
- Chart.js tooltip at any point on the chart
- How to remove a vertical line from the canvas of react-chartjs-2?