score:0
Basically , you can't apply styling using css to a canvas chart . However , chartJS provides a way to apply styles to the tooltips . Please read more at Tooltip customisation
Also consider this
example: Inside chart options tooltips: {backgroundColor: '#fff'}
score:3
I had success with the following setup:
Template
<canvas
baseChart
[chartType]="chartSettings.lineChartType"
[colors]="chartSettings.lineChartColors"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[legend]="chartSettings.lineChartLegend"
[options]="chartSettings.lineChartOptions" <---- the important one
>
</canvas>
And the settings I created a file stats.chart-settings.ts
:
export const ChartSettings: any = {
lineChartOptions: {
tooltips: {
backgroundColor: 'rgba(255,255,255,0.9)',
bodyFontColor: '#999',
borderColor: '#999',
borderWidth: 1,
caretPadding: 15,
colorBody: '#666',
displayColors: false,
enabled: true,
intersect: true,
mode: 'x',
titleFontColor: '#999',
titleMarginBottom: 10,
xPadding: 15,
yPadding: 15,
}
}
}
In the component I simply have:
import { ChartSettings } from './stats.chart-settings';
...
chartSettings: any;
constructor() {
this.chartSettings = ChartSettings;
}
Source: stackoverflow.com
Related Query
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- Angular6 and ng2-charts does not display any charts when i fill data from webservice
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Get data from SQLite as an array and generate charts with the data using Chart.js in an HTML
- Angular 8 and ng2 charts - Updating labels and data
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Hide Y-axis labels when data is not displayed in Chart.js
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to achieve the best possible performance with mutable data and real-time charts in React?
- How do I correctly include Moment.js and Chart.js with RequireJS when I want to create charts with time scales?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Charts js and laravel: Render chart after passing in json data
- Chart JS tooltip appears differently when set from script instead of html
- How to get fixed legend and tooltip for dynamically generated data vue-chartjs
- How to customize tooltip on mouse hover of a polar area chart of Angular Charts
- How to customize the title and tooltip in ux-chartjs?
- Chart.js - x-axis and tooltip label shows "undefined" in Chrome when browser language is NOT English
- How to show tooltip only when data available in chart js?
- ChartJS tooltip values aren't matching the data after updating multiple charts
- Chart.js, increase space between bars and its labels when increasing the charts width
- data in charts of charts.js is changing when I click in the line chart
- How to render multiple Chart.JS charts on the same page with AJAX data and variables
- How can I process json file and display some data in form of charts in django
- I need a PHP query to grab data from the database and use in my bar charts for results
- Charts js showing only when positives data
- How Can customize chartjs doughnut chart border and tooltip
- display ng2 chart when the property of data returned is >=0
- charts labels and data with php arrays
- Loading and updating dynamic charts with dynamic data (chart.js)
More Query from same tag
- Chart.js 2 - Axis Layer Padding
- Chart doesn't display fonts
- How to convert pandas dataframe to specific json format
- Chart point hover error
- how do I change the textsize in of doughnut in react-chartjs-2?
- How to change the default barchart colour in chart.JS and angular 7?
- Chart disappearing on dataset update
- How do I get the current step size of a chartjs chart whose stepSize I have not defined?
- How to give break line in data label
- How to run Chart.js samples using source code
- chart js not dispalying data array that comes from an axios request
- Can't render two charts on the same page from chart.js
- ChartJs. How to stretch up line graph to the edges?
- chartjs; cannot read property '0' of undefined
- Charts in Angular js with JSON Object
- how to calculate the number of columns in a database with specific values (Query)
- Puppeteer and PDF generation with canvas
- How do I get tool tips to work on 2 data set half doughnut chart?
- How to disable click in graph ChartJS
- Calling data from outside of Chartjs code
- vue-chartjs how to load data
- Chart.JS Global Options
- how to change color of dots in graph using chart.js
- Displaying every nth label on the x-axis
- Change the color of displayed values in pie chart
- How to change chart.js axis labels color?
- Putting label array to the chartjs?
- Attach onAnimationComplete for Chart.js after creation
- Google Pie Chart Is Not Responsive
- Automatically show 0 sales for the date which is not in database