[*.json]
indent_style = space
indent_size = 2
+
+[*.mdx]
+indent_style = space
+indent_size = 2
}
}
};
- new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
+ const chart = new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas id="chartjs-1" className="chartjs"></canvas></div>;
}
}
}
};
- new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
}
}
};
- new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
+ const chart = new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas id="chartjs-1" className="chartjs"></canvas></div>;
}
}]
}
};
- new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
}]
}
};
- new Chart(canvas.current.getContext('2d'), cfg);
+ const chart = new Chart(canvas.current.getContext('2d'), cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
}
}]
}
};
- new Chart(canvas.current.getContext('2d'), cfg);
+ const chart = new Chart(canvas.current.getContext('2d'), cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
}
options: {
}
};
- new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
}
}
};
- new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
}]
}
};
- new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
}
}
};
- new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
}
+++ /dev/null
----
-title: Scatter Chart
----
-
-Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.
-
-```javascript
-var scatterChart = new Chart(ctx, {
- type: 'scatter',
- data: {
- datasets: [{
- label: 'Scatter Dataset',
- data: [{
- x: -10,
- y: 0
- }, {
- x: 0,
- y: 10
- }, {
- x: 10,
- y: 5
- }]
- }]
- },
- options: {
- scales: {
- x: {
- type: 'linear',
- position: 'bottom'
- }
- }
- }
-});
-```
-
-## Dataset Properties
-
-The scatter chart supports all of the same properties as the [line chart](./charts/line.mdx#dataset-properties).
-
-## Data Structure
-
-Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
-
-```javascript
-data: [{
- x: 10,
- y: 20
- }, {
- x: 15,
- y: 10
- }]
-```
-
-## Internal data format
-
-`{x, y}`
--- /dev/null
+---
+title: Scatter Chart
+---
+
+Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.
+
+import { useEffect, useRef } from 'react';
+
+```jsx live
+function example() {
+ const canvas = useRef(null);
+ useEffect(() => {
+ const cfg = {
+ type: 'scatter',
+ data: {
+ datasets: [{
+ label: 'Scatter Dataset',
+ data: [{
+ x: -10,
+ y: 0
+ }, {
+ x: 0,
+ y: 10
+ }, {
+ x: 10,
+ y: 5
+ }]
+ }]
+ },
+ options: {
+ scales: {
+ x: {
+ type: 'linear',
+ position: 'bottom'
+ }
+ }
+ }
+ };
+ const chart = new Chart(canvas.current.getContext('2d'), cfg);
+ return () => chart.destroy();
+ });
+ return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
+}
+```
+
+## Dataset Properties
+
+The scatter chart supports all of the same properties as the [line chart](./charts/line.mdx#dataset-properties).
+
+## Data Structure
+
+Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
+
+```javascript
+data: [{
+ x: 10,
+ y: 20
+ }, {
+ x: 15,
+ y: 10
+ }]
+```
+
+## Internal data format
+
+`{x, y}`
}
}
};
- new Chart(ctx, cfg);
+ const chart = new Chart(ctx, cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas id="chartjs-a0" className="chartjs"></canvas></div>;
}
}
}
};
- new Chart(ctx, cfg);
+ const chart = new Chart(ctx, cfg);
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas id="chartjs-a1" className="chartjs"></canvas></div>;
}
| `debug` | `boolean` | `undefined` | Running animation count + FPS display in upper left corner of the chart.
| `delay` | `number` | `undefined` | Delay before starting the animations.
| `loop` | `boolean` | `undefined` | If set to `true`, the animations loop endlessly.
-| [[mode]](#animation-mode-configuration) | `object` | [defaults...](#default-modes) | Option overrides for update mode. Core modes: `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`. See **Hide and show [mode]** example above.
+| [[mode]](#animation-mode-configuration) | `object` | [defaults...](#default-modes) | Option overrides for update mode. Core modes: `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`. See **Hide and show [mode]** example above.
| [[property]](#animation-property-configuration) | `object` | `undefined` | Option overrides for a single element `[property]`. These have precedence over `[collection]`. See **Looping tension [property]** example above.
| [[collection]](#animation-properties-collection-configuration) | `object` | [defaults...](#default-collections) | Option overrides for multiple properties, identified by `properties` array.
## Animation mode configuration
-Mode option configures how an update mode animates the chart.
-The cores modes are `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`.
+Mode option configures how an update mode animates the chart.
+The cores modes are `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`.
A custom mode can be used by passing a custom `mode` to [update](../developers/api.md#updatemode).
A mode option is defined by the same options of the main [animation configuration](#animation-configuration).
## Disabling animation
-To disable an animation configuration, the animation node must be set to `false`, with the exception for animation modes which can be disable setting the `duration` to `0`.
+To disable an animation configuration, the animation node must be set to `false`, with the exception for animation modes which can be disable setting the `duration` to `0`.
```javascript
chart.options.animation = false; // disables the whole animation
chart.options.animation.active.duration = 0; // disables the animation for 'active' mode
chart.options.animation.colors = false; // disables animation defined by the collection of 'colors' properties
-chart.options.animation.x = false; // disables animation defined by the 'x' property
+chart.options.animation.x = false; // disables animation defined by the 'x' property
```
## Easing
```jsx live
function example() {
useEffect(() => {
- var ctx = document.getElementById('myChart').getContext('2d');
- var chart = new Chart(ctx, {
- // The type of chart we want to create
- type: 'line',
-
- // The data for our dataset
- data: {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [{
- label: 'My First dataset',
- backgroundColor: 'rgb(255, 99, 132)',
- borderColor: 'rgb(255, 99, 132)',
- data: [0, 10, 5, 2, 20, 30, 45]
- }]
- },
-
- // Configuration options go here
- options: {}
- });
+ var ctx = document.getElementById('myChart').getContext('2d');
+ var chart = new Chart(ctx, {
+ // The type of chart we want to create
+ type: 'line',
+
+ // The data for our dataset
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: 'rgb(255, 99, 132)',
+ borderColor: 'rgb(255, 99, 132)',
+ data: [0, 10, 5, 2, 20, 30, 45]
+ }]
+ },
+
+ // Configuration options go here
+ options: {}
+ });
+ return () => chart.destroy();
});
return <div className="chartjs-wrapper"><canvas id="myChart" className="chartjs"></canvas></div>;
}
projects / thirdparty / Chart.js.git / commitdiff
