# Chart js

## doc

- https://github.com/chartjs/awesome

- remove backgroundColor

- fill: false

~~~javascript
import React, { useEffect, useState } from 'react';
import {Line, Chart} from 'react-chartjs-2'

const ChartjsExample1 = () => {
const [ chartData, setChartData ] = useState({})

const chart = () => {

const s1 = {
label: 'test 1',
borderColor: 'rgb(11, 49, 143)',
fill: false,
data:[
{ x: new Date().getTime() + 1000, y: "MC-22"},
{ x: new Date().getTime() + 4000, y: "MC-22"}
]
}
const s2 = {
label: 'test 2',
borderColor: 'rgb(244, 199, 2)',
fill: false,
data:[
{ x: new Date().getTime() + 1000, y: "MC-11"},
{ x: new Date().getTime() + 10000, y: "MC-11"}
]
}
const s3 = {
label: 'test 3',
borderColor: 'rgb(77, 108, 64)',
fill: false,
data:[
{ x: new Date().getTime() + 1000, y: "MC-13"},
{ x: new Date().getTime() + 10000, y: "MC-13"}
]
}
const s4 = {
label: 'test 4',
borderColor: 'rgb(91, 182, 71)',
fill: false,
data:[
{ x: new Date().getTime() + 1000, y: "MC-01"},
{ x: new Date().getTime() + 10000, y: "MC-01"}
]
}

setChartData({
// labels:[ new Date().getTime() + 1000, new Date().getTime() + 10000,],
datasets:
[
s1, s2, s3, s4
]
})
}

useEffect(() => {
chart()
}, [])

return (
<div style={{ height:"500px", width:"500px" }}>
<Line
data={chartData}
options={{
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
second: 'YYYY/MMM/D h:mm:ss '
}
}
}],
yAxes: [
{
type: 'category',
labels: ['MC-22', 'MC-11', 'MC-13', 'MC-01']
}
]
}
}}/>
</div>
)
}

export default ChartjsExample1
~~~

## Time Formats

- https://www.chartjs.org/docs/latest/axes/cartesian/time.html

| Name | Default |Example |
|---|:---:|---:|
| millisecond | 'h:mm:ss.SSS a' |'11:20:01.123 AM'|
| second | 'h:mm:ss a' |'11:20:01 AM'|
| minute | 'h:mm a' |'11:20 AM'|
| hour | 'hA' |'11AM'|
| day | 'MMM D' |'Sep 4'|
| week | 'll' |'Sep 4 2015'|
| month | 'MMM YYYY' |'Sep 2015'|
| quarter | '[Q]Q - YYYY' |'Q3 - 2015'|
| year | 'YYYY' | '2015'|

## Category

- https://www.chartjs.org/docs/latest/axes/cartesian/category.html

## Tooltip

- https://www.chartjs.org/docs/latest/configuration/tooltip.html

~~~javascript
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';

if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 100) / 100;
return label;
}
}
}
}
});
~~~

- https://stackoverflow.com/questions/43604597/how-to-customize-the-tooltip-of-a-chart-js-2-0-doughnut-chart

### Tooltip Next Line

- https://stackoverflow.com/questions/29302392/chartjs-tooltip-line-breaks

~~~javascript
tooltips: {
mode: 'single',
callbacks: {
afterBody: function(data) {
var multistringText = ['first string'];
// do some stuff
multistringText.push('another string');

return multistringText;
}
}
}
~~~

~~~javascript
var myChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
tooltips: {
callbacks: {
title: function(tooltipItem, data) {
return data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return data['datasets'][0]['data'][tooltipItem['index']];
},
afterLabel: function(tooltipItem, data) {
var dataset = data['datasets'][0];
var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
return '(' + percent + '%)';
}
},
backgroundColor: '#FFF',
titleFontSize: 16,
titleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
}
}
});
~~~
## Tooltip hover

- intersect: false

- https://stackoverflow.com/questions/45588852/chart-js-2-x-how-to-show-a-tooltip-in-a-timeline-chart

