Giter VIP home page Giter VIP logo

chart.lineargauge.js's Introduction

A linear gauge chart type extension for Chart.js originally conceptualized by A. Scott McCulloch, PhD and coded by Alexander V.

Options

All options extend any existing default chart.js settings

{
	geometry: 'horizontal', // ('horizontal' or 'vertical') orientation of the chart
	range: { //range of chart
		startValue: 0,
		endValue: 100
	},
	axisColor: '',
	axisWidth: '',
	majorTicks: {
		interval: 100,	// if interval is 0 then ticks do not display
		customValues: [], // array of custom values
		width: 6,
		height: 2,
		offset: 0, // offset from center of the chart
		color: '#fff'
	},
	minorTicks {}, //  see majorTicks above
	tickLabels: { // font style and size you may adjust according chart.js settings
		units: '%', // will displayed after each label and in tooltips
		interval: 100,
		customValues: [],
		offset: -9,
		color: '#777b80'
	},
	scaleColorRanges: [{
			start: -20,
			end: 0,
			color: '#fe5066' // adds color segments to the axis
		}, {
			start: 30,
			end: 50,
			color: '#1224fc'
		}],
	padding: { // padding of chart
		top: 0,
		bottom: 0,
		left: 0,
		right: 0
	},
	multiTooltipTitles: 'Total' // titles which will displayed on top of multitooltip popup
}

Dataset properties

All options extend any existing default chart.js settings

{
	value: '', // indicator value
	indicator: '' // ('range' | 'point') - indicator type
	shape: '' // ('circle' | 'rect' | 'triangle' | 'inverted-triangle' | 'bowtie' | 'diamond') - shape for point indicator
	width: ''
	height: ''
	offset: ''
	color: ''
	highlightFill: '' // mouse hover change color
	colorRanges: [{ // change color of indicator according to it's value
			startpoint: 0, 
			breakpoint: 20, 
			color: '#6154ab'
		}, { 
			startpoint: 20, 
			breakpoint: 70, 
			color: '#74f40b'
		}, {
			startpoint: 70, 
			breakpoint: 100, 
			color: '#fd0902'
		}],
	tooltipRanges: [{ // change tooltip of indicator according to it's value
			startpoint: 0, 
			breakpoint: 20, 
			tooltip: 'low'
		}, { 
			startpoint: 20, 
			breakpoint: 70, 
			tooltip: 'normal'
		}, {
			startpoint: 70, 
			breakpoint: 100, 
			tooltip: 'high'
		}]
	img: '' // custom image for point indicator
	label: '' // shows before value in tooltips
}

chart.lineargauge.js's People

Contributors

tannerlinsley avatar benmccann avatar etimberg avatar

Watchers

James Cloos avatar Nur Khairusy avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.