I'm building a graph using ChartJS and the Alpha-Vantage API. And for the most part, it works as expected.
But this is only if every dataset is plotted as a line-graph (So my data is definitely there).
Thing is, I want my Volume data-set to be bars. For whatever reason, the bars are not showing up on the graph.
The correct scale appears on the right-hand side, but the bars are nowhere to be seen...
I have no errors in my console, and I've tried a few things i've found on StackOverflow but none have seemed to work for me so far - eg. setting the ticks to 0, increasing and decreasing the bar/category percentage. But i've had zero luck.
What am i missing? Have I missed some sort of configuration setting or?
var ctx = document.getElementById("QGL_Chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: data = {
labels: [dates[0], dates[1], dates[2], dates[3], dates[4], dates[5], dates[6]],
datasets: [
{
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]],
},
{
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]],
},
{
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]],
},
{
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
type: 'bar',
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",
}]
}
}
});
I'm building a graph using ChartJS and the Alpha-Vantage API. And for the most part, it works as expected.
But this is only if every dataset is plotted as a line-graph (So my data is definitely there).
Thing is, I want my Volume data-set to be bars. For whatever reason, the bars are not showing up on the graph.
The correct scale appears on the right-hand side, but the bars are nowhere to be seen...
I have no errors in my console, and I've tried a few things i've found on StackOverflow but none have seemed to work for me so far - eg. setting the ticks to 0, increasing and decreasing the bar/category percentage. But i've had zero luck.
What am i missing? Have I missed some sort of configuration setting or?
var ctx = document.getElementById("QGL_Chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: data = {
labels: [dates[0], dates[1], dates[2], dates[3], dates[4], dates[5], dates[6]],
datasets: [
{
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]],
},
{
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]],
},
{
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]],
},
{
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
type: 'bar',
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",
}]
}
}
});
1 Answer
Reset to default 7The 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./ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="QGL_Chart"></canvas>