I'm trying to style the tooltip of google charts as stated in the docs and here on SO.
I've added
tooltip: {
isHtml: true,
ignoreBounds: true,
trigger: 'selection'
},
in my definition of chart, hovewer when I use
.google-visualization-tooltip {
background-color: #f00!important;
}
in the scss file nothing changes. I've also tried ::ng-deep google-visualization-tooltip, also without success
I've got 2.2.2 version of google-charts installed in my project
Related
I'm new one in rails and trying to add Apexchart js to my project in rails7.
So i did
document.addEventListener('turbo:load', function(){
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
var chart = new ApexCharts(document.querySelector('.user-apex-chart'), options);
if (chart) {
chart.render();
}
})
before I run
npm install apexcharts --save
I have Esbuild and turbo on
and add to application.js this:
import ApexCharts from 'apexcharts'
in package.json it has apex
"dependencies": {
"#hotwired/turbo-rails": "^7.1.1",
"#popperjs/core": "^2.11.5",
"apexcharts": "^3.35.3",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"esbuild": "^0.14.38",
"sass": "^1.51.0",
"tom-select": "^2.0.0"
},
no erorrs when I started the server..
but seems it doesn't see Apex.
What I did wrong?
the test code following below is working:
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
This is likely caused because your application.js script tag has defer="defer" and the library by default renders script tags that expect ApexCharts to exist.
Explanation of defer
The library supports passing defer: true to the options argument and then it will wrap create chart code inside an event listener.
<%= line_chart series, {defer: true} %>
I don't know if the event listener will work with turbo yet though.
Anyone know why subtitles will not render in react-chartjs-2?
Everything else seems to work fine. The title renders and I can get data to display on the chart. But adding a subtitle does nothing.
Here is my chart options object:
const chartOptions = {
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: 'Sample Title',
},
subtitle: {
display: true,
text: 'Sample Subtitle'
}
}
}
I am using the following versions:
react-chartjs-2 version 4.0.0 and chart.js version 3.7.0
I am wondering if this a version issue between chart.js and react-chartjs-2? I know there used to be version issues in the past. However, I've looked at the docs and it says react-chartjs-2 should work with chart.js version 3. So I am wondering if there could still be a version issue with certain features?
I am totally stumped on this problem. Looked all over google and cannot find any solution. Thanks in advance for any help/suggestions.
I am just trying out the new Tailwind CSS 'jit' mode and realized when switched Webstorm fails to autocomplete the Tailwind CSS classes.
May there be a fix to this?
my tailwind.config.js;
module.exports = {
mode: 'jit',
purge: [
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
presets: [],
darkMode: false, // or 'media' or 'class'
theme: {...}
...
My postcss config (inside nuxt.config.js);
postcss: {
plugins: {
'tailwindcss': {},
'#tailwindcss/jit': {},
autoprefixer: {},
}
}
It's a known issue: with "jit" mode, code completion list is very limited, most of applicable CSS classes are not suggested. This will be fixed in the scope of WEB-50318, please follow it for updates.
Note also that, when using latest tailwindcss versions, the completion includes unrelated CSS classes from some *.test.css files. This will be fixed with the next tailwindcss package update, see https://github.com/tailwindlabs/tailwindcss/issues/4393. Workaround: delete node_modules/tailwindcss/jit/tests/ folder, it's not needed.
I wanted to change my color scheme and therefore added custom colors to tailwind in the tailwindconfig file, but although in can find them in the master.css after building the css, the flask dev server doesnt not use the new colors but the old ones.
I looked if I have connected the wrong stylesheet but I actually have connected the right one.
help would very much appreciated. Thank you already!
tailwind.config.js
purge: [],
theme: {
extend: {
fontFamily: {
"mont": "montserrat"
},
colors: {
"primary": "#595b83",
"secondary": "#f4abc4",
"third": "#f4abc4",
"fourth": "#060930"
}
},
},
variants: {},
plugins: [],
}
It may be that your browser uses the cache, and you need to clear the cache before refreshing the page.
If you are using Google Chrome, press the ctrl+shift+delete key combination to enter the clear cache page.
Using ChartJS, I want to be able to change the title on a tooltip depending on the data (mainly as I want the text in a smaller font size than the label). I don't really need a full custom HTML tooltip, just be able to change fontsize and title text.
However just setting this via a "custom" callback means the label for the dataset doesn't have the background correctly displayed
options: {
tooltips: {
custom : t => {
t.title = ['Hello'];
}
}
}
See this JSFiddle: https://jsfiddle.net/MrPurpleStreak/2n8md9Lh/
Hover over a point and see the "hello" on a black background, but the data not.
NOTE: I've found a way to accomplish my initial goal, but this struck me as a bug in chartJS?
There seems to be an issue with the custom property.
I recommend using the callbacks instead :
tooltips: {
displayColors: false,
backgroundColor: 'rgb(0,0,0,1)',
callbacks: {
title: function(tooltipItems, data) {
return 'Hello';
},
}
}
See jsFiddle