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.
Related
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
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.
I upgraded to the newest Chart.JS version 3.0.2. and I'm trying to get a time series chart to render. Here is my config:
{
type: 'line',
data: {
datasets: [{
data: dataForChart
}]
},
options: {
scales: {
x: {
type: 'time'
}
}
}
}
I have imported the module like this:
import ChartJS from 'chart.js/auto';
The error I'm getting is:
Error: This method is not implemented: either no adapter can be found or an incomplete integration was provided.
Any tips on what I could be making wrong?
Here is a code sandbox with that problem: https://codesandbox.io/s/throbbing-cdn-j6q2u?file=/src/App.js
You need to install and import an adapter, in your case it's moment adapter for time series
npm install moment chartjs-adapter-moment --save
then import it in your component:
import 'chartjs-adapter-moment';
for more info about adapters, check this
This answer comes a bit late but for everyone who stumbles here: You need a date adapter. Find a full list here
Once you installed i.e. date-fns via npm install date-fns chartjs-adapter-date-fns --save in your root directory you have to do two things to make it work in your React project:
Add this at the top of your file import 'chartjs-adapter-date-fns'; and import { enUS } from 'date-fns/locale';
Inside your options:
options = {
...
scales: {
x: {
type: 'time',
// add this:
adapters: {
date: {
locale: enUS,
},
},
}
},
...
}
You need an adaptor as stated above. Look here: https://github.com/chartjs/chartjs-adapter-date-fns#cdn
One option is to add the following cdn links:
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
As stated in your error and the documentation you need an adapter to convert the dates to date objects, see documentation: https://www.chartjs.org/docs/latest/axes/cartesian/time.html#date-adapters
I think you should put list in x like below code.
scales: {
x: [{
type: 'time'
}]
}
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
I'm quite new to Sencha-touch and I'm following the getting started video on the documentation website.
There is a part where the app shows blogposts in a list, but it doesn't seem to work for me.
I have the same code in the video but it doesn't work.
Ext.define('GS.view.Blog', {
extend: 'Ext.navigation.View',
xtype: 'blog',
config: {
title: 'Blog',
iconCls: 'star',
items: {
xtype: 'list',
itemTpl: '{title}',
store: {
autoload: true,
fields: ['title', 'link', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
}
});
Has the code/library from sencha touch changed since the video or am I doing something wrong (and what)?
Took me a little while to figure out, but it is because the store is not loading. You may ask why, as you have specified autoload to be true? The reason is because it is autoLoad (notice the capital L).
:)
please download latest sencha 2.0 framework sdk ,I also faced same issue but after downloading and using sencha-touch-all. js ,everything works fine .Probs they have updated the 2.0 with added new js files like navigation view .Open your existing sdk and check in document whether you can find Ext.View.navigation exist or not.