score:15
Accepted answer
Found the answer, the axis for the line graph needs the type specified, like so:
{
id: 'invoice-time',
type: 'linear',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Days'
},
ticks: {
beginAtZero: true,
stepSize: 1,
suggestedMax: 125
}
}
var chartDefault = {
type: 'bar',
data: {
labels: ['30', '45', '60', '90', '120', '120+'],
datasets: [{
type: 'bar',
label: 'Receivable',
data: [730, 492.5, 120, 4732.5, 2760.85, 0],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
type: 'bar',
label: 'Past Due',
data: [2760.85, 0, 0, 0, 0, 0],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}, {
type: 'scatter',
label: 'Invoice',
data: [{"x":106,"y":177.7},{"x":101,"y":1},{"x":92,"y":1},{"x":88,"y":120},{"x":65,"y":4},{"x":66,"y":120},{"x":59,"y":120},{"x":36,"y":372.5},{"x":35,"y":120},{"x":29,"y":120},{"x":4,"y":185},{"x":4,"y":120},{"x":1,"y":240},{"x":1,"y":65}],
xAxisID: 'invoice-time',
yAxisID: 'invoice-amount',
backgroundColor: 'rgba(75, 00, 150, 0.2)',
borderColor: 'rgba(75, 00, 150,1)',
borderWidth: 2
}]
},
options: {
scales: {
xAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Days'
},
}, {
id: 'invoice-time',
type: 'linear',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Days'
},
ticks: {
beginAtZero: true,
stepSize: 1,
suggestedMax: 125
}
}],
yAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}, {
id: 'invoice-amount',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}]
},
}
};
var chart = new Chart($('#creditSat'), chartDefault);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="creditSat"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js Mixed Bar and Line chart with different scales
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js combined line and bar chart with differing data points
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- Chart.js with line chart and bar chart - bar chart not rendered although the max value of it is shown
- How to add second Y-axis for Bar and Line chart in Chart.js?
- chart.js Line chart with different background colors for each section
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- ChartJS - Line Chart with different size datasets
- 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
- Chart.js with dual axis on bar and line graph
- Can we draw a Line Chart with both solid and dotted line in it?
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chartjs with multiple y axes and different scales
- Issue while plotting bar chart with custom x-axis with month and year in chart.js
- Combo Bar Line Chart with Chart.js
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- Dynamic line chart with chart.js and PHP
- Chart.js - Horizontal line on Bar chart interferes with tooltip
- Chart.js Bar and Line chart
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- Bar chart with min height and zero values - ChartJs
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- Mixed bubble chart with line chart in vue-chartjs4
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- Is there any way to remove extra space and Horizontal line from Bar chart of Chart.js?
More Query from same tag
- using data structures in chartjs
- chartjs update() not updating
- How to set a full length background color for each bar in chartjs bar
- Is it able to align line chart at left margin in mixed chart?
- How to give break line in data label
- Show image instead a point in a ChartJS scatter plot
- Drawing line chart in chart.js placing dots only when value changes
- How to distribute the y-ticks proportionally in Chart.js in Flask app?
- Vertical Line chart with ChartJS
- In a Stacked Line Chart, is there a way to stack multiple Y-Axes to match each graphed line?
- Create a pie chart using an array from a data table in chart.js
- Chart.js showing nothing on canvas
- Points cut at half at the edges of top and bottom, at chartjs
- Vue.js using chart.js options not working
- ChartJS Y-Axis scale value wrong
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
- ./~/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js Module not found: Can't resolve 'chart.js/helpers'
- ChartJS dataset onclick deselect the rest
- dynamically fill a json variable
- My chart is not shown on browser screen using chart.js in meteor
- Chartjs Graph is not showing in colorbox
- Extending Existing Chart Types angular chart js using chart js 2.0
- Using data saved as a variable in HTML from Python
- How to use data from database for chart.js (bubble chart) with Ajax/JSON method?
- Chart.js not initiating
- How to solve Uncaught ReferenceError in console?
- Chart.JS does not render and display a sad face icon
- Mulitple canvas-images (by Chart.js) with toDataURL()
- How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs
- ChartJs line chart - display permanent icon above some data points with text on hover