score:9
To change the display of a specific chart, you have to edit the config of your whole graph.
Deep inside, you will find the attributes you need to change for your specific chart (in your case, the line chart).
If you try to search deep in it, you will finally find
x
& y
attributes for your line chart, stored in myBar.config.data.datasets[2].metaData[i]._model
(which was hard to find, I admit).
Then, you just need to add this to your code (after the generation of your myBar
) :
// For each value of your line chart ...
for (var i = 0; i < myBar.config.data.datasets[2].metaData.length; i++) {
// Get the bar width associated to this value
var barWidth = myBar.config.data.datasets[1].metaData[i]._model.width;
// Get the percentage that the bar is taking in the graph
var barPercentage = myBar.config.options.scales.xAxes[0].barPercentage;
// Add the width of the bar / (2*percentage) -- which is the half of the bar
myBar.config.data.datasets[2].metaData[i]._model.x += barWidth / (2*barPercentage);
// Also edit the controlPointNext and controlPointPrevious to change the bezier curve display
myBar.config.data.datasets[2].metaData[i]._model.controlPointNextX += barWidth / (2*barPercentage);
myBar.config.data.datasets[2].metaData[i]._model.controlPointPreviousX += barWidth / (2*barPercentage);
}
Check the plunker for the full code.
And here is the final result :

Update - Responsiveness added :
To make the graph responsive, you will need to achieve the loop inside Chart.js plugins.
Plugins let you handle all the events that are triggered while creating, updating, rendering your graph.
We will especially edit the afterUpdate
event, which is triggered every time there is an update (a resize for instance).
Chart.pluginService.register({
afterUpdate: function(chart) {
// Loop in here
}
});
Here is another fiddle with the final result, which is responsive.
Note that the bar graph is drawn after the line one (I don't know why) so I had to lower the alpha
of the bar background color.
Source: stackoverflow.com
Related Query
- line graph spot in the top middle of the bar graph
- Chart.js Line Graph: Start a line in the middle of a graph
- Show Count on top of the bar graph - ChartJS
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart.js - mixing bar and line graphs - can I get the lines to fill the full column?
- Chart.js with dual axis on bar and line graph
- ChartJS Line chart cut off at the top and bottom
- Chart.js add icon at the top of bar
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- Chart JS display Data Value on the top of the Bar
- Add a custom label to the top or bottom of a stacked bar chart
- How to show data values in top of bar chart and line chart in chart.js 3
- Adding image on the top of bar in chartjs
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Chart.js Clipping on Top of Line Graph
- Some bars of the bar graph are disappearing from Chart.js
- Chart.js - Bar values showing on the middle of bar
- Chart.js - how to add a second data line to the line graph
- How to set the chartjs bar graph scale to the highest value in the result data
- Display Bar chart values in the graph - ChartJS
- How to create a bar and a line in a same graph using chart.js in React?
- Combo line and bar chart. how can i render line in middle
- Sorting the Bars in Chart.JS Bar Graph
- Remove top horizontal line in a horizontal bar chart (Chart.js 2)
- How to add labels on top of the chart bar with Chart.js 2
- ChartJS line chart or bar graph from a Java program
- Chart.js align line graph to the left
- how to show bar value on the top of each bar in chartjs
- react-chartjs-2 bar touches the top
- How to add additional label in the middle of each bar using ChartJS
More Query from same tag
- Fetching change-in stats from World Bank javascript JSON downloads using Chart.js
- Chartjs Datasets overlapping and z-index
- Use chart.js with freemarker tamplates
- Removing Dynamic Fields by Association in MongoDB Aggregation
- Change Chart JS Bar Chart Border to Dotted Line
- Chartjs Custom Legend for Doughnut Chart Having Labelled Lines Sticking Out of Each Section
- Chart.js isn't able to read elements from php as label
- HTML Canvas Fill Area Under Line
- Getting "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" when using Chartjs inside react axios method
- ChartJS – How to show border on empty pie chart?
- Change axes position in line chart
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- injecting chart.js sparkline to jqxGrid widget in Angular with typescript
- ChartJS multiple sub labels for label
- How can I add padding between tick labels?
- Chart.js: Can datasets be overlaid in a bar chart? (Not the same as stacked)
- Retrieve value returned from a function in Angular
- While placing chart.js Doughnut Chart inside Primeng Carousel, the text inside the canvas seems blurred/distorted a little bit
- Unable to set width and height on canvas in chart js
- How to parse a Chart using data from a nested object in ChartJS
- How to use chartjs-plugin-annotation in Angular
- Chart.js - doughnut show active segment tooltip (on click of external button)
- How to display axis borders only (no grid lines) in chartjs?
- is it possible to get time in box charts in chartjs?
- Testing Chart.js with Jest/Enzyme - Failed to create chart: can't acquire context from the given item
- how to hide specific dataset based on condition chartjs angular
- Chart.js scatter chart plot data joins start and finish points together
- Chart Js change text label orientation on Ox axis
- chart.js set one bar as different colour?
- Y-Axis with different colors