score:2
there are three things that need to be done to support this feature:
- use the category scale to calculate bar thickness in proportion to axis size (width for vertical, height for horizontal)
- override the
#getpixelforvalue()
method in the category scale so that the category widths reflect the variant thickness, instead of being uniform - change the dimensions of the rectangles drawn by the controller using the values calculated by the scale
implemented these as a custom chart in this package: https://github.com/swayable/chartjs-chart-superbar using chart.js's new chart and new axes customization features.
solved (1) by adding behavior like this to the category scale:
getbarthickness(thicknesspercentage) {
let thickness = thicknesspercentage * this._axissize(),
spacing = this.options.spacing * 2
return thickness - spacing
}
_axissize() {
return this.ishorizontal() ? this.width : this.height
}
(2) is a bit more complicated because the pixel for each value in the category scale needs to take into account all of the various thicknesses for each previous item in the dataset when calculating the distance from the edge (left
for horizontal, or top
for vertical). otherwise the thicknesses of the categories in the axis will not match the thicknesses of the bars, and the category axis labels will not be centered on the bars.
relevant file for (1) and (2): https://github.com/swayable/chartjs-chart-superbar/blob/master/src/scale.thickcategory.js
(3) is solved by changing the relevant dimension in the element's _view
and _model
properties using the scale#getbarthickness()
method above.
relevant file for (3): https://github.com/swayable/chartjs-chart-superbar/blob/master/src/mixin.barthickness.js
figured most of this out by reading the source code for chart.js, especially scale.category.js and core.datasetcontroller.js. also took some inspiration from the source code for chart.smith.js.
Source: stackoverflow.com
Related Query
- Specify varying thickness of each bar in Chart.js bar chart
- ChartJS bar chart with legend which corresponds to each bar
- Different color for each column in angular-chartjs bar chart
- Can I specify a different font size for each row of text in Chart Title?
- How to set single color on each bar in angular chart js
- ChartJS horizontal chart display legend on each bar
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- How to use set the color for each bar in a bar chart using chartjs?
- How to set X coordinate for each bar with react chart js 2?
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- How do I get a different label for each bar in a bar chart in ChartJS?
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- how to write labels along with data on top and bottom of each stack in bar chart
- ChartJS vertical bar chart - measure percentage of the data in each column based on a specified max
- How to custom index label on each bar chart using chartjs?
- Grouped bar chart having each group with different data using chart.js
- Chart.js manipulate each bar in chart with different labels
- ChartJS Bar chart with time scale - Bars overlap with each other
- subcategories for each bar in multibar chart using chartjs
- Bar chart with vertical lines in each bar
- How can i launch a modal after clicking each bar in Bar chart in Chartjs and also how can i get its data?
- How to add data labels in each bar in stacked bar chart in chart.js?
- How to set different colors in each stacked bar chart cell?
- How to set percentage value by default on each bars in horizontal bar chart js
- how to create bar chart with group and sam color for each group using chart.js?
- Different color for each bar in a bar chart; ChartJS
- chart js 2 how to set bar width
- Chartjs Bar Chart showing old data when hovering
- Chart.js: Bar Chart Click Events
- Chartjs v2.0: stacked bar chart
More Query from same tag
- React - Display Chart when button is clicked
- Is there a way to change the react-chart-js tooltip only on a graph?
- charts labels and data with php arrays
- angular-chart not showing Pie Chart
- chartjs default background color to columns
- Angular: How to change color of chartjs?
- ChartJS Realtime Animation
- Can't display chart.js after fadeOut the pageloader
- chartjs chart.update() function not rendering lines in foreground
- ChartJs functional component does not refresh even when forceUpdate
- ChartJS - Graphic with multiple values on the same date
- How to parse "hh:mm:ss" strings to time in Charts.js 3.x
- Chart Js Line chart with fill on click with full information of its legend text
- passing json data to chartjs
- Adding additional properties to a Chart JS dataset
- Scatter plot in Chart.js with annotations
- chartjs resizing very quickly (flickering) on mouseover
- Chartjs line graph point hover animation buggy / jumpy
- HTML in Chart.js labels
- chart.js adjust height in mobile view
- Uncaught Error: [$injector:modulerr] Error: [$injector:nomod] Module 'chart.js' is not available
- Chart.js, changing the max height (not w/ canvas) or rounding up rule?
- chartjs 3.6.0 add X label
- Interactive chart via ChartJS
- Show multiple data in a single data in chart.js
- Chartjs - make line start at ... but maintain x-axis data
- Remove gap when updating ChartJS
- ChartJS creating var takes each character and outputs undefined
- Charts on Admin-on-rest
- ChartJS line chart x = y not rendering astraight line