How can I change the colour of index and ToolTip in Canvasjs multi line chart?

So I am working on my project that takes data and displays it on to chart I am new to JS and I never have used Canvasjs. I want to change the colour of the index and ToolTip as you can see in the below image I was able to change the line colour but it doesn't change the colour in the index and tooltip and when I Hover over a line it shows the previous colour on Marker. I hope I made it easy to understand.

What I want to change

So here is my .js code

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    backgroundColor: "transparent",
    labelFontColor: '#f5f6fa',
    title:{
        text: ""
    },
    axisX: {
        valueFormatString: "DD MMM,YY",
        lineColor: "#f5f6fa",
        fontFamily: "'Roboto', sans-serif",
        labelFontColor: "#f5f6fa",
    },
    axisY: {
        title: "Temperature (in °C)",
        suffix: " °C",
        lineColor: "#f5f6fa",
        fontFamily: "'Roboto', sans-serif",
        labelFontColor: "#f5f6fa",
    },
    legend:{
        cursor: "pointer",
        fontSize: 16,
        fontColor: "#f5f6fa",
        fontFamily: "'Roboto', sans-serif",
        itemclick: toggleDataSeries
    },
    toolTip:{
        shared: true
    },
    data: [{
        name: "Myrtle Beach",
        type: "line",
        markerSize: 0,
        lineColor: "#2196f3",
        showInLegend: true,
        yValueFormatString: "#0.## °C",
        showInLegend: true,
        dataPoints: [
            { x: new Date(2017,6,24), y: 31 },
            { x: new Date(2017,6,25), y: 31 },
            { x: new Date(2017,6,26), y: 29 },
            { x: new Date(2017,6,27), y: 29 },
            { x: new Date(2017,6,28), y: 31 },
            { x: new Date(2017,6,29), y: 30 },
            { x: new Date(2017,6,30), y: 29 }
        ]
    },
    {
        name: "Martha Vineyard",
        type: "line",
        markerSize: 0,
        lineColor: "#f44336",
        showInLegend: true,
        yValueFormatString: "#0.## °C",
        showInLegend: true,
        dataPoints: [
            { x: new Date(2017,6,24), y: 20 },
            { x: new Date(2017,6,25), y: 20 },
            { x: new Date(2017,6,26), y: 25 },
            { x: new Date(2017,6,27), y: 25 },
            { x: new Date(2017,6,28), y: 25 },
            { x: new Date(2017,6,29), y: 25 },
            { x: new Date(2017,6,30), y: 25 }
        ]
    },
    {
        name: "Nantucket",
        type: "line",
        markerSize: 0,
        lineColor: "#ffca28",
        showInLegend: true,
        yValueFormatString: "#0.## °C",
        showInLegend: true,
        dataPoints: [
            { x: new Date(2017,6,24), y: 22 },
            { x: new Date(2017,6,25), y: 19 },
            { x: new Date(2017,6,26), y: 23 },
            { x: new Date(2017,6,27), y: 24 },
            { x: new Date(2017,6,28), y: 24 },
            { x: new Date(2017,6,29), y: 23 },
            { x: new Date(2017,6,30), y: 23 }
        ]
    }]
});
chart.render();

function toggleDataSeries(e){
    if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
    }
    else{
        e.dataSeries.visible = true;
    }
    chart.render();
}

}```

Solution

I can't believe this answer was so simple just replace

this:-

lineColor

to:-

color

If you want the same color to the line, Legend Marker and in ToolTip use color instead of lineColor.

Because lineColor is only gonna change the color of the line in the chart.