NiceChart.js SVG Chart & Graph Library in JavaScript

Authorkrb20

Last UpdateNovember 17, 2018

LicenseMIT

Features:

SVG rendering for bar, line, multiline, trend line, and gauge charts.
Base browser build for bar and line charts.
Optional plugins for gauge, multiline, and trend line charts.
Axis titles, labels, colors, dimensions, legends, tooltips, and grid line controls.
Load animations, reload effects, and bar hover highlighting.
Runtime methods for data refresh, chart resizing, axis title changes, and bar/line toggling.

How to use NiceChart.js

1. Choose the JavaScript build

Use nicechart.1.1.js for bar and line charts. Load the base file before any optional chart plugin.

<script src="nicechart.1.1.js"></script>
<script src="gauge.plugin.nicechart.1.1.js"></script>
<script src="multiline.plugin.nicechart.1.1.js"></script>
<script src="trendline.plugin.nicechart.1.1.js"></script>

The download also includes nicechart.master.1.1.js, which contains the supported chart renderers in one file.

<script src="nicechart.master.1.1.js"></script>

2. Create the SVG container

NiceChart renders into an existing SVG element. The value passed to renderHere must match the SVG element ID.

<svg id="sales-chart"></svg>

3. Render a bar or line chart

Bar and line charts use an array of comma-delimited label/value strings. The first value becomes the X-axis label and the second value becomes the plotted number.

var monthlySales = [
  "Jan,1200",
  "Feb,1650",
  "Mar,1480",
  "Apr,2100",
  "May,2350",
  "Jun,2280"
];
var salesChart = new NiceChart('Bar', {
  renderHere: 'sales-chart',
  input: monthlySales
}).render();

Change Bar to Line to render the same data as a line chart.

var salesChart = new NiceChart('Line', {
  renderHere: 'sales-chart',
  input: monthlySales
}).render();

4. Render a multiline chart

Multiline charts use a label array plus a series array. Each series contains its name, line color, and numeric data.

var trafficData = {
  label: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    {
      name: 'Organic',
      color: '#2d7ff9',
      data: [120, 180, 160, 220, 260]
    },
    {
      name: 'Direct',
      color: '#f59e0b',
      data: [90, 110, 140, 125, 170]
    }
  ]
};
var trafficChart = new NiceChart('MultiLine', {
  renderHere: 'sales-chart',
  input: trafficData,
  chartStyle: {
    showLegend: true
  }
}).render();

5. Render a trend line chart

A trend line chart starts with bar or line data and places one or more reference values across the plot.

var revenueTrend = {
  data: ['Jan,1400', 'Feb,1750', 'Mar,1600', 'Apr,2300', 'May,2500'],
  type: 'Line',
  trendline: [
    {
      label: 'Target',
      color: '#f59e0b',
      value: 2000
    },
    {
      label: 'Stretch',
      color: '#dc2626',
      value: 2400
    }
  ]
};
var trendChart = new NiceChart('TrendLine', {
  renderHere: 'sales-chart',
  input: revenueTrend
}).render();

6. Render a gauge chart

Gauge input defines the current value and its minimum and maximum bounds.

var scoreData = {
  gaugeVal: 72,
  minGaugeVal: 0,
  maxGaugeVal: 100
};
var scoreGauge = new NiceChart('Gauge', {
  renderHere: 'sales-chart',
  input: scoreData,
  chartStyle: {
    gaugeTitle: 'Score',
    gaugeColor: '#2563eb'
  }
}).render();

Configuration Options

Axis options

axisColor (string): Axis color. Default: #D8D8D8.
axisWidth (string): Axis line width. Default: 1px.
axisYLabelCount (number|string): Number of Y-axis labels. The empty default lets NiceChart calculate the value from chart height.
axisXTitle (string): X-axis title. Default: an empty string.
axisYTitle (string): Y-axis title. Default: an empty string.
axisXTitleColor (string): X-axis title color. Default: #000.
axisYTitleColor (string): Y-axis title color. Default: #000.
axisXLabelColor (string): X-axis label color. Default: #000.
axisYLabelColor (string): Y-axis label color. Default: #000.
axisXLabelTb (boolean): Displays X-axis labels vertically when set to true. Default: false.
axisXLabelSkipIndex (number): Controls the interval between X-axis labels. Default: 1.
axisYTitleTb (boolean): Uses vertical text for the Y-axis title when set to true. Default: true.
axisXTitleLMargin (number): Left margin applied to the X-axis title. Default: 0.

