katogiso/chartjs_line_pointstyle_plus_index.html

## chartjs_line_pointstyle_plus_index.html
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>

    <!-- https://github.com/google/palette.js -->
    <script src="../../palette.js/palette.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
</body>

<script>

 // get palette from palette.js
 var pal = palette('cb-BuGn', 8 );

 var ctx = document.getElementById("myChart").getContext("2d");

 Chart.defaults.global.elements.line.fill    = false;
 Chart.defaults.global.elements.line.tension = 0;
 Chart.defaults.global.animation             = 0;

 var myChart = new Chart(
     ctx,
     {
         type: 'line',
         data: {
             labels:   [ "Day1", "Day2", "Day3" ],
             datasets: [
                 {
                     label:           "1st Line Chart",
                     data:            [ 27, 33, 49 ],
                     borderColor:     '#' + pal[3],
                     backgroundColor: '#' + pal[3],
                     pointRadius:     8,
                     pointStyle:      'star',
                     pointBorderWidth: 2,
                 },
                 {
                     label:           "2nd Line Chart",
                     data:            [ 10, 50, 22 ],
                     borderDash:      [ 5, 10],
                     borderColor:     '#' + pal[4],
                     backgroundColor: '#' + pal[4],
                     pointRadius:     8,
                     pointStyle:      'triangle',
                     pointBorderWidth: 2,
                 }
             ]
         },
         options: {
             responsive: true,
             legend: {
                 position: 'bottom',
                 lineWidth: 0,
                 labels: {
                     fontSize: 12,
                     boxWidth: 12,
                     usePointStyle: true,
                     generateLabels: function(chart){
                         return  chart.data.datasets.map( function( dataset, i ){
                             return {
                                 text:           dataset.label,
                                 fillStyle:      dataset.backgroundColor,
                                 hidden:         !chart.isDatasetVisible(i),
                                 lineCap:        dataset.borderCapStyle,
                                 lineDash:       [],
                                 lineDashOffset: 0,
                                 lineJoin:       dataset.borderJoinStyle,
                                 lineWidth:      dataset.pointBorderWidth,
                                 strokeStyle:    dataset.borderColor,
                                 pointStyle:     dataset.pointStyle,
                                 datasetIndex:   i  // extra data used for toggling the datasets
                             };
                         })
                     }
                 }
             },
             title: {
                 display: true,
                 text: 'Multi Line Chart'
             },
             scales: {
                 yAxes: [
                     {
                         ticks: {
                             min: 0
                         },
                         scaleLabel: {
                             display: true,
                             labelString: "Values"
                         }
                     }
                 ],
                 xAxes: [
                     {
                         scaleLabel: {
                             display: true,
                             labelString: "Date"
                         }
                     }
                 ],
             }
         }
     })

</script>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>

	<!-- https://github.com/google/palette.js -->
	<script src="../../palette.js/palette.js"></script>
	</head>
	<body>
	<canvas id="myChart"></canvas>
	</body>

	<script>

	// get palette from palette.js
	var pal = palette('cb-BuGn', 8 );

	var ctx = document.getElementById("myChart").getContext("2d");

	Chart.defaults.global.elements.line.fill = false;
	Chart.defaults.global.elements.line.tension = 0;
	Chart.defaults.global.animation = 0;

	var myChart = new Chart(
	ctx,
	{
	type: 'line',
	data: {
	labels: [ "Day1", "Day2", "Day3" ],
	datasets: [
	{
	label: "1st Line Chart",
	data: [ 27, 33, 49 ],
	borderColor: '#' + pal[3],
	backgroundColor: '#' + pal[3],
	pointRadius: 8,
	pointStyle: 'star',
	pointBorderWidth: 2,
	},
	{
	label: "2nd Line Chart",
	data: [ 10, 50, 22 ],
	borderDash: [ 5, 10],
	borderColor: '#' + pal[4],
	backgroundColor: '#' + pal[4],
	pointRadius: 8,
	pointStyle: 'triangle',
	pointBorderWidth: 2,
	}
	]
	},
	options: {
	responsive: true,
	legend: {
	position: 'bottom',
	lineWidth: 0,
	labels: {
	fontSize: 12,
	boxWidth: 12,
	usePointStyle: true,
	generateLabels: function(chart){
	return chart.data.datasets.map( function( dataset, i ){
	return {
	text: dataset.label,
	fillStyle: dataset.backgroundColor,
	hidden: !chart.isDatasetVisible(i),
	lineCap: dataset.borderCapStyle,
	lineDash: [],
	lineDashOffset: 0,
	lineJoin: dataset.borderJoinStyle,
	lineWidth: dataset.pointBorderWidth,
	strokeStyle: dataset.borderColor,
	pointStyle: dataset.pointStyle,
	datasetIndex: i // extra data used for toggling the datasets
	};
	})
	}
	}
	},
	title: {
	display: true,
	text: 'Multi Line Chart'
	},
	scales: {
	yAxes: [
	{
	ticks: {
	min: 0
	},
	scaleLabel: {
	display: true,
	labelString: "Values"
	}
	}
	],
	xAxes: [
	{
	scaleLabel: {
	display: true,
	labelString: "Date"
	}
	}
	],
	}
	}
	})

	</script>