stimulus-chartjs
stimulus-chartjs copied to clipboard
stimulus-components
Compatible with the chartjs-adapter-date-fns?
currently in the process of migrating my chart.js to use the Stimulus controller. The code before the migration is the following:
<!-- index.html -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.charBox {
width: 700px;
}
</style>
</head>
<body>
<div class="charBox">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>
// setup
const data = {
datasets: [{
label: 'Interest rate',
stepped: true,
data: [
{ x: '2019-03-05', y: 6.2 },
{ x: '2019-04-01', y: 6.2 },
{ x: '2019-05-01', y: 6.2 },
{ x: '2019-06-01', y: 6.2 },
{ x: '2021-04-01', y: 6.0 },
{ x: '2021-05-01', y: 5.0 },
{ x: '2021-07-01', y: 4.0 },
{ x: '2021-09-01', y: 4.5 }
],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
};
// config
const config = {
type: 'line',
data,
options: {
scales: {
x: {
type: "time",
time: {
unit: 'month'
}
}
},
}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
</body>
</html>
Which looks like:
The data in the chart.js that I'm currently migrating is an Array of Hashes such as data: [{ x: '2019-03-05', y: 6.2 },{ x: '2019-04-01', y: 6.2 },..]. I know that this data format is possible because I'm currently using the chartjs-adapter-date-fns. Since the example in the docs is just an Array of Integers data: [37, 83, 78, 54, 12, 5, 99], is that the only format that is supported? Event if I use the chartjs-adapter-date-fns library with stimulus-chartjs it doesn't seem to take effect. This is what I get:
app/javascript/controllers/index.js:
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
import Chart from "stimulus-chartjs"
import 'chartjs-adapter-date-fns';
const application = Application.start()
const context = require.context(".", true, /\.js$/)
application.load(definitionsFromContext(context))
application.register("chart", Chart)
app/controllers/charts_controller.rb:
class ChartsController < ApplicationController
def show
@chart_data = {
datasets: [{
label: 'Interest rate',
stepped: true,
data: [
{ x: '2019-03-05', y: 6.2 },
{ x: '2019-04-01', y: 6.2 },
{ x: '2019-05-01', y: 6.2 },
{ x: '2019-06-01', y: 6.2 },
{ x: '2021-04-01', y: 6.0 },
{ x: '2021-05-01', y: 5.0 },
{ x: '2021-07-01', y: 4.0 },
{ x: '2021-09-01', y: 4.5 }
],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
}
@chart_options = {
scales: {
x: {
type: "time",
time: {
unit: 'month'
}
}
}
}
end
end
app/views/charts/show.html.erb:
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas
data-controller="chart"
data-chart-type-value="line"
data-chart-data-value="<%= @chart_data.to_json %>"
data-chart-options-value="<%= @chart_options.to_json %>"
></canvas>
</div>
It would be extremely helpful if this library was able to play nicely with chartjs-adapter-date-fns by default would that be possible? or does that logic belong in a different library?