Chart style options

chartWidth (number): SVG chart width. Default: 450.
chartHeight (number): SVG chart height. Default: 300.
chartMargin (number): Outer chart margin. Default: 30.
chartPlotColor (string): Main plot color. Default: #000.
lineStrokeWidth (string): Line width for line charts. Default: 1px.
chartPlotMargin (number): Gap between plotted bars or points. Default: 10.
showToolTip (boolean): Turns chart tooltips on or off. Default: false.
toolTipPrefix (string): Text placed before the tooltip value. Default: an empty string.
toolTipSuffix (string): Text placed after the tooltip value. Default: an empty string.
toolTipColor (string): Tooltip text color. Default: #fff.
toolTipBgColor (string): Tooltip background color. Default: #000.
circleRadius (number): Point radius for line charts. Default: 3.
chartBgColor (string): SVG background color. Default: #fff.
chartBgLines (boolean): Turns chart background grid lines on or off. Default: false.
chartBgLineColor (string): Background grid line color. Default: #D8D8D8.
chartBgLineDotted (boolean): Uses dotted background grid lines when set to true. Default: false.
showLegend (boolean): Displays the legend for multiline charts. Default: false.
legendTitleColor (string): Legend title color for multiline charts. Default: #000.

Gauge style options

gaugeBgColor (string): Gauge background color. Default: #fff.
gaugeColor (string): Gauge curve color. Default: #000.
gaugeTitle (string): Gauge title. Default: an empty string.
gaugeTitleColor (string): Gauge title color. Default: #000.
gaugeTitleFontSize (string): Gauge title font size. Default: 12px.
gaugeTitleMargin (number): Left margin for the gauge title. Default: 30.
gaugeWidth (number): Gauge curve width. Default: 30.

Animation options

highLight (boolean): Highlights bars on mouseover. Default: false.
animateLoad (boolean): Animates bar and line charts during the initial render. Default: false.
animateReload (boolean): Applies the library’s reload opacity effect when chart data is rendered again. Default: false.

Configuration example

Pass the three option groups inside the object supplied to NiceChart.

var chart = new NiceChart('Line', {
  renderHere: 'sales-chart',
  input: monthlySales,
  axisStyle: {
    axisXTitle: 'Month',
    axisYTitle: 'Revenue',
    axisXLabelColor: '#374151',
    axisYLabelColor: '#374151'
  },
  chartStyle: {
    chartWidth: 640,
    chartHeight: 360,
    chartPlotColor: '#2563eb',
    showToolTip: true,
    toolTipPrefix: '$',
    chartBgLines: true
  },
  animation: {
    animateLoad: true
  }
}).render();

API Methods

// Render the chart with its current data and configuration.
instance.render();
// Switch a Bar chart to Line, or a Line chart to Bar.
instance.toggleChart();
// Return the current chart type, such as "Bar" or "Line".
instance.getChartType();
// Replace the current input data and render the chart again.
instance.refreshChartData(newData);
// Update the X-axis and Y-axis titles and render again.
instance.changeAxisTitles('Month', 'Revenue');
// Update chart width and height and render again.
instance.resizeChart(640, 360);

Alternatives & Related Resources

FAQs

Q: Why does a NiceChart plugin fail to render?
A: Check the script order and filenames first. The plugin files depend on the base library, and the repository filenames include the .1.1.js suffix.

Q: What data format does NiceChart use?
A: Bar and line charts use strings such as "Jan,1200". Multiline charts use labels and series objects, trend line charts use data plus reference-line definitions, and gauges use current, minimum, and maximum values.

Q: Does NiceChart automatically resize with its container?
A: The library sets explicit SVG dimensions from chartWidth and chartHeight. Use resizeChart(width, height) when your layout requires a new chart size.