Clickfunnel - Gewichtsgrafik

Videoanleitung

Beispiel

Sandbox

Basis URL

https://quickchart.io/chart?c=

Settings

Dies sind die vollständigen Settings der Anzeige, diese werden an die Basis URL ergänzt damit das Diagramm entsprechend angezeigt wird.

{
	type: "sparkline",
	data: {
		datasets: [{
		  data: [95,95,68,68],
			pointRadius: 6,
			borderWidth: 3,
			lineTension: 0.3 ,
			borderColor: "#00d3c9",
			backgroundColor: getGradientFillHelper("vertical", ["#00d3c9", "#ffffff"])
		}]
	},
	options: {
		title: {
			display: true,
			text: "Deine Entwicklung"
		},
		scales: {
			yAxes: [{
				gridLines: {
					display: true,
					color: "#eeeeee",
					lineWidth: 0.5,
					zeroLineWidth: 0
				},
				ticks: {
				stepSize: 10,
				min: 50,
				max: 150,
				padding: 15,
				fontSize: 11,
				fontColor: "#cccccc"
			}  
			}]
		},
		plugins: {
		tickFormat: {
			suffix: " kg"
		}
	}
	}
}

Komprimierte URL

https://quickchart.io/chart?w=600&h=500&bkg=%23ffffff&c=%7B%0A%09type%3A%20%22sparkline%22%2C%0A%09data%3A%20%7B%0A%09%09datasets%3A%20%5B%7B%0A%09%09%20%20data%3A%20%5B95%2C95%2C68%2C68%5D%2C%0A%09%09%09pointRadius%3A%206%2C%0A%09%09%09borderWidth%3A%203%2C%0A%09%09%09lineTension%3A%200.3%20%2C%0A%09%09%09borderColor%3A%20%22%2300d3c9%22%2C%0A%09%09%09backgroundColor%3A%20getGradientFillHelper(%22vertical%22%2C%20%5B%22%2300d3c9%22%2C%20%22%23ffffff%22%5D)%0A%09%09%7D%5D%0A%09%7D%2C%0A%09options%3A%20%7B%0A%09%09title%3A%20%7B%0A%09%09%09display%3A%20true%2C%0A%09%09%09text%3A%20%22Deine%20Entwicklung%22%0A%09%09%7D%2C%0A%09%09scales%3A%20%7B%0A%09%09%09yAxes%3A%20%5B%7B%0A%09%09%09%09gridLines%3A%20%7B%0A%09%09%09%09%09display%3A%20true%2C%0A%09%09%09%09%09color%3A%20%22%23eeeeee%22%2C%0A%09%09%09%09%09lineWidth%3A%200.5%2C%0A%09%09%09%09%09zeroLineWidth%3A%200%0A%09%09%09%09%7D%2C%0A%09%09%09%09ticks%3A%20%7B%0A%09%09%09%09stepSize%3A%2010%2C%0A%09%09%09%09min%3A%2050%2C%0A%09%09%09%09max%3A%20150%2C%0A%09%09%09%09padding%3A%2015%2C%0A%09%09%09%09fontSize%3A%2011%2C%0A%09%09%09%09fontColor%3A%20%22%23cccccc%22%0A%09%09%09%7D%20%20%0A%09%09%09%7D%5D%0A%09%09%7D%2C%0A%09%09plugins%3A%20%7B%0A%09%09tickFormat%3A%20%7B%0A%09%09%09suffix%3A%20%22%20kg%22%0A%09%09%7D%0A%09%7D%0A%09%7D%0A%7D%0A