score:0
i could use the darkr
id and position it right
in scales
like this
var canvas = document.createelement('canvas');
div = document.getelementbyid('container');
canvas.id = "mychart";
canvas.style.zindex = 8;
div.appendchild(canvas);
const labels = [
'8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7'
];
const data = {
labels: labels,
datasets: [{
label: 'red',
backgroundcolor: 'rgb(255,0,0)',
bordercolor: 'rgb(255,0,0)',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'yellow',
backgroundcolor: 'rgb(255,255,0)',
bordercolor: 'rgb(255,255,0)',
data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'orange',
backgroundcolor: 'rgb(255,159,64)',
bordercolor: 'rgb(255,159,64)',
data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'grey light',
backgroundcolor: 'rgb(224,224,224)',
bordercolor: 'rgb(224,224,224)',
data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'blue',
backgroundcolor: 'rgb(30,144,255)',
bordercolor: 'rgb(30,144,255)',
data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328],
stack: 'combined_first',
yaxisid: 'greydablue',
order: 1
},
{
label: 'dark red',
backgroundcolor: 'rgb(165,42,42)',
bordercolor: 'rgb(165,42,42)',
data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45],
stack: 'combined_second',
yaxisid: 'darkr',
order: 2
},
{
label: 'dark grey',
backgroundcolor: 'rgb(80,80,80)',
bordercolor: 'rgb(80,80,80)',
data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
stack: 'combined_third',
yaxisid: 'greydablue',
order: 3
}
]
};
const config = {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'wdc history chart'
},
zoom: {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
drag: {
enabled: true
},
mode: 'x',
}
}
},
scales: {
y: {
stacked: true
},
darkr: {
position: 'right', // `axis` is determined by the position as `'y'`
}
}
},
};
const mychart = new chart(
document.getelementbyid('mychart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>
Source: stackoverflow.com
Related Query
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Move chart x axis label and borders
- 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
- In Chart.js set chart title, name of x axis and y axis?
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Hide min and max values from y Axis in Chart.js
- Chart.js bar chart : Grid color and hide label
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- to increase space between x axis and first horizontal bar in chart js
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- How do you set x and y axis and Title for a line chart using charts.js?
- How to set 3 axis in google chart (V-Axis Left as Qty, V-Axis Right as Series Column and H-Axis as TimeOrder)?
- X and Y axis labels not displaying on line chart (Chart.js)
- Chart.js bar chart with time on X axis and category on Y axis is not rendered
- Rails dual axis using Chartkick and chart js
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- ChartJs line chart time cartesian axis number of ticks and wierd offset
- Move y-Axis and hide in Chart.JS V3
- Set minimum and maximum axis values on chart
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- Unable to hide x axis for horizontal bar chart vue js
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- chart.js Hide empty Chart and keep previous data if no data? .net MVC
- Chart.js move start position of chart from axis
- how to only show zero grid axes at center and hide all other gridlines in chart js
- How to make chart which has both positive and negative value, starts with 0 - x axis
- How to set max and min value for Y axis
- Charts.js Formatting Y Axis with both Currency and Thousands Separator
More Query from same tag
- Can I plot random points on a chart.js or Google Charts chart?
- How to dynamically set backgroundColor and borderColor barchart unsing Chart.js
- Chart.js configuration
- Display a single tooltip with Chart.JS?
- Chartjs: Overlapping values when using Datalabels plugin
- ChartJS v2.6.0 unintended behaviour in Internet Explorer
- Chart.js annotations in Vue.js break when defined in data ()
- Chart.js tooltip background color setting
- Chartsjs only showing two data points
- Canvas width/height not updating on internet explorer
- Limit labels number on Chart.js line chart
- Chart.js not showing data when pass dynamic labels
- Chart.js: width and height of a pie chart not respected
- Labels for Nested Doughtnut Chart React ChartJS
- Chart.js two Y-Axis, one with negative values
- Cannot find module /chartjs.helpers while using chartjs-plugins-datalabels (ReactJS)
- Chartjs only showing dots, line not showing
- Chartjs bar min, max and avarage value
- Charts.js rendering issue on page load
- Chart.js canvas and chart width gets overwritten when redrawn
- How to wrap X axis labels to multi-lines (X axis label formatting) in ng2-Charts?
- Chart.JS changing the animations
- How to stop displaying the data values from different data objects on Chart JS 2.x?
- Angular Chart color does not change
- How do I change the label and value like 500,000 to 500k in Chart.js?
- Chart.js is not working on my Browser
- Django chart.js multi axis line chart
- How do I make line charts overlay over bar charts in chartjs
- Uncaught Error: [$injector:modulerr] (Error came up when I included chart.js)
- chart.js bar chart datalabel vanishes on hovering over chart