Security News
Bun 1.2 Released with 90% Node.js Compatibility and Built-in S3 Object Support
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
chartjs-chart-error-bars
Advanced tools
Chart.js module for charting error bars plots. This plugin extends the several char types (bar
, horizontalBar
, line
, scatter
, polarArea
)
with their error bar equivalent (barWithErrorBars
, lineWithErrorBars
, scatterWithErrorBars
, polarAreaWithErrorBars
).
Bar Chart
Horizontal Bar Chart
Line Chart
Scatterplot
Polar Area plot
Check out also my other chart.js plugins:
npm install --save chart.js chartjs-chart-error-bars
see Samples on Github
Several new styling keys are added to the individual chart types
The data structure depends on the chart type. It uses the fact that chart.js is supporting scatterplots. Thus, it is already prepared for object values.
bar
and line
see TypeScript Interface:
bar
with indexAxis: 'y'
scatter
a combination of the previous two ones
and
polarArea
Multiple error bars are supported.
The styling options support different array version.
Note: as with other chart.js style options, using an array will be one value per dataset. Thus, to specify the values for different error bars, one needs to wrap it in an object with a v
key having the value itself. The outer for the dataset, the inner for the error bars.
see TypeScript interface:
Just use array of numbers for the corresponding data structures attributes (xMin
, xMax
, yMin
, yMax
). The error bars will be rendered in reversed order. Thus, by convention the most inner error bar is in the first place.
e.g.
{
y: 4,
yMin: [2, 1],
yMax: [5, 6]
}
The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.
Variant A:
import Chart, { LinearScale, CategoryScale } from 'chart.js';
import { BarWithErrorBarsController, BarWithErrorBar } from 'chartjs-chart-error-bars';
// register controller in chart.js and ensure the defaults are set
Chart.register(BarWithErrorBarsController, BarWithErrorBar, LinearScale, CategoryScale);
const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
type: BarWithErrorBarsController.id,
data: {
labels: ['A', 'B'],
datasets: [
{
data: [
{
y: 4,
yMin: 1,
yMax: 6,
},
{
y: 2,
yMin: 1,
yMax: 4,
},
],
},
],
},
});
Variant B:
import { BarWithErrorBarsChart } from 'chartjs-chart-error-bars';
const chart = new BarWithErrorBarsChart(document.getElementById('canvas').getContext('2d'), {
data: {
//...
},
});
npm i -g yarn
yarn install
yarn sdks vscode
yarn install
yarn build
FAQs
Chart.js module for charting error bars
The npm package chartjs-chart-error-bars receives a total of 4,510 weekly downloads. As such, chartjs-chart-error-bars popularity was classified as popular.
We found that chartjs-chart-error-bars demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.