~~~javascript
tooltips: {
titleFontSize: 25,
bodyFontSize: 20,
intersect: false,
callbacks: {
// https://www.chartjs.org/docs/latest/configuration/tooltip.html
// title: function(tooltipItem, data) {
// },
label: function(tooltipItem, data) {
/*
data.datasets: hover 對象的資料集合
指定到此項目: datasetIndex ( data.datasets[tooltipItem.datasetIndex] )
start time: data.datasets[tooltipItem.datasetIndex].data[0]
end time: data.datasets[tooltipItem.datasetIndex].data[1]
*/
const machine = data.datasets[tooltipItem.datasetIndex].data[0].y;
return '工序 機台：' + machine;
},
afterLabel: function(tooltipItem, data) {
const startTime = data.datasets[tooltipItem.datasetIndex].data[0].x;
const endTime = data.datasets[tooltipItem.datasetIndex].data[1].x;
const durationSecond = (+endTime - +startTime)/1000 <= 0 ? 0 : (+endTime - +startTime)/1000;
const [ d, h, m, s ] = showDayHourMinSecondString(durationSecond);
return '工時：' + d + '天' + h + '小時' + m +'分' + s + '秒';
},
},
},
~~~

## Time unitStepSize

- https://github.com/chartjs/Chart.js/issues/4002

## Response Table

- https://codepen.io/beau/pen/rvJRzb/

~~~javascript
var ctx = document.getElementById("favorite-colors");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5, 2, 5]
}]
},
options: {
maintainAspectRatio: false,
}
});
~~~

~~~html
<h1>Chart.js chart with fixed height and variable width</h1>
<p>Adjust the width of the window to test.</p>
<div class="fixed-height-chart">
<canvas id="favorite-colors"></canvas>
</div>
~~~

~~~css
body
margin: 3rem
.fixed-height-chart
height: 200px
border: 1px solid black
~~~

##

- https://stackoverflow.com/questions/28180871/grouped-bar-charts-in-chart-js
- http://jsfiddle.net/p3g07d09/

~~~javascript
var ctx = document.getElementById("myChart").getContext("2d");

var data = {
labels: ["Chocolate", "Vanilla", "Strawberry"],
datasets: [{
label: "Blue",
backgroundColor: "blue",
data: [3, 7, 4]
}, {
label: "Red",
backgroundColor: "red",
data: [4, 3, 5]
}, {
label: "Green",
backgroundColor: "green",
data: [7, 2, 6]
}]
};

var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
barValueSpacing: 20,
scales: {
yAxes: [{
ticks: {
min: 0,
}
}]
}
}
});
~~~

## ChartJS Zoom and Pan In React Hooks

- https://www.youtube.com/watch?v=bk3dq2Nq-zk

- https://recordnotfound.com/Chart-Zoom-js-chartjs-134217

- install

- npm install chartjs-plugin-zoom

- Configuration

~~~javascript
{
// Container for pan options
pan: {
// Boolean to enable panning
enabled: true,

// Panning directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow panning in the y direction
mode: 'xy',
rangeMin: {
// Format of min pan range depends on scale type
x: null,
y: null
},
rangeMax: {
// Format of max pan range depends on scale type
x: null,
y: null
}
},

// Container for zoom options
zoom: {
// Boolean to enable zooming
enabled: true,

// Enable drag-to-zoom behavior
drag: true,

// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
mode: 'xy',
rangeMin: {
// Format of min zoom range depends on scale type
x: null,
y: null
},
rangeMax: {
// Format of max zoom range depends on scale type
x: null,
y: null
}
}
}
~~~

## chartjs plugin dragdata

- https://github.com/chrispahm/chartjs-plugin-dragData

- https://observablehq.com/@chrispahm/draggable-data-charts

- react dragdata

- https://stackblitz.com/edit/react-szsghy?file=components/chart.js

~~~javascript
import React, { useState, useEffect, useRef } from "react";
import { Line } from "react-chartjs-2";
import 'chartjs-plugin-dragdata';

