score:0
right, well i found the problem and the solution.
the root of the issue came about when my page refreshed and the chart would resize. i then tried the chart.defaults.global.maintainaspectratio= false;
command which worked but duplicated the x-axis tick labels.
the problem: these two commands cannot work together. it causes the duplication on hover.
chart.defaults.global.responsive = true;
chart.defaults.global.maintainaspectratio= false;
the solution: found in the chartjs.org documentation. detecting when the canvas size changes can not be done directly from the canvas element. chart.js uses its parent container to update the canvas render and display sizes. however, this method requires the container to be relatively positioned and dedicated to the chart canvas only. responsiveness can then be achieved by setting relative values for the container size (example):
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="chart"></canvas>
</div>
note that in order for the above code to correctly resize the chart height, the maintainaspectratio option must also be set to false.
i added the div's to encase my canvas, changed the sizing and this fixed my problem :)
Source: stackoverflow.com
Related Query
- 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
- Chart Js change text label orientation on Ox axis
- show label in tooltip but not in x axis for chartjs line chart
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- how to label axis within radar chart with chart.js
- display vertical axis label in line chart using chart.js
- Chart Js reduce text size for label on X axis
- How to stop axis label from being cut off in chart JS?
- Chart.js bar chart label gets hidden on hover
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- Chart js scatter - display label on hover
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- Move chart x axis label and borders
- Update chart axis labels after hover - chart.js
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- Chart.js x-axis label duplicating on hover
- JavaScript doughnut chart with centered hover label
- Chart JS - How to display Label over Slices instead of text on hover
- 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?
- Chart Js Change Label orientation on x-Axis for Line Charts
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- ChartJS - Draw chart with label by month, data by day
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chart.js scatter chart - displaying label specific to point in tooltip
- chartjs show dot point on hover over line chart
- Detecting hover events over parts of a chart using Chart.js
- Chart.js bar chart : Grid color and hide label
- Chart JS - set start of week for x axis time series
More Query from same tag
- Labels attribute of chartsjs not taking context variable of type string
- Draw two plots using chartjs over one another with transparency
- event click only x-axis label chartJS
- Where is the documention for the chart.js Chart constructor?
- min and max tag is not showing in chart chart.js
- Chart js Backgroundimage Scaling
- Creating chart.js chart directly to PNG in Node js?
- A chart Js error issue are occured in my Laravel other page?
- Charts.js Pie Chart
- Updating data in chart.js
- How can I create a bar chart that has multiple yAxes scales?
- ChartJS distribute points evenly
- How can I append a calculated value to the end of a bar in Chart.JS?
- Show count concatenated to labels using chart.js
- Chart.js combined line and bar chart with differing data points
- $.function is not a function - jQuery
- ChartJS BoxWidth not working
- Time series data visualization using JSON
- Data Labels wrongly positioned on bar chart - chartjs
- 'scales' option appears to break Chart.js graph
- Updating Chart.js with JSON, cannot read property 'length' of undefined
- How to get values inside a chart without clicking
- Labeling and Data (ChartJS)
- How to set up an initial Zoom value for a chart (ChartJS + ChartJS Zoom plugin)?
- Why is chart.js canvas not respecting the padding of the container element?
- Is it possible for chat.js "Stepped Line Chart" to render the stepped line without the next data point
- Chart JS : Getting issue with draw bar chart
- How to get 2 doughnut charts in one chart (chartjs)
- How can i add min and max range horizontal line in angular-chart.js
- How to custom index label on each bar chart using chartjs?