Create Interactive Charts With Zooming And Panning Features – SenCharts

Preview:

Description:

An easy-to-use JavaScript library for creating interactive and fully customizable charts to visualize various data types (currently supports line charts and stock charts).

Its zooming and panning features allow users to easily explore and analyze data in greater detail, providing an enhanced user experience.

How to use it:

1. Download the package and import the SenCharts library.

<script src="sencharts.min.js"></script>

2. Create an empty container to hold the chart.

<div id="chart" style="aspect-ratio:2/1">
</div>

3. Create a new instance of the SenCharts.

let context = document.getElementById('chart');
// Line Chart
let chart = new LineChart(context);
// Stock Chart
let chart = new StockChart(context);

4. Plot your data on the chart.

// Line Chart
chart.data = {
  x: xValues,
  y: yValues,
};

// Stock Chart
chart.data= [
  {
    "Date": "2022-09-01T00:00:00",
    "Open": 156.64000,
    "High": 158.42000,
    "Low": 154.67000,
    "Close": 157.96000
  },
  // ...
];

// REQUIRED
chart.plot();

5. Style the chart as per your needs.

// background color
chart.backgroundColor = 'gray';
// chart title
chart.layout.title = {
  text: 'Chart Title',
  style: {
    fontSize: 16,
    fontWeight: 'bold'
  }
};
// X-axis title
chart.layout.xAxis.title.text = 'X-axis Title';
// Y-axis title
chart.layout.yAxis.title.text = 'Y-axis Title';
// legend position: East, West, North, South, NorthEast, NorthWest, SouthEast, SouthWest
chart.layout.legend.position = 'south';
// vertical gridlines
chart.layout.xAxis.grid.style.strokeDashArray = ' 1 0';
// horizontal gridlines
chart.layout.yAxis.grid.style = {
  stroke: 'brown',
  strokeDashArray: '1 4'
};
// hide vertical gridlines
chart.layout.xAxis.grid.visible = false;
// display X values in red with 2 decimal places
chart.layout.xAxis.tick = {
  text: (val) => val.toFixed(2),
  style: {
    color: 'red'
  }
};
// display Y values with 2 decimal places
chart.layout.yAxis.tick.text = (val) => val.toFixed(2);
// style vertical spy
chart.layout.xAxis.spy = {
  lineStyle: {
    stroke: 'gray'
  },
  textStyle: {
    color: 'black',
    fontSize: 12
  },
  rectStyle: {
    cornerRadius: 2,
    fill:'gray'
  }
};
// style horizontal spy
chart.layout.yAxis.spy = {
  lineStyle: {
    stroke: 'gray'
  },
  textStyle: {
    color: 'black',
    fontSize: 12
  },
  rectStyle: {
    cornerRadius: 2,
    fill: 'gray'
  }
};
// hide horizontal spy
chart.layout.yAxis.spy.visible = false;
// show X-values with 2 decimal places
chart.layout.xAxis.tick.text = (val) => val.toFixed(2);
// add axis title, show integer values on the X-axis, thicken axis line
chart.layout.xAxis = {
  title: {
    text: 'X-axis values',
    style: {
        fontSize: 14
    }
  },
  tick: {
    text: (val) => val.toFixed(0)
  },
  style: {
    strokeWidth: 3
  },
};
// hide axis line and grid, add title, show 5 ticks
chart.layout.yAxis = {
  visible: false,
  grid: {
    visible: false
  },
  title: {
    text: 'Y-axis values',
    style: {
        fontSize: 14
    }
  },
  tick: {
    placement: 'custom',
    nbTicks: 5
  }
};
// interactivity
chart.interactivity = {
  zoomRect: {
    fill: 'lightblue',
    stroke: 'blue',
    strokeDashArray: 'none'
  },
  panningSpeed: 5
};

Changelog:

v1.1.0 (04/27/2023)

• Added: Font Family to TextStyle.
• Added: TextStyle property to Legend.
• Added: RectStyle property to Legend.
• Bugfixed