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
- Bar chart (chart.js) with only 2 points does not show one of the bars
- Charts.js graph not displaying
- chart js bar chart not displaying array
- chart.js Hide empty Chart and keep previous data if no data? .net MVC
- How to avoid detached HTMLCanvasElements when updating canvas with JavaScript?
- How to Update beginAtZero in Chart.js
- Chartjs Bar Chart add background color to value labels
- Chart.js - Writing Labels Inside of Horizontal Bars?
- Difficulty in using php json_encode data received in javascript to display graph using chart.js library
- Chart js assign default value for y axis
- Different color for each bar in a bar chart; ChartJS
- Showing points data withou hover chartjs
- Chart looks only grey, does not show the color - Chartjs,discordjs
- How to install plugin for chartjs in javascript
- Height for chart area (not the canvas size)?
- ng2-charts How to get the result of multiple push?
- Chart.plugins.register beforeDraw does not work when using ChartsJS 3.x
- How could I implement chartjs-plugin-datalabels in chartjs-node-canvas?
- 2 Line Chart with different labels | Chart.js
- Background color does not work when trying to create my data before using scatter chart with chart.js
- Chartjs showing labels for bidimensional array
- How to display stacked line chartjs
- Show Dates in x-axis when using chart.js
- React: How to get loading spinner to show whilst API data loads into my chart.js chart
- How to set specific height for chartJs background color in terms of yAxis value
- Am I using chart.update() correctly when trying to update the chart?
- Angular2 Update ng2-charts with labels
- chartjs-plugin-dragdata isn''t working with scatter charts
- Datalabels plugin chartjs showing '[object]' instead of value
- Making chartjs scrollable on the x-axis