Violin Chart

Overview

JavaScript violin charts is a method of plotting numeric data. It is similar to a box plot, with the addition of a rotated kernel density plot on each side.

Type

ZingChart flame charts use the type="scatter" attribute. In your chart object, add a options: { violin: {} } object to enable the violin plugin.

let chartConfig = {
	type: 'scatter',
	options: {
		violin: {} // will initiate the plugin
	}
};

Data

Jitter charrts use the same data format as a scatter chart. To enter data into the flame chart, use the series array. Each object in the series array requires a values array to function properly. More information regarding the series array is available here.

series: [
	{
		values: [
			[1,9],
			[2,15],
			[3,21],
			[4,30],
			[5,40],
			[6,59],
			[7,60],
			[8,75],
			[9,81],
			[10,99]
		]
	}
]

Options

There are several configurable options to enhance and modify how the violin chart looks.

https://app.zingsoft.com/demos/embed/EN4C0WTN
https://app.zingsoft.com/demos/embed/EN4C0WTN

trim

Adjust the trim on the violin chart with the trim attribute.

options: {
	violin: {
		trim: 0, // true | false
	}
},

jitter

Adjust the jitter on the violin chart with the jitter attribute. This will affect the width and spacing of the shaded region.

options: {
	violin: {
		jitter: 1.25,
	}
},

roundingFactor

Adjust the rounding factor on the violin chart edges with the roundingFactor attribute.

options: {
	violin: {
		roundingFactor: 1,
	}
},

meanFactor

Adjust the mean factor on the violin chart with the meanFactor attribute.

options: {
	violin: {
		meanFactor: 2,
	}
},

Styling

Use the style object inside the violin object to style the shaded region of the violin charts.

options: {
	violin: {
		// general styling
		style: {
			backgroundColor: '#ff9900',
			alpha  : 1,
			lineWidth  : 1
		}
	}
},

More specific plot styling can be applied to the individual series object.

series: [
	{
		text: 'Sample A',
		// specific styling
		violin: {
			backgroundColor: '#900',
			alpha: 1,
			alphaArea: 0.2,
			lineWidth: 3,
			lineColor: '#090'
		},
		values: [...]
	}
]

Summary

Got a question about how depth charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.