score:7
Accepted answer
The Mixed Chart Types documentation doesn't explicitly state it, but it seems the base chart must be type bar
and then datasets switched to line
.
var dates = ['a', 'b', 'c', 'd', 'e', 'f', 'h'];
var open = [1,2,3,4,2,5,1];
var high = [7,4,3,3,3,4,6];
var low = [7,2,2,4,7,6,3];
var close = [9,5,3,4,2,3,4];
var volume = [4,2,1,5,3,6,8];
var ctx = document.getElementById("QGL_Chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: data = {
labels: [dates[0], dates[1], dates[2], dates[3], dates[4], dates[5], dates[6]],
datasets: [
{
type: 'line',
label: "Open",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(75, 214, 238)',
borderColor: 'rgb(75, 214, 238)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(75, 214, 238)',
pointBackgroundColor: 'rgb(75, 214, 238)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(75, 214, 238)',
pointHoverBorderColor: 'rgb(75, 214, 238)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [open[0], open[1], open[2], open[3], open[4], open[5], open[6]],
},
{
type: 'line',
label: "High",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(210, 221, 72)',
borderColor: 'rgb(210, 221, 72)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(210, 221, 72)',
pointBackgroundColor: 'rgb(210, 221, 72)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(210, 221, 72)',
pointHoverBorderColor: 'rgb(210, 221, 72)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [high[0], high[1], high[2], high[3], high[4], high[5], high[6]],
},
{
type: 'line',
label: "Low",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(238, 79, 75)',
borderColor: 'rgb(238, 79, 75)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(238, 79, 75)',
pointBackgroundColor: 'rgb(238, 79, 75)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(238, 79, 75)',
pointHoverBorderColor: 'rgb(238, 79, 75)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [low[0], low[1], low[2], low[3], low[4], low[5], low[6]],
},
{
type: 'line',
label: "Close",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(28, 175, 154)',
borderColor: 'rgb(28, 175, 154)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(28, 175, 154)',
pointBackgroundColor: 'rgb(28, 175, 154)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(28, 175, 154)',
pointHoverBorderColor: 'rgb(28, 175, 154)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [close[0], close[1], close[2], close[3], close[4], close[5], close[6]],
},
{
label: 'Volume', //1D2939
yAxisID: 'y-axis-b',
data: [volume[0], volume[1], volume[2], volume[3], volume[4], volume[5], volume[6]],
barPercentage: '1',
categoryPercentage: '1',
backgroundColor: 'rgb(29, 41, 57)',
borderColor: 'rgb(29, 41, 57)',
borderWidth: '1',
borderSkipped: 'bottom',
hoverBackgroundColor: 'rgb(29, 41, 57)',
hoverBorderColor: 'rgb(29, 41, 57)',
hoverBorderWidth: '3',
},
]
},
options: {
title: {
display: true,
text: 'Share Price - Past 7 Days',
fontSize: '20',
fontFamily: 'Open Sans, sans-serif',
// fontColor
// fontStyle
// padding
// lineHeight
},
scales: {
xAxes: [{
ticks: {
min: 0
}
}],
yAxes: [{
position: "left",
id: "y-axis-a",
}, {
position: "right",
id: "y-axis-b",
}]
}
}
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="QGL_Chart"></canvas>
Source: stackoverflow.com
Related Query
- Chart.JS Mixed Chart - Bars Not Showing
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- Mixed chart not showing both charts simultaneously chart.js
- Chart.js ng2-charts colors in pie chart not showing
- Bootstrap modal showing when clicking individual points in Linechart but not in individual bars in Barchart
- Series Details Not Showing in Angular Chart with Charts.js
- Chart.js pie chart not showing in Google Chrome canvas
- Chart JS custom tooltip not showing
- Chart JS not showing On hover with small data
- Chart.js tooltip not showing on line chart
- ChartJS: Horizontal Bar with multiple datasets not showing Bars
- chart annotations not showing in Angular 2
- chart js chart bar chart not showing data from 0
- Chart JS not showing all data
- vue-chart.js : Data available as computed properties, but not showing in chart
- Chart.js not showing value on top of bars
- Chart JS - Grid colors and gradient fill not showing
- Alternating bars in bar chart in chart.js are not labelled
- chart js and json, chart not showing up
- Mixed Chart calculating difference between two bars - ChartJS
- The chart list is not showing
- chart.js one of the chart from mixed chart is not plotting
- Align lines and bars in a mixed chart
- ChartJS not showing data for time series bar chart
- Javascript not showing up total value in middle of Oracle APEX Donut chart
- Chartjs not showing chart
- Chart.js colors in bar chart not showing
- ChartJS + jQuery = Chart not showing
- React Native Chart not showing data
- Resetting transform: rotate() by removing and appending canvas not showing data after appending and redrawing chart
More Query from same tag
- Chart.js displaying time data
- chartjs doesn't render dates properly
- How to pass dynamic values as objects inside data in line chart?
- chartnew.js - remove lines from pie chart on 100%
- ChartJS do not render any legend if the label is falsy
- How to drill down charts with ChartJS?
- Chart.js, how to reduce space between labels and bars (horizontal bar chart)
- Using sticky figures above bars in chart.js
- Avoiding Empty Curly Braces in MongoDB Aggregation
- How to know which bar is clicked on chart.js bar chart with multiple data?
- How to remove Chart.js legend
- Using ChartJS to create a multiple grouped bar chart - see picture below
- Chartjs doesn't update dataset label on tooltips
- Chart.js Ionic 2 Angular2: Background color of bar graph not changing
- Angular PrimeNG Chart Module: Customize hover text
- Data not displaying properly in Chart.js line chart
- Outputting multiple SQL queries in chart.js
- Stepped line with null values in chart.js
- Chart.js coming up as blank
- angular-chart error on line chart: unable to parse color
- How to fit Doughnut Chart JS into Bootstrap column?
- ChartJS how to generate custom legend?
- Angular 2 ng2-charts doughnut text in the middle disappears on mouse hover
- Laravel trying to display chart on welcome page
- ChartJs bar not showing up
- Javascript highcharts code similar to image
- Reducing Y-axis in chart.js
- Created an onclick function to remove data from a line chart in ChartsJs, but getting "Cannot read property 'data' of undefined" error
- Setting Common labels and background color common for all the charts in ChartJs
- Vue-chartjs not rendering chart until page resize