const data = canvas => {
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0, 0, 0, 100);
gradient.addColorStop(0, "rgba(163, 161, 251, 0.8)");
gradient.addColorStop(1, "rgba(163, 161, 251, 0.2)");

return {
// chartData: {
labels: [1,2,3,4,5],
datasets: [
{
label: "",
data: [5,5,5,5,5],
backgroundColor: gradient,

borderColor: ["rgba(163, 161, 251, 1)"],
borderWidth: 1,
pointHitRadius: 5,
pointRadius: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(255, 255, 255, 1)",
pointHoverBorderColor: "rgba(163, 161, 251, 1)"
}
]
// }
};
};

export default function charts(props) {
const chartReference = useRef({});
const [chartOptions, setChartOptions] = useState(
{
onDragEnd: handleDrag,
dragData: true,
dragDataRound: 0,
tooltips: {
backgroundColor: "rgba(255,255,255,0.6)",
borderWidth: 1,
borderColor: "rgba(163, 161, 251, 1)",
bodyFontColor: "rgba(0, 0, 0, 0.8)",
titleFontColor: "rgba(0, 0, 0, 0.8)"
},
elements: {
point: { radius: 0, hitRadius: 0, borderWidth: 0 },
line: { tension: 0 }
},
maintainAspectRatio: false,
legend: false,
animation: { duration: 0 },
hover: { animationDuration: 0 },
responsiveAnimationDuration: 0,
scales: {
xAxes: [
{
gridLines: {
color: "rgba(234, 240, 244, 1)"
}
}
],
yAxes: [
{
gridLines: {
color: "rgba(234, 240, 244, 1)"
},
ticks: {
max: 20,
min: 0
}
}
]
}
}
);

const handleDrag = (e, datasetIndex, index, value) => {
let ref = chartReference.current.chartInstance;

ref.config.data.datasets.forEach(function (dataset) {
dataset.data[index] = value;
});
}
/*
useEffect(() => {
console.log( props.state);
let ref = chartReference.current.chartInstance;
ref.options.dragData = !props.state;
ref.update();
}, [props.state])
*/
useEffect(() => {
setChartOptions(Chart.helpers.configMerge(chartOptions, {
dragData: !props.state
})
);
}, [props.state])

return (
<div
style={{
width: "auto",
height: "9rem"
}}
>
<Line
ref={chartReference}
data={data}
height={30}
options={chartOptions}
redraw={true}
/>
</div>
);
}
~~~

## Chartjs tooltip Example

~~~javascript
<!DOCTYPE HTML>
<html>
<head>
<style>
.canvasjs-chart-tooltip{
pointer-events: auto !important;
}
</style>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Hyperlinks in ToolTip"
},
axisY: {
title: "Views"
},
axisX: {
title: "Pages"
},
data: [
{
type: "column",
toolTipContent: "<a href = {name}> {label}</a><hr/>Views: {y}",

dataPoints: [
{ y: 84, label: "home", name: "/" },
{ y: 36, label: "download", name: "/download-html5-charting-graphing-library/" },
{ y: 19, label: "blog", name: "/blog/" },
{ y: 45, label: "gallery", name: "/html5-javascript-column-chart/" }
]
}
]
});

chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
~~~

## tooltip 一次 show 一筆(vertical) 所有資訊!

options = {
...
tooltips:{
   mode:'x-axis'
}
...
}

## legend

~~~javascript
legend: {
display: true, // show bar 在 top
labels: {
fontSize: 20,
padding: 20,
},
position: 'bottom',
aligin: 'end',
},
~~~

## charts drag and drop

- https://github.com/chrispahm/chartjs-plugin-dragData

- example

- https://jsfiddle.net/rqbcs6ep/1/

## 好棒棒 資料

- https://www.npmjs.com/search?q=chartjs-chart-

- example
- https://nagix.github.io/chartjs-plugin-streaming/samples/annotation.html

- chartjs-plugin-datalabels

- https://chartjs-plugin-datalabels.netlify.app/guide/labels.html#dataset-overrides