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
- Chartjs stacked bar single max value
- Chart.js not showing in Android 8.0/Android O
- How to set and adjust plots with equal axis aspect ratios - CHART.js
- JavaScript. Find the sum of a certain parameter in an array to produce a popup if that sum == 0
- Using map reduce in javascript
- Sort a Chart from Lowest to Highest Value in Chart JS
- How to make chart which has both positive and negative value, starts with 0 - x axis
- chart.js number of labels equal to number of datapoints
- Changing color of specific chartjs point
- Chart.js - Unable to refresh the page
- Unable to access data in collection for chart.js
- Impossible to render multiple charts with chart.js
- Angular chart.js chart scale
- Is there a way to change color of a chart's grid in y-axis - ng2-charts
- Can I make a horizontal bar chart with two category axes?
- Add watermark/logo to Chart.js
- Add bar chart in a column
- Line ChartJS empty / null values doesn't break the line
- Handling data over lapping in chart.js
- React and chart.js with json
- Chart.js not showing when i try to format dates
- Problem with changing string to date with time
- Formatting axis labels using ChartsJS
- How can I filter these data per month?
- Angular charts is not displayed
- chart.js fixed bar width issue
- Call ChartJS details in main Javascript file
- Load data from a JSON object into an array
- ng2charts using borderColor with array value
- Chart.js horizontal bar width