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
- How to get the index of the barchart label that has been clicked with react-chart js-2?
- How to only have a Y axes representing data in chart.js
- Type 'string' is not assignable to type 'ChartType'
- Chart.js with JSON data error
- In chart.js, how to know if a yAxes tick is bumping/rendering over/into another
- Chart.JS Can not read property '_meta' of Undefined
- charts.js update global variables
- Chartjs x axis scaling
- Adding custom title in tooltips of chart.js
- How to increase the ghap between catergories or labels react-chartjs-2
- TypeError React-Chartjs After Upgrading to Chart.js v3
- Passing Global Options to line Chart in 2.1.6/Chart.js
- ChartJS tooltip issue
- How to compute x,y values from a click event using x,y pixel coordinates in ChartJS?
- Chart Is Not Created
- Chart.js nuget Package with angularJS
- charts.js tooltips on different data ranges
- Chart JS not displaying graph
- How to custom legend with react-chartjs-2
- How to externally trigger datalabels-plugin (active) - ChartJS
- How do I change the colours of specific labels in ng2-charts?
- How to set responsive width and height of canvas?
- How to sum/divide array values in chart.js?
- How to retain spacing between bars for two different bar charts in Chart.js 2
- Chart js update multiple charts
- How to put back the data with a switch?
- how to decrease white space of a card containing pie-chart in mobile view
- Creating and Updating Graph in HTML and Javascript
- animation of a graph of an equation javascript
- Is it possible to set up 0 as a minimum number for bar chart? react-chart.js-2