score:0
you can have dynamic configuration for bar
as well as horizontalbar
you can use this configurations
var data = {
labels: ["label1", "label2", "label3", "label4", "label5"],
datasets: [{
"label": "total v",
"yaxisid": "a",
"backgroundcolor": "rgba(53,81,103,1)",
"bordercolor": "rgba(53,81,103,.4)",
"data": [100, 90, 80, 70, 60]
}, {
"label": "total c",
"yaxisid": "a",
"backgroundcolor": "rgba(255,153,0,1)",
"bordercolor": "rgba(255,153,0,.4)",
"data": [10, 9, 8, 7, 6]
}]
};
var options = {
scales: {
yaxes: [{
id: 'a',
position: 'left'
}]
}
};
var ctx = document.getelementbyid("mychart");
new chart(ctx, {
type: "horizontalbar",
data: data,
options: options
});
coming to your question the actual problem is with var options={...}
it is made to work only with bar
charts. hope you understand
update
replace following as option
in the chart above for required axis scales
var options = {scales:{yaxes:[{id: 'a',position: 'left',gridlines:{color:"rgba(53,81,103,.4)"}},{position:"top",id:"c", gridlines:{color:"rgba(255,153,0,.4)"},ticks: { min: 0,max: 100,}},]}};
score:0
basically you will need a y-axis for the first dataset which going to hold the labels. and you will need two x-axis for showing the values in the top and in the bottom.
the second dataset will go to the x-axis which is shown at the top.
working fiddle included:
{
scales: {
yaxes: [{
id: 'a',
position: 'left',
display: true,
gridlines: {
color: "rgba(53,81,103,.4)"
}
}, ],
xaxes: [{
barpercentage: 0.4,
display: true,
id: "1",
position: 'bottom',
ticks: {
fontcolor: 'rgb(0, 0, 0)'
},
fontsize: 500,
}, {
stacked: false,
barpercentage: 1,
display: true,
type: 'linear',
id: '2',
position: 'top',
ticks: {
fontcolor: 'rgb(0, 0, 0)'
},
fontsize: 500,
}],
}
};
Source: stackoverflow.com
Related Query
- ChartJS: two axes in horizontalBar chart
- Is it possible to combine two Y axes into a single tooltip with ChartJS 2?
- ChartJS : How to display two "y axis" scales on a chart
- Mixed Chart calculating difference between two bars - ChartJS
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- How do I display two datasets on a single chart with chartjs
- Two data sets with different time instances on the same ChartJs chart
- VueJS + Chartjs - Chart only renders after code change
- Dynamically update values of a chartjs chart
- How to use two Y axes in Chart.js v2?
- Chartjs Bar Chart showing old data when hovering
- Chart area background color chartjs
- Chartjs v2.0: stacked bar chart
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- ReferenceError: Chart is not defined - chartjs
- How can I make two of my lines in Chart JS thicker
- ChartJS - Draw chart with label by month, data by day
- Changing fontFamily on ChartJS bar chart
- Display line chart with connected dots using chartJS
- chartjs : how to set custom scale in bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Dynamically update the options of a chart in chartjs using Javascript
- Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"
- chartjs datalabels change font and color of text displaying inside pie chart
- How to fix chart Legends width-height with overflow scroll in ChartJS
- Chartjs Bar Chart Legend
- show label in tooltip but not in x axis for chartjs line chart
- Chart JS Fill Between two lines
- chartjs show dot point on hover over line chart
More Query from same tag
- Chartjs force horizontal bar to start from the lowest value
- ChartJS memory usage
- Exporting chart.js charts to svg using canvas2svg.js
- PHP MySQL: count views per month for jQuery charts
- Datalabels of Chart JS can not display full values
- Space between start and end of axis
- Chart.js not showing all labels on pie chart
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- Configuring a Radar Chart w/Chart.js
- How to chart detected activities on the hour using Chart.js
- Python to chart.js
- react-chart2: Cannot read properties of undefined (reading 'map')
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- Data will not draw onto my chart
- ChartJS: Custom tooltip always displaying
- Is there a way to export chartjs-chart-treemap?
- Chart.js Version 3: how to set the different color for tick lines and gridlines
- Why are the chartjs tooltip labels always showing the first x-axis label?
- Chartjs change grid line color
- Integrate chart.js with single javascript file
- Hiding legend in PrimeNG
- Can i use crosshairs with OHLC/candlestick charts using ChartJS
- Chartjs splitting double digit numbers
- Removing ChartJS 2 border and shadow from point style legend
- Chartjs is not showing charts in my Django project
- How add the sizes of the slices in the pie chart (at the top) in Chart.js?
- show label in tooltip but not in x axis for chartjs line chart
- Chart.js How to synchronize pan and zoom in multiple chats
- Chart Js function (Chart.js) is stuck in a loop
- Chart js legend are being cut off if the bar height is equal to port height - chart js