score:0
Accepted answer
the chart is not visible because the component host is an inline
element. as such, it should not contain block elements like the div
wrapper created by the chart.js
library.
setting the display
style attribute of the host to block
or inline-block
will make the chart visible:
:host {
display: inline-block;
}
see this stackblitz for a demo.
Source: stackoverflow.com
Related Query
- Chart.js sets canvas dimentions to 0x0 and do not display anything
- canvas does not display proper width and height chart.js
- Resetting transform: rotate() by removing and appending canvas not showing data after appending and redrawing 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
- Chart.js returns a console error and does not display the chart when using variables as data input
- Chart.js: bar chart first bar and last bar not displaying in full
- ChartJS canvas not displaying rgba colors in IE, Safari and Firefox
- Problem for display a chart with Chart.js and Angular
- ChartJS with AngularJS - Canvas won't display anything
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- Chart.js: width and height of a pie chart not respected
- Chartjs not rendering chart and no error thrown
- Chart.js pie chart not showing in Google Chrome canvas
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- Take image of a chart.js from canvas and display it as an image
- React chart : prevent chart's canvas scaling with height and width
- Chart.js chart does not display when inside an ngIf.
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- Angular2 and ng2-charts does not display any graph
- Chart.js and EJS: Display String, Not Calculation Result
- Doughnut Chart not displaying data with Chart Js and Backbone js
- how to display multiple sum with chart js and laravel?
- Chart JS - Grid colors and gradient fill not showing
- chart js and json, chart not showing up
- Datalabels of Chart JS can not display full values
- VueJs and ChartJs - Chart is responsive in width, but not height?
- Chart not rendering with pug/jade and nodejs
- Chart does not display on webpage in Django app (with Chart.js)
- Chart.js canvas and chart width gets overwritten when redrawn
- Unable to set width and height on canvas in chart js
More Query from same tag
- How to draw one line with different colors in chartjs2?
- How to set the size of the arc in ChartJS?
- Chart.js: stack the bars to the left
- Chart.js click on labels, using bar chart
- How to assign values to different lables(legends) of my dataset of stacked bar chart
- Plotting objects in Chart.js
- How to remove gridlines and grid labels in Chartjs Radar?
- Combo bar chart graph line gets obscured by bars
- Mapping data from JSON not parsing well
- ChartJS does not render correctly
- ChartJs - pie chart not showing
- How to retain spacing between bars for two different bar charts in Chart.js 2
- math.max() doesn't work in IE
- Prime NG Customise tool tip on Bar Chart
- Chart only prints out first value using jquery ajax php
- "Responsive" Chart.js chart is taller than the containing window
- Chart.js timeline
- chart.js how to show tick marks but hide gridlines
- Line chart using Chart.js
- i can't create a line vertically with react annotation
- How can I change the position of legends in chart.js?
- How do you get the width of a datalabel from the Chartjs plugin after the chart animates?
- Charts Js Stacked Bar Graph displays no values?
- How to create vertical arbitrary line in financial chart?
- Chart.js showing different graphs with select
- ChartJS with AngularJS
- Make overlapping d3.js radar chart elements transparent
- Add mouseout event handler to legends in Chart.js
- Define new position for tooltip in ng2-charts
- Inject html into ng2-chart tooltip to preview image