score:6
Accepted answer
need to define the overall chart type, at the top level,
then you change one of the types at the dataset level
new Chart(document.getElementById('myChart').getContext('2d'), {
type: 'bar', // <-- define overall chart type - top level
data: {
labels: x_time,
datasets: [{
type:'line', // <-- define dataset type
...
see following working snippet...
var x_time = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30'];
var y_data1 = ['99.83', '99.86', '99.81', '99.83', '99.72', '99.75'];
var y_data2 = ['56', '41', '53', '46', '70', '60'];
new Chart(document.getElementById('myChart').getContext('2d'), {
type: 'bar', // <-- define overall chart type
data: {
labels: x_time,
datasets: [{
type:'line',
label: 'Data1',
fill:false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: y_data1,
yAxisID: 'left-axis'
}, {
label: 'Data2',
fill: true,
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
data: y_data2,
yAxisID: 'right-axis'
}]
},
options: {
legend: {position:'bottom', usePointStyle:true},
maintainAspectRatio:false,
responsive: true,
title: {display: false},
tooltips: {mode: 'index', intersect: false},
hover: {mode: 'nearest', intersect: true},
scales: {
xAxes: [{display: true, stacked:true, scaleLabel: {display: false, labelString: 'time'}}],
yAxes: [{
type:'linear',
id:'left-axis',
display: true,
position: 'left',
scaleLabel: {display: true, labelString: '%'}
},{
type:'linear',
id:'right-axis',
display: true,
position: 'right',
stacked:false,
scaleLabel: {display: true, labelString: '#'},
gridLines: {drawOnChartArea:false}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
Source: stackoverflow.com
Related Query
- Using custom dataformat in chart.js for Multi Axis Line Chart
- create a multi line chart using Chart.js
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Can't generate multi-axis combo chart (bar/line) using chart.js 2.7
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- Combo Bar Line Chart with Chart.js
- Change Axis Line color in Chart created using chart.js
- display vertical axis label in line chart using chart.js
- How do you set x and y axis and Title for a line chart using charts.js?
- Generate bar chart using chart.js and associative array
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- Django chart.js multi axis line chart
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Double Y Axis + Bar chart combo
- Draw stacked horizontal bar chart with Average line using ChartJS
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- How to generate dynamic bar chart in laravel using chart.js
- How to generate multi bar chart in Chart.js with php & sql
- Combo bar chart graph line gets obscured by bars
- how to add multi X axis custom line in chart js
- How to add vertical line in bar chart using chartJs and ng2-charts?
- combo bar line chart with multiple grouped/stacked datasets
- Moving vertical line when hovering over the chart using chart.js
- How to add an on click event to my Line chart using Chart.js
- Display line chart with connected dots using chartJS
- show label in tooltip but not in x axis for chartjs line chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Overlapping Bar Chart using Chart.js
- How to create stacked bar chart using react-chartjs-2?
More Query from same tag
- Update chart in Chart js
- React js and chart js pie chart type
- ChartJS multiple annotations (vertical lines)
- Chart.Js - Specify x labels to be displayed that is not possible with stepSize option
- Chart.js and Firebase Ionic App Angular 4
- Replace Chart.js Data during `onClick` causes _meta error
- How to display value after the bar using chart.js
- Chartsjs multi-axis, make the scale appear/disappear when the dataset is activated/deactivated
- Error on Chart.js with Electron - Failed to create chart: can't acquire context from the given item
- Setting Common labels and background color common for all the charts in ChartJs
- Chartjs 3.2 problem with setting whole numbers for Y axis
- Make chartjs pie chart wiyh dynamic data
- how to hide specific dataset based on condition chartjs angular
- How to make customized stepSize for each horizontal bar in Chart.js graph
- Chart.js + Angular 5 - Destroy() multiple dynamic charts created through *ngFor loop
- Chartjs Customize Scale Numbers
- Inserting an array in Chart.JS
- Make the X-Axis labels in chart.js increment by a certain scale
- How to implement tooltip mode "single" in Chart.js 3?
- How to plot an equation using ChartJS?
- Javascript Chart: How to hide the data
- Scatterplot with 4 labels (Opposite Diagram) in any js library?
- Dynamically update value for horizontal line in annotation plugin for Chart.js in Angular 5
- How to change x-Axes label position in Chart.js
- how to filter year from datefield in django
- How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?
- Long text in x-axis is cut in bar graphs ng2-charts
- Chart.JS, date issues when upgrading to v3
- Chart.js doughnut canvas padding
- Chart.js doughnut chart tooltip size?