Строка nvd3 со строковыми значениями по оси x

Я новичок в диаграммах nvd3. Мне нужна линейная диаграмма со строковыми значениями по оси x диаграмма должна выглядеть так: Диаграмма диаграммы, но мне нужна строка вместо столбцов

мой результат выглядит так: Диаграмма строк Все значения отображаются в x = 0

мой код

nv.addGraph(function() {
    var chart = nv.models.lineChart()
    .useInteractiveGuideline(true) 
    .transitionDuration(350)
    .x(function(d) { return d.x}) 
    .y(function(d) { return d.y}) 
    .showLegend(true)
    .showYAxis(true)
    .showXAxis(true);

    chart.xAxis.tickValues(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]);

    d3.select(element + ' svg')
    .datum(data) 
    .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

и мои данные

[{"color":"#a215af","key":"products","values":[
    {"label":"Monday","y":0,"x":"Monday"},
    {"label":"Tuesday","y":0,"x":"Tuesday"},
    {"label":"Wednesday","y":1,"x":"Wednesday"},
    {"label":"Thursday","y":6,"x":"Thursday"},
    {"label":"Friday","y":2,"x":"Friday"},
    {"label":"Saturday","y":0,"x":"Saturday"},
    {"label":"Sunday","y":13,"x":"Sunday"}]}]

Я много пробовал, но понятия не имею, что делать.

любая помощь или предложения были бы замечательными

Решение например, dcclassics упоминал, что я взял числовые значения вместо строк а затем использовали tickValues и tickFormat:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

chart.xAxis.tickValues([0, 1, 2, 3, 4, 5, 6])
.tickFormat(function(d){
    return days[d]
});

Ответ 1

как упоминалось dcclassics, я взял числовые значения вместо строк, а затем использовал tickValues и tickFormat:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

chart.xAxis.tickValues([0, 1, 2, 3, 4, 5, 6])
.tickFormat(function(d){
    return days[d]
});

эти решения работали для меня

Ответ 2

Рабочее решение:

var data = [{"color":"#a215af","key":"products","values":[
    {"y":0,"x":0},
    {"y":0,"x":1},
    {"y":1,"x":2},
    {"y":6,"x":3},
    {"y":2,"x":4},
    {"y":0,"x":5},
    {"y":13,"x":6}]}] 

nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true) 
    .transitionDuration(350)
    .x(function(d) { return d.x}) 
    .y(function(d) { return d.y}) 
    .showLegend(true)
    .showYAxis(true)
    .showXAxis(true);

  var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

  chart.xAxis
    .tickValues([0, 1, 2, 3, 4, 5, 6])
    .tickFormat(function(d){
      return days[d]
    });

  d3.select(element + ' svg')
    .datum(data) 
    .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});