score:12
Unfortunately, there isn't a way to "configure" the chart to achieve what you want. It all has to do with how the line chart scale drawing works. With that said, you can still achieve this behavior by tricking chart.js using some "dummy" data.
Basically, you create a "dummy" first and last label. Then add a corresponding "dummy" first and last value to your bar data array (this data will never be displayed). Then add a corresponding "dummy" first and last value to your line data array, but make sure you set the value the same as the next/prev value to end up with a straight line (otherwise your line will angle at the beginning and end). Here is what I mean.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['dummy1', 'Jan 21st', 'Feb 21st', 'Mar 21st', 'Apr 21st', 'dummy2'],
datasets: [
{
type: 'bar',
label: 'A',
// the 1st and last value are placeholders and never get displayed on the chart
data: [0, 10, 25, 18, 37, 0],
},
{
type: 'line',
label: 'B',
// the 1st and last value are placeholders and never get displayed on the chart
// to get a straight line, the 1st and last values must match the same value as
// the next/prev respectively
data: [25, 25, 25, 25, 25, 25],
fill: false,
borderWidth: 1,
borderColor: '#f00',
borderDash: [5,4],
lineTension: 0,
steppedLine: true
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
// exclude the 1st and last label placeholders by specifying the min/mix ticks
ticks: {
min: 'Jan 21st',
max: 'Apr 21st',
}
}],
}
}
});
Checkout this codepen example to see it in action.
Source: stackoverflow.com
Related Query
- Chart.js - mixing bar and line graphs - can I get the lines to fill the full column?
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- How to hide the y axis and x axis line and label in my bar chart for 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 can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- Chart.js with line chart and bar chart - bar chart not rendered although the max value of it is shown
- How can i launch a modal after clicking each bar in Bar chart in Chartjs and also how can i get its data?
- Chart.js how to get Combined Bar and line charts?
- Chart.js: bar chart first bar and last bar not displaying in full
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js Mixed Bar and Line chart with different scales
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- Remove the label and show only value in tooltips of a bar chart
- chart.js LIne Graphs: Fill area above line as opposed to below and to the right
- Chart js: how can I align the legend and the title
- Can we draw a Line Chart with both solid and dotted line in it?
- ChartJS Line chart cut off at the top and bottom
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- How to get the actual chart width and height in chart.js
- How to show data values in top of bar chart and line chart in chart.js 3
- How can I datalabels and Sum display in the same time on a stacked bar
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- Having problems getting a line chart in Chartsjs to go *up* to 1, with bkg fill *under* the chart line
More Query from same tag
- Chart.js with 2 y-axis
- Unix Timestamp Chart.js with PHP echo
- Error in implementing chart.js in AngularJS
- getting additional value fields from data source for dx.chartjs doughnut chart
- Remove/Hide (display:none) the graphical chart in small-mobile view - JS chart
- How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
- Create a chartjs pie chart using json data
- How to set a global chart.js tooltip label callback
- How to toggle one of multiple y axis on chart.js
- Using Datalabels and ChartJS with Chartjs-node-canvas
- ChartJS dynamic label
- how to set chart.js grid color for line chart
- Using data from API with Chart JS
- How to read and plot json with Chart.js
- chartjs-plugin-streaming + chartjs-plugin-zoom
- int Array with empty value
- Chart JS pass in custom data for points
- How do I use my chart.js line chart with handlebars?
- Mixed chart barchart won't show
- ChartJS pie chart with simple parsing options doesn't render, only works when set as bar/line chart
- How can I display both values as labels when hovering over chart.js
- Chartjs - Stacked bar chart blocking other values
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- error : "Uncaught TypeError: Cannot read property 'length' of null" Chart.js
- How can I add new data points to an existing chart with chart.js?
- How to rotate datalabels in Charts.js with plugins?
- Add Gridlines using ChartKick in Rails
- Map through datasets in chartjs
- How can I display the percentage inside the graph and on hover?
- Method inside Activate in Aurelia