JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var valueLabels =
    [
        {value: 10, label: "Category1"},
        {value: 20, label: "Category2"},
        {value: 30, label: "Category3"}
    ];

var chart = new CanvasJS.Chart("chartContainer",
	{
        axisY:{
            //interval : 20,
            labelFormatter: function ( e ) {
                var yCats = "";
                for(item in valueLabels)
                {
                	if(valueLabels[item].value == e.value)
                    {
                    	yCats = valueLabels[item].label;
                        break;
                    }
                }
                return yCats;
            }  
        },
        axisX:{
            interval:1,
            intervalType:"month",
            valueFormatString:"MMM",
            maximum: new Date(2014, 11, 31)
        },
          data: [
          {
            type: "scatter",
            dataPoints: [
            { x: new Date(2014, 00, 01), y: 10, name: "Category1", },
            { x: new Date(2014, 01, 01), y: 20, name: "Category2" },
            { x: new Date(2014, 02, 01), y: 30, name: "Category3" },
            { x: new Date(2014, 04, 01), y: 10, name: "Category1" },
            { x: new Date(2014, 05, 01), y: 20, name: "Category2" },
            { x: new Date(2014, 05, 20), y: 10, name: "Category1" },
            { x: new Date(2014, 06, 01), y: 20, name: "Category2" },
            { x: new Date(2014, 07, 01), y: 30, name: "Category3" },
            { x: new Date(2014, 08, 01), y: 30, name: "Category3" }
            ]
          }
          ]
    });

 chart.render();