score:0
Accepted answer
actually there's no way to create such a chart with chartjs framework. so i had to manipulate the chart data (and colors) with js to get the results. if someone is interested in more details i'm available.
score:0
drawing bars with different orientation can be done with floating bars. individual bars are specified with the syntax [min, max]
. this feature was introduced with chart.js v2.9.0.
new chart(document.getelementbyid('canvas'), {
type: 'horizontalbar',
data: {
labels: [1, 2, 3, 4],
datasets: [{
label: 'data',
data: [[-3, 0], [0, 6], [-4, 0], [0, 5]],
backgroundcolor: ['red', 'blue', 'green', 'orange']
}]
},
options: {
responsive: true,
legend: {
display: false
},
title: {
display: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="canvas" height="90"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js tooltip hover customization for mixed chart
- ChartJS: two axes in horizontalBar chart
- Multiple y-axis in horizontalBar chart js
- Chart.js stacked and grouped horizontalBar chart
- chartjs-plugin-error-bars display error-bars without displaying label on a horizontalBar chart
- HorizontalBar chart is displayed below canvas when I set height with style attribute for chart div (Chart.js 2.9.4)
- what is wrong with my code ? java script chart position
- How to print a chart rendered by code
- VueJS + Chartjs - Chart only renders after code change
- How do I destroy/update Chart Data in this chart.js code example?
- getting additional value fields from data source for dx.chartjs doughnut chart
- 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
- Customization of Data Labels in doughnut chart ng2-charts
- Chart.js horizontalBar customization
- Getting the HTML code of a chart created by chart.js
- How to run Chart.js samples using source code
- how to setting chart js customization
- how to not repeat code while creating multiple charts in chart js
- Set height of chart in Chart.js
- Dynamically update values of a chartjs chart
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- In Chart.js set chart title, name of x axis and y axis?
- Limit labels number on Chart.js line chart
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- Chartjs Bar Chart showing old data when hovering
- Chart.js Show labels on Pie chart
- Chart Js Change Label orientation on x-Axis for Line Charts
More Query from same tag
- ChartJS: How to get labels, legend, title to show up?
- Using JSON file data in Chart.js
- Include Percentage In Legend
- Append second dataset to existing chartjs chart
- How to decrease the interval for Horizontal Stacked bar in ChartNew.js?
- How to change the chart line or area colors according to the user need?
- ChartJS doesnt display labels provided by Jinja variable
- Chart.js how to make chart only show the most recent data
- how to programmatically make a line chart point active/highlighted
- How to apply dollar sign in Y- axis in chart js?
- Implement a cash flow timeline
- Format Tooltip Chartjs TypeScript Angular
- Trying to load a chart with chart.js, through ajax and php
- Chart JS - How to output JSON objects into PIE variant
- zeroLineColor and zeroLineWidth not working for the x-axis in Chartjs
- charts are not being show with wicked_pdf
- Chartjs Overlap click function doesnt work
- I can't display the vue-chart.js on the page
- Chart.js. Edit bar width -v2.5-
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- react-chartjs-2 chart.js: How to make strokewidth of dougnut chart thin?
- Uncaught type error: mychart.update is not a function
- Chartjs and Polymer 1.7.0
- Chart.js LineChart how to show only part of dataset and support horizontal scrolling
- Chart.js different y axis depending on graph from select options
- Using chart.js, how do I align bars instead of centering them when there are only a few bars to display?
- Stacked Bar Chart, Two on Same Line w/ Same Color
- Angular 4: Different color for bar in bar chart dynamically using ChartJS
- Show and plot zero values on ChartJS line graph when no data
- decrease bar spacing chartJS